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

Question

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

\n

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

\n

THREE.BufferGeometry.computeBoundingSphere()：计算的半径为NaN。“position”属性可能具有 NaN 值。\nPlaneBufferGeometry {uuid: "8D8EFFBF-7F10-4ED5-956D-5AE1EAD4DD41"，名称：""，类型："PlaneBufferGeometry"，索引：Uint16BufferAttribute，属性：Object，\xe2 \x80\xa6}

\n

下面是构建表面的 TypeScript 函数：

\n

AddSurfaces(result) {\n    let surfaces: Surface[] = result;\n\n    if (this.surfaceGroup == null) {\n      this.surfaceGroup = new THREE.Group();\n      this.globalGroup.add(this.surfaceGroup);\n    }\n   \n\n    surfaces.forEach(surface => {\n      var material = new THREE.MeshPhongMaterial({ color: \'blue\', side: THREE.DoubleSide });\n      let mesh: Mesh2D = surface.arealMesh;\n      let values: number[][] = surface.values;\n\n      let geometry: PlaneBufferGeometry = new THREE.PlaneBufferGeometry(mesh.width, mesh.height, mesh.nx - 1, mesh.ny - 1);\n      var positions = geometry.getAttribute(\'position\');\n\n\n      let node: number = 0;\n\n      // Surfaces in Three JS are ordered from top left corner x going fastest left to right\n      // and then Y (\'j\') going from top to bottom.  This is backwards in Y from how we do the \n      // modelling in the backend.\n      for (let j = mesh.ny - 1; j >= 0; j--) {\n        for (let i = 0; i < mesh.nx; i++) {\n          let value: number =  values[i][j];\n\n          if(!isNaN(values[i][j])) {\n            positions.setZ(node, -values[i][j]);\n          }\n          else {\n            positions.setZ(node, undefined);   /// This does not work?  Any ideas?\n          }\n          node++;\n        }\n      }\n      geometry.computeVertexNormals();\n\n      var plane = new THREE.Mesh(geometry, material);\n      plane.receiveShadow = true;\n      plane.castShadow = true;\n\n\n      let xOrigin: number = mesh.xOrigin;\n      let yOrigin: number = mesh.yOrigin;\n\n      let cx: number = xOrigin + (mesh.width / 2.0);\n      let cy: number = yOrigin + (mesh.height / 2.0);\n\n      // translate point to origin\n      let tempX: number = xOrigin - cx;\n      let tempY: number = yOrigin - cy;\n\n      let azi: number = mesh.azimuth;\n      let aziRad = azi * Math.PI / 180.0;\n\n      // now apply rotation\n      let rotatedX: number = tempX * Math.cos(aziRad) - tempY * Math.sin(aziRad);\n      let rotatedY: number = tempX * Math.sin(aziRad) + tempY * Math.cos(aziRad);\n\n      cx += (tempX - rotatedX);\n      cy += (tempY - rotatedY);\n\n\n      plane.position.set(cx, cy, 0.0);\n      plane.rotateZ(aziRad);\n      this.surfaceGroup.add(plane);\n    });\n    this.UpdateCamera();\n    this.animate();\n  }\n

\n

谢谢！

\n

Answer 1

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

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

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

three.js r117