javascript - 使用 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(): 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]);