在 Threejs 中将纹理应用于自定义平面几何答案

【问题标题】：applying texture to custom plane geometry in Threejs在 Threejs 中将纹理应用于自定义平面几何
【发布时间】：2017-10-21 01:08:13
【问题描述】：

我正在尝试将图像纹理应用到我创建的平面上，下面是我正在使用的方法。关于错误的任何指示？

function drawPlane(plane){
    geometry = new THREE.Geometry();
    geometry.vertices.push( new THREE.Vector3( plane[0][0], plane[0][1], plane[0][2]) );
    geometry.vertices.push( new THREE.Vector3( plane[1][0], plane[1][1], plane[1][2]));
    geometry.vertices.push( new THREE.Vector3( plane[2][0], plane[2][1], plane[2][2]) );
    geometry.vertices.push( new THREE.Vector3( plane[3][0], plane[3][1], plane[3][2]) );

    geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // counter-clockwise winding order
    geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    //var material = new THREE.MeshBasicMaterial({color: 0xffffff});
    var material  = new THREE.MeshPhongMaterial();
    material.side = THREE.DoubleSide;
    material.map = texture; // this texture not applied 
    mesh = new THREE.Mesh( geometry, material );
    scene.add(mesh);
}

纹理对象不为空，似乎可以正确加载，但没有应用到创建的平面上。

【问题讨论】：

可能，因为您的几何有空的.faceVertexUvs 数组。创建THREE.PlaneGeometry() 并检查它的这个参数，它包含什么。阅读该参数here 并阅读this SO thread
如何将 PlaneGeometry 与我指定的坐标一起使用？
我不建议使用THREE.PlaneGeometry()。只需查看其.faceVertexUvs 并将其与您的自定义THREE.Geometry() 的相同参数进行比较。
是的，我添加了环境光，还使用基本材料进行了测试。纹理基本上是统一的颜色
stackoverflow.com/questions/34932860/… facevertexUVs 可能是你前面提到的问题。

标签： javascript three.js

【解决方案1】：

我通过使用从 PlaneGeometry 生成的 UV 解决了这个问题，

geometry.faces.push( new THREE.Face3( 0, 1, 3 ) ); 
geometry.faces.push( new THREE.Face3( 1, 2, 3 ) );

var planeMesh = new THREE.Mesh(
new THREE.PlaneGeometry( 1000, 1000 ),
new THREE.MeshBasicMaterial() );
geometry.faceVertexUvs = planeMesh.geometry.faceVertexUvs

【讨论】：

创建THREE.PlaneGeometry() 的实例并将其.faceVertexUvs 分配给您的几何体就足够了。