UVマッピングを使用してPlaneGeometryでテクスチャを45度回転させます。

Question

回転したテクスチャをPlaneGeometryにマップしようとしています。私は私の平面形状は、UVを使用して上に画像でダイヤモンドをマッピングしたい

：

は基本的に、私はこのようになります44x44ダイヤモンドテクスチャを持っています。 Three.jsを使用してこれを行うことは可能ですか？本質的に、テクセル（0、22）をuv（0,0）にマッピングし、テクセル（22,0）をuv（1.0,0）にマッピングします。

ここで私が使用しているコードです：https://jsfiddle.net/mxLt0bun/2/

geometry = new THREE.PlaneGeometry(1, 1); 

    texture = loader.load("https://i.imgur.com/DPZiMyK.png") 
    texture.minFilter = THREE.NearestFilter; 
    texture.magFilter = THREE.NearestFilter; 

    material = new THREE.MeshBasicMaterial({ 
    map: texture 
    }); 
    mesh = new THREE.Mesh(geometry, material); 

    // draw edges 
    var geo = new THREE.WireframeGeometry(mesh.geometry); 
    var mat = new THREE.LineBasicMaterial({ 
    color: 0x00FF00, 
    linewidth: 1 
    }); 
    var wireframe = new THREE.LineSegments(geo, mat); 
    mesh.add(wireframe); 

    scene.add(mesh); 

Answer 1

をそのようにあなたのジオメトリのUVを変更することができます。

geometry = new THREE.PlaneGeometry(1, 1); 

geometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].set(0.5, 1.0); 
geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].set(0.0, 0.5); 
geometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].set(1.0, 0.5); 
geometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].set(0.0, 0.5); 
geometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].set(0.5, 0.0); 
geometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].set(1.0, 0.5); 

BufferGeometryがより効率的ですが。あなたもそれを使うかもしれません。これはあなたが何を意味するか

geometry = new THREE.PlaneBufferGeometry(1, 1); 

geometry.attributes.uv.setXY(0, 0.5, 1.0); 
geometry.attributes.uv.setXY(1, 1.0, 0.5); 
geometry.attributes.uv.setXY(2, 0.0, 0.5); 
geometry.attributes.uv.setXY(3, 0.5, 0.0); 

three.js r.83