3つのメッシュ生成 - BufferAttribute.copyVector3sArrayベクトルが定義されていません

Question

実行時に球のメッシュを作成しています（これは後でスーパーシェイプ生成に使用されるため、SphereGeometryの外に出ています）。現在のベクトル配置は正常に動作しているようです（適切な座標に球を配置してテストします）。これらの座標からメッシュを作成するときしかし、私は下のエラーに遭遇しています：私が言うことができるか、頂点と面が期待通りにメッシュに割り当てられているから、Chromeのデバッガを使用して

three.min.js:532 
THREE.BufferAttribute.copyVector3sArray(): vector is undefined 0 
copyVector3sArray @ three.min.js:532 
fromDirectGeometry @ three.min.js:548 
fromGeometry @ three.min.js:547 
setFromObject @ three.min.js:544 
get @ three.min.js:67 
update @ three.min.js:76 
k @ three.min.js:155 
k @ three.min.js:156 
Wd.render @ three.min.js:190 
render @ threedVisuals.js:520 
superShapes @ threedVisuals.js:512 
visualise @ app.js:155 
(anonymous) @ app.js:87 

、しかし、この問題メッシュがレンダリングサイクルに渡されたときにスローされます。このプロセスの機能は以下のとおりです。

function calcSphere(radius, detailLevel) { 
 
    var globePoints = []; 
 

 
    for (var i = 0; i < detailLevel; i++) { //latitude 
 
    var lat = map_range(i, 0, detailLevel, -Math.PI/2, Math.PI/2); 
 

 
    var latPoints = []; 
 
    for (var j = 0; j < detailLevel; j++) { //longitude 
 
     var long = map_range(j, 0, detailLevel, -Math.PI, Math.PI); 
 

 
     // convert lat and long to cartesian coords 
 
     var x = radius * Math.sin(long) * Math.cos(lat); 
 
     var y = radius * Math.sin(long) * Math.sin(lat); 
 
     var z = radius * Math.cos(long); 
 

 
     latPoints.push({ 
 
     x, 
 
     y, 
 
     z 
 
     }); 
 
    } 
 
    globePoints.push(latPoints); 
 
    } 
 
    drawSphere(globePoints); 
 
} 
 

 
function drawSphere(globePoints) { 
 

 
    var sphereGeo = new THREE.Geometry(); 
 

 
    for (var i = 0; i < globePoints.length - 1; i++) { 
 
    for (var j = 0; j < globePoints[i].length - 1; j++) { 
 

 
     var curIndex = sphereGeo.vertices.length; //used for tracking cur location in vertices array 
 

 
     var v1 = globePoints[i][j]; 
 
     sphereGeo.vertices.push(new THREE.Vector3(v1.x, v1.y, v1.z)); 
 
     var v2 = globePoints[i + 1][j]; 
 
     sphereGeo.vertices.push(new THREE.Vector3(v2.x, v2.y, v2.z)); 
 
     var v3 = globePoints[i][j + 1]; 
 
     sphereGeo.vertices.push(new THREE.Vector3(v3.x, v3.y, v3.z)); 
 
     var v4 = globePoints[i + 1][j + 1]; 
 
     sphereGeo.vertices.push(new THREE.Vector3(v4.x, v4.y, v4.z)); 
 

 

 
     var f1 = new THREE.Face3(
 
     sphereGeo.vertices[curIndex + 0], 
 
     sphereGeo.vertices[curIndex + 1], 
 
     sphereGeo.vertices[curIndex + 2]); 
 
     var f2 = new THREE.Face3(
 
     sphereGeo.vertices[curIndex + 1], 
 
     sphereGeo.vertices[curIndex + 2], 
 
     sphereGeo.vertices[curIndex + 3]); 
 

 
     sphereGeo.faces.push(f1); 
 
     sphereGeo.faces.push(f2); 
 
    } 
 
    } 
 

 
    // sphereGeo.computeFaceNormals(); 
 
    // sphereGeo.computeVertexNormals(); 
 
    var sphereMat = new THREE.MeshBasicMaterial(); 
 
    var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat); 
 
    scene.add(sphereMesh); 
 
}

誰もこれが発生している理由としていくつかの光を当てることができますか？同様の問題が見つからないようで、コンピューティングの法線などの問題解決も機能していません（three.min.js:326 - Uncaught TypeError: Cannot read property 'x' of undefined）。

事前に感謝します。

Answer 1

ありがとう@ prisoner849、これは愚かな監督だった。

コードブロック：

var f1 = new THREE.Face3(
    sphereGeo.vertices[curIndex + 0], 
    sphereGeo.vertices[curIndex + 1], 
    sphereGeo.vertices[curIndex + 2]); 
    var f2 = new THREE.Face3(
    sphereGeo.vertices[curIndex + 1], 
    sphereGeo.vertices[curIndex + 2], 
    sphereGeo.vertices[curIndex + 3]); 

は単純であるべきである。

 var f1 = new THREE.Face3(
      curIndex+0, 
      curIndex+1, 
      curIndex+2); 
     var f2 = new THREE.Face3(
      curIndex+1, 
      curIndex+2, 
      curIndex+3); 

直接頂点を参照する必要はありません。