将纹理应用于Threejs中的自定义平面几何体

时间:2017-10-20 14:48:38

标签: javascript three.js

我正在尝试将纹理应用于我创建的平面,下面是我正在使用的方法。关于错误的任何指针?

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);
}

纹理对象不是null并且似乎正确加载但不会在创建的平面上应用。

1 个答案:

答案 0 :(得分:0)

我通过使用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