时间戳

首页 > 解决方案 > ThreeJS - THREE.BufferGeometry.computeBoundingSphere() 给出错误：NaN 位置值

three.js - ThreeJS - THREE.BufferGeometry.computeBoundingSphere() 给出错误：NaN 位置值

问题描述

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

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

三.BufferGeometry.computeBoundingSphere()：计算半径为NaN。“位置”属性可能具有 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();
  }

谢谢！

标签： three.js

解决方案

我读过另一篇类似但较旧的帖子，其中建议用“未定义”而不是 NaN 填充位置 Z 组件。

usingundefined会以与 using 相同的方式失败NaN。BufferGeometry.computeBoundingSphere()根据 计算半径Vector3.distanceToSquared()。如果使用不包含有效数值数据的向量调用此方法，NaN将返回。

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

three.js r117

推荐阅读