使用 ShaderMaterial 的自定义几何图形的纹理加载在 Three.js 中不起作用

Question

在这里，我有一个有四个顶点和四个面的几何（金字塔） -

var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vector3(0,100,0), new THREE.Vector3(-100,-100,100), new THREE.Vector3(0,-100,-100), new THREE.Vector3(100,-100,100));
geom.faces.push( new THREE.Face3( 0, 2, 1), new THREE.Face3( 0, 1, 3), new THREE.Face3( 0, 3, 2), new THREE.Face3( 1, 2, 3) );
geom.computeFaceNormals();

这是我的 RawShaderMaterial -

var geomMaterial = new THREE.RawShaderMaterial({
        vertexShader: [
            'precision highp float;',
            'precision highp int;',
            'uniform mat4 modelViewMatrix;',
            'uniform mat4 projectionMatrix;',
            'attribute vec3 position;',
            'attribute vec2 uv;',
            'varying vec2 interpolatedUV;',
            'void main() {',
            'interpolatedUV = uv;',
            'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
            '}'
        ].join('\n'),
        fragmentShader: [
            'precision highp float;',
            'precision highp int;',
            'uniform sampler2D texSampler;',
            'varying vec2 interpolatedUV;',
            'void main() {',
            'gl_FragColor = texture2D(texSampler, interpolatedUV);',
            '}'
        ].join('\n'),
        uniforms: {
            texSampler: {
                type: 't',
                value: new THREE.ImageUtils.loadTexture("images/test.png")
            }
        }
    });

"images/test.png" 可以从脚本中访问。这对我来说似乎微不足道，但纹理根本没有出现。我只能看到一个白色的金字塔。

你能告诉我它到底出了什么问题吗？

更新：

在四处挖掘之后，我发现我必须为我创建的自定义几何体提供 UV 贴图。所以我以这种方式添加了它-

var uvs = [];
    uvs.push(new THREE.Vector2(0.5, 1.0));
    uvs.push(new THREE.Vector2(0.5, 0.0));
    uvs.push(new THREE.Vector2(0.0, 0.0));
    uvs.push(new THREE.Vector2(1.0, 0.0));

    geom.faces.push( new THREE.Face3( 0, 2, 1));
    geom.faceVertexUvs[0].push(uvs[0], uvs[2], uvs[1]);

    geom.faces.push( new THREE.Face3( 0, 1, 3));
    geom.faceVertexUvs[0].push(uvs[0], uvs[1], uvs[3]);

    geom.faces.push( new THREE.Face3( 0, 3, 2));
    geom.faceVertexUvs[0].push(uvs[0], uvs[3], uvs[2]);

    geom.faces.push( new THREE.Face3( 1, 2, 3));
    geom.faceVertexUvs[0].push(uvs[1], uvs[2], uvs[3]);

但它仍然显示白色金字塔。而且我现在也收到此错误 -

THREE.BufferAttribute.copyVector2sArray(): 向量未定义 0 三.BufferAttribute.copyVector2sArray()：向量未定义 1 三.BufferAttribute.copyVector2sArray()：向量未定义 2 三.BufferAttribute.copyVector2sArray()：向量未定义 3 三.BufferAttribute.copyVector2sArray()：向量未定义 4 三.BufferAttribute.copyVector2sArray()：向量未定义 5 三.BufferAttribute.copyVector2sArray()：向量未定义 6 三.BufferAttribute.copyVector2sArray()：向量未定义 7 三.BufferAttribute.copyVector2sArray()：向量未定义 8 三.BufferAttribute.copyVector2sArray()：向量未定义 9 三.BufferAttribute.copyVector2sArray()：向量未定义 10 三.BufferAttribute.copyVector2sArray()：向量未定义 11

有什么想法吗？

Answer 1

在调试了 Three.js 的代码后，我发现了问题所在。我把它写下来作为答案，因为其他人也可能面临同样的问题。

Three.js 将 Geometry.faceVertexUvs 视为一组 UV 的数组，其中每组代表单个面的所有 UV。这是他们从 Geometry.faceVertexUvs 获取 UV 的代码 sn-p -

if(!0===e){
     w=d[0][k];// here d=Geometry.faceVertexUvs and k=the index of the face

     if(void 0!==w)
       this.uvs.push(w[0],w[1],w[2]);
     else{
       console.warn("THREE.DirectGeometry.fromGeometry(): Undefined vertexUv ", k);
       this.uvs.push(new THREE.Vector2,new THREE.Vector2,new THREE.Vector2);
     }
}

因此，解决方案是提供 Geometry.faceVertexUvs 作为 FaceUvs 数组。这是我的粗略解决方案 -

var faceUvs = [[],[],[],[]];
faceUvs[0].push(uvs[0], uvs[2], uvs[1]);
faceUvs[1].push(uvs[0], uvs[1], uvs[3]);
faceUvs[2].push(uvs[0], uvs[3], uvs[2]);
faceUvs[3].push(uvs[1], uvs[2], uvs[3]);
geom.faceVertexUvs[0].push(faceUvs[0]);
geom.faceVertexUvs[0].push(faceUvs[1]);
geom.faceVertexUvs[0].push(faceUvs[2]);
geom.faceVertexUvs[0].push(faceUvs[3]);