three.jsメッシュ回転素材

Question

私はいくつかの代わりに木片のように見えるように材料を整列させたいと思います。 [1枚]

テクスチャ/マテリアルを回転させるにはどうすればよいですか？あるいは、個々のジオメトリではなく、このobject3dをマテリアルに設定できますか？

ありがとうございます。

私はこれを試しましたが、運がありません！ イメージはランダムな色で読み込まれます。

var material; 
var loader = new THREE.TextureLoader; 
var onLoad = function(_texture) { 
    var imgWidth = imgHeight = 128; 
    var mapCanvas = document.createElement('canvas'); 
    mapCanvas.width = mapCanvas.height = 128; 

    // document.body.appendChild(mapCanvas); 
    var ctx = mapCanvas.getContext('2d'); 
    var img = new Image; 
    img.onload = function() { 
    ctx.translate(imgWidth/2, imgHeight/2); 
    ctx.rotate(Math.PI/4); 
    ctx.translate(-imgWidth/2, -imgHeight/2); 
    ctx.drawImage(img, 0, 0, imgWidth, imgHeight); 
    } 
    img.src = 'http://remote.plancher2000.com:82/1-2-2-5-Bois.jpg'; 

    var texture = new THREE.Texture(mapCanvas); 
    texture.needsUpdate = true; 
    material = new THREE.MeshBasicMaterial({map : texture, side:THREE.DoubleSide}); 
    material.needsUpdate = true; 
}; 
... 
mesh[no] = new THREE.Mesh(geometry, material); 
loader.load(image, onLoad, onProgress, onError); 

Answer 1

UVが欠けていました。

function assignUVs(geometry) { 
geometry.faceVertexUvs[0] = []; 
var faceno = 0; 

geometry.faces.forEach(function(face) { 
    var components = ['x', 'y', 'z'].sort(function(a, b) { 
    var truthy = (Math.abs(face.normal[a]) > Math.abs(face.normal[b])); 
    return truthy; 
    }); 
    var v1 = geometry.vertices[face.a]; 
    var v2 = geometry.vertices[face.b]; 
    var v3 = geometry.vertices[face.c]; 
    geometry.faceVertexUvs[0].push([ 
    new THREE.Vector2(v1[components[0]], v1[components[1]]), 
    new THREE.Vector2(v2[components[0]], v2[components[1]]), 
    new THREE.Vector2(v3[components[0]], v3[components[1]]), 
    ]); 
    faceno++; 
}); 
geometry.uvsNeedUpdate = true; 
}