ThreeJS - THREE.BufferGeometry.computeBoundingSphere() Gives Error: NaN Position Values

Question

I am creating a simple THREE.PlaneBufferGeometry using Threejs. The surface is a geologic surface in the earth.

This surface has local gaps or 'holes' in it represented by NaN's. I have read another similar, but older, post where the suggestion was to fill the position Z component with 'undefined' rather than NaN. I tried that but get this error:

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. PlaneBufferGeometry {uuid: "8D8EFFBF-7F10-4ED5-956D-5AE1EAD4DD41", name: "", type: "PlaneBufferGeometry", index: Uint16BufferAttribute, attributes: Object, …}

Here is the TypeScript function that builds the surface:

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

Thanks!

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.

Using undefined will fail in the same way like using NaN. BufferGeometry.computeBoundingSphere() computes the radius based on Vector3.distanceToSquared(). If you call this method with a vector that contains no valid numerical data, NaN will be returned.

Hence, you can't represent the gaps in a geometry with NaN or undefined position data. The better way is to generate a geometry which actually represents the geometry of your geologic surface. Using ShapeBufferGeometry might be a better candidate since shapes do support the concept of holes.

three.js r117