使用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