3 세대 메쉬 생성 - BufferAttribute.copyVector3sArray 벡터가 정의되지 않았습니다.

Question

런타임에 구형 메쉬를 작성하고 있습니다 (나중에 supershape 생성에 사용되므로 SphereGeometry 외부로 이동합니다). 현재 벡터 배치가 잘 작동하는 것 같습니다 (적절한 좌표에 구체를 배치하여 테스트). 이 좌표에서 메시를 만들 때 그러나, 나는 아래의 오류가 발생하고있다 : 내가 말할 수있는, 정점과 얼굴은 예상대로 메시에 할당되고에서, 크롬의 디버거를 사용

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 

그러나,이 문제 메쉬가 렌더링 사이클에 전달되면 throw됩니다. 이 프로세스의 기능은 다음과 같습니다

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

직접 정점을 참조 할 필요가 없습니다.