为什么在Three.js的顶点上不渲染纹理

Question

我已经用THREE.js创建了一个场景。大多数表面是具有零宽度和已应用纹理的BoxGeometries。一切正常，包括房屋上的透明窗户。当我增加屋顶时，我需要制作成角度的平板和三角形空间。我决定使用从另一个StackOverflow页面（How to create a custom mesh on THREE.JS?）借用的技术。网格正在渲染，但不是纹理。我尝试使用不同的纹理图像，它的确改变了渲染面板的颜色，但仍然没有可见的纹理。我想念一些东西。如果我可以使用它，我将开始使用更多基于顶点的网格来填充建筑物。为什么不渲染纹理？

    //texture
    var texture = new THREE.ImageUtils.loadTexture("shingles.jpg");
    texture["shingles"] = new THREE.MeshBasicMaterial({ map:texture, side:THREE.DoubleSide});

    //roof
    var v1 = new THREE.Vector3(farRight,level+height,back);
    var v2 = new THREE.Vector3(farRight,level+height,front);
    var v3 = new THREE.Vector3((farRight+farLeft)/2,level+(3*height/2),front-(3*width/2));
    var v4 = new THREE.Vector3((farRight+farLeft)/2,level+(3*height/2),back+(3*width/2));

    var geom = new THREE.Geometry(); 
    geom.vertices.push(v1);
    geom.vertices.push(v2);
    geom.vertices.push(v3);
    geom.vertices.push(v4);
    geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
    geom.faces.push( new THREE.Face3( 3, 0, 2 ) );
    var object = new THREE.Mesh( geom, textures["shingles"] );
    scene.add(object);

Answer 1

您还需要添加纹理坐标。（又称为uv坐标）。必须填写一个名为faceVertexUVs的字段。您需要将每个面的左上角设置为0,0，将右上角设置为1,0，将左下角设置为0.1，将右下角设置为1,1。