三个 js 网格生成 - BufferAttribute.copyVector3sArray vector is undefined

Question

我正在运行时构建球体的网格（稍后将用于超形生成，因此我不在 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

使用 Chrome 的调试器，据我所知，顶点和面按预期分配给了网格，但是，当网格被传递到渲染周期时会抛出这个问题。此过程的函数是：

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

不需要直接引用顶点。

三个 js 网格生成 - BufferAttribute.copyVector3sArray vector is undefined

Three js Mesh Generation - BufferAttribute.copyVector3sArray vector is undefined

javascript

vector

mesh

three.js