紋理加載使用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]);