为什么纹理不在 Three.js 中的顶点上渲染（缺少 UV）

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

----------------已更新完整答案------------------------- ----

如已接受的答案中所述，我错过了添加 UV 向量。经过一番阅读，我能够弄清楚它们是如何工作的，并让纹理适当地映射。我在这里包含完整的解决方案以供将来参考。前两个 sn-ps 代码。

    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 v5 = new THREE.Vector3(farLeft,level+height,back);
    var v6 = new THREE.Vector3(farLeft,level+height,front);
    geom = new THREE.Geometry(); 
    geom.vertices.push(v3);
    geom.vertices.push(v4);
    geom.vertices.push(v5);
    geom.vertices.push(v6);
    geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
    geom.faces.push( new THREE.Face3( 3, 0, 2 ) );
    geom.faceVertexUvs[0].push([new THREE.Vector2(.3, 1),
                                new THREE.Vector2(.7, 1),
                                new THREE.Vector2(1, 0)]);
    geom.faceVertexUvs[0].push([new THREE.Vector2(0, 0),
                                new THREE.Vector2(.3, 1),
                                new THREE.Vector2(1, 0)]);
    object = new THREE.Mesh( geom, textures["shingles"] );
    scene.add(object);

    var v1 = new THREE.Vector3(farRight,level+height,back);
    var v4 = new THREE.Vector3((farRight+farLeft)/2,level+(3*height/2),back+(3*width/2));
    var v5 = new THREE.Vector3(farLeft,level+height,back);
    geom = new THREE.Geometry(); 
    geom.vertices.push(v1);
    geom.vertices.push(v4);
    geom.vertices.push(v5);
    geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
    geom.faceVertexUvs[0].push([new THREE.Vector2(0, 0),
                                new THREE.Vector2(.5, 1),
                                new THREE.Vector2(1, 0)]);
    object = new THREE.Mesh( geom, textures["shingles"] );
    scene.add(object);

现在是一张图片和一个解释。上面代码中的两个几何图形在图片中突出显示。因为我看中了，顶点 3 和 4 稍微向内，形成梯形。同样，对应于这些点的 UV 顶点是从角向内的 0.3 和 0.7 以形成梯形。三角形几何图形在底部有两个点，在顶部中间有一个点。

基本上，创建顶点、添加顶点、定义面，然后（这是我错过的部分）添加与纹理中的位置相对应的 UV 顶点。

Answer 1

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