纹理加载使用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”可以从脚本访问。对我来说，这看起来很微不足道，但纹理根本不显示出来。我只能看到一个白色的金字塔。

你能告诉我究竟出了什么问题吗？

UPDATE：

周围挖掘后，我发现我不得不为我所创建的自定义形状的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]); 

但它仍然显示白色pyramid.And也是我现在收到此错误 -

THREE.BufferAttribute.copyVector2sArray（）：矢量未定义0 THREE.BufferAttribute.copyVector2sArray（）：矢量未定义1 THREE.BufferAttribute.copyVector2sArray（）：矢量是未定义2 THREE.BufferAttribute.copyVector2sArray（）：矢量是未定义3 THREE.BufferAttribute.copyVector2sArray（）：载体是undefined 4 THREE.BufferAttr ibute.copyVector2sArray（）：矢量是未定义5 THREE.BufferAttribute.copyVector2sArray（）：矢量未定义6 THREE.BufferAttribute.copyVector2sArray（）：载体是未定义7 THREE.BufferAttribute.copyVector2sArray（）：矢量是未定义8 THREE.BufferAttribute.copyVector2sArray（）：矢量未定义9 THREE.BufferAttribute.copyVector2sArray（）：载体是未定义的10 THREE.BufferAttribute.copyVector2sArray（）：载体是未定义的11

任何有关它的想法？

Answer 1

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

Three.js将Geometry.faceVertexUvs当作一组UV的数组，其中每个组代表单个面的所有UV。下面是其中它们采取的UV从Geometry.faceVertexUvs代码段 -

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