three.js - ThreeJS - THREE.BufferGeometry.computeBoundingSphere() 给出错误 : NaN Position Values

Question

我正在使用 Threejs 创建一个简单的 THREE.PlaneBufferGeometry。地表是地球上的地质表面。

这个表面有由 NaN 表示的局部间隙或“孔”。我读过另一篇类似但较旧的帖子，其中建议用“未定义”而不是 NaN 填充位置 Z 组件。我试过了，但出现了这个错误:

THREE.BufferGeometry.computeBoundingSphere():计算出的半径为 NaN。 “position”属性可能有 NaN 值。PlaneBufferGeometry {uuid:“8D8EFFBF-7F10-4ED5-956D-5AE1EAD4DD41”，名称:“”，类型:“PlaneBufferGeometry”，索引:Uint16BufferAttribute，属性:对象，...}

这是构建表面的 TypeScript 函数:

AddSurfaces(result) {
    let surfaces: Surface[] = result;

    if (this.surfaceGroup == null) {
      this.surfaceGroup = new THREE.Group();
      this.globalGroup.add(this.surfaceGroup);
    }
   

    surfaces.forEach(surface => {
      var material = new THREE.MeshPhongMaterial({ color: 'blue', side: THREE.DoubleSide });
      let mesh: Mesh2D = surface.arealMesh;
      let values: number[][] = surface.values;

      let geometry: PlaneBufferGeometry = new THREE.PlaneBufferGeometry(mesh.width, mesh.height, mesh.nx - 1, mesh.ny - 1);
      var positions = geometry.getAttribute('position');


      let node: number = 0;

      // Surfaces in Three JS are ordered from top left corner x going fastest left to right
      // and then Y ('j') going from top to bottom.  This is backwards in Y from how we do the 
      // modelling in the backend.
      for (let j = mesh.ny - 1; j >= 0; j--) {
        for (let i = 0; i < mesh.nx; i++) {
          let value: number =  values[i][j];

          if(!isNaN(values[i][j])) {
            positions.setZ(node, -values[i][j]);
          }
          else {
            positions.setZ(node, undefined);   /// This does not work?  Any ideas?
          }
          node++;
        }
      }
      geometry.computeVertexNormals();

      var plane = new THREE.Mesh(geometry, material);
      plane.receiveShadow = true;
      plane.castShadow = true;


      let xOrigin: number = mesh.xOrigin;
      let yOrigin: number = mesh.yOrigin;

      let cx: number = xOrigin + (mesh.width / 2.0);
      let cy: number = yOrigin + (mesh.height / 2.0);

      // translate point to origin
      let tempX: number = xOrigin - cx;
      let tempY: number = yOrigin - cy;

      let azi: number = mesh.azimuth;
      let aziRad = azi * Math.PI / 180.0;

      // now apply rotation
      let rotatedX: number = tempX * Math.cos(aziRad) - tempY * Math.sin(aziRad);
      let rotatedY: number = tempX * Math.sin(aziRad) + tempY * Math.cos(aziRad);

      cx += (tempX - rotatedX);
      cy += (tempY - rotatedY);


      plane.position.set(cx, cy, 0.0);
      plane.rotateZ(aziRad);
      this.surfaceGroup.add(plane);
    });
    this.UpdateCamera();
    this.animate();
  }

谢谢!

Answer 1

I have read another similar, but older, post where the suggestion was to fill the position Z component with 'undefined' rather than NaN.

使用 undefined 会像使用 NaN 一样失败。 BufferGeometry.computeBoundingSphere() 根据 Vector3.distanceToSquared() 计算半径。如果您使用不包含有效数值数据的向量调用此方法，将返回 NaN。

因此，您不能用 NaN 或 undefined 位置数据表示几何中的间隙。更好的方法是生成一个实际代表地质表面几何形状的几何形状。使用 ShapeBufferGeometry 可能是更好的选择，因为形状确实支持孔的概念。

three.js r117