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

Question

我用 THREE.js 创建了一个场景。大多数表面是宽度为零且应用了纹理的 BoxGeometries。一切正常，包括房子上的透明 windows。当我去添加屋顶时，我需要制作有角度的平板和三角形空间。我决定使用从另一个 Whosebug 页面 (How to create a custom mesh on THREE.JS?) 借来的技术。网格正在渲染，但不是纹理。我试过不同的纹理图像，它确实改变了渲染面板的颜色，但仍然没有可见的纹理。我错过了什么。如果我能让它工作，我将开始使用更多 vertex-based 网格来填充我的建筑物。为什么纹理渲染不出来？

    //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 矢量。经过一些阅读后，我能够弄清楚它们是如何工作的，并使纹理能够适当地映射。我在这里包括完整的解决方案以供将来参考。前两段代码。

    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 以形成梯形。三角形几何体在底部有两个点，在 top-middle.

有一个点

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

Answer 1

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

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

Why is texture not rendering on vertices in Three.js (missing UVs)

three.js

textures

geometry-surface