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

Question

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

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（）：vector is undefined 0 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 1 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 2 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 3 THREE。 BufferAttribute.copyVector2sArray（）：vector is undefined 4 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 5 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 6 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 7 THREE.BufferAttribute。 copyVector2sArray（）：vector is undefined 8 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 9 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 10 THREE.BufferAttribute.copyVector2sArray（）：vector is undefined 11

有什么想法吗？

Answer 1

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

Three.js将Geometry.faceVertexUvs视为一组UV的数组，其中每个集合代表单个面的所有UV。 以下是从Geometry.faceVertexUvs获取UV的代码片段 -

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