使用UV映射在PlaneGeometry上旋轉紋理45度

Question

我試圖將旋轉的貼圖映射到PlaneGeometry上。

從本質上講，我有一個44x44的鑽石紋理，看起來像這樣：

我想在圖像中的鑽石地圖使用的UV我的平面幾何到。這可能使用Three.js嗎？實質上，映射texel（0,22）到uv（0,0），texel（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