THREE.BufferGeometry.computeBoundingSphere():Computed radius is NaN

i'm encountering this error from the console when inspecting my page: chunk-DKIGWELO.js?v=a524ab5d:7212 THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values. _BufferGeometry

here's the code

import React, { useRef, useEffect } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { Points, PointMaterial, Preload } from "@react-three/drei";
import * as random from "maath/random/dist/maath-random.esm";
import { Suspense, useState } from "react";
import * as THREE from "three";

const Stars = (props) => {
  const ref = useRef();

  // Generate random points within a sphere
  const generatePoints = () => {
    const spherePoints = random.inSphere(new Float32Array(5000), { radius: 1.2 });
    const validPoints = spherePoints.filter((value) => !isNaN(value)); // Filter out NaN values
    return validPoints;
  };

  const [sphere] = useState(() => generatePoints());

  useFrame((state, delta) => {
    ref.current.rotation.x -= delta / 10;
    ref.current.rotation.y -= delta / 15;
  });

  return (
    <group rotation={[0, 0, Math.PI / 4]}>
      <Points ref={ref} positions={sphere} stride={3} frustumCulled {...props}>
        <PointMaterial
          transparent
          color='#f272c8'
          size={0.003}
          sizeAttenuation={true}
          depthWrite={false}
        />
      </Points>
    </group>
  );
};

const StarsCanvas = () => {
  const rendererRef = useRef(null);

  useEffect(() => {
    const renderer = new THREE.WebGLRenderer();
    rendererRef.current = renderer;

    if (!renderer.domElement) {
      console.error("Renderer DOM element is null.");
      return;
    }

    const handleContextLost = (event) => {
      console.log('WebGL context lost', event);
      // Handle WebGL context lost event
    };

    const handleContextRestored = () => {
      console.log('WebGL context restored');
      // Handle WebGL context restored event
    };

    const canvas = renderer.domElement;
    canvas.addEventListener('webglcontextlost', handleContextLost);
    canvas.addEventListener('webglcontextrestored', handleContextRestored);

    return () => {
      canvas.removeEventListener('webglcontextlost', handleContextLost);
      canvas.removeEventListener('webglcontextrestored', handleContextRestored);
    };
  }, []);

  return (
    <div className='w-full h-auto absolute inset-0 z-[-1]'>
      <Canvas
        camera={{ position: [0, 0, 1] }}
        onCreated={({ gl }) => {
          // Assign the renderer from useEffect to the context's renderer
          gl.domElement = rendererRef.current.domElement;
        }}
      >
        <Suspense fallback={null}>
          <Stars />
        </Suspense>

        <Preload all />
      </Canvas>
    </div>
  );
};

export default StarsCanvas;

Solution

I think this might be the answer to your problem: Potential Answer

You're generating 5000 points, there are 3 different positions you need to take from those points, and 5000 is not wholly divisible by 3, therefore you need a different random value, in their answer they chose 5001.

This is the code sample they used:

const [sphere] = useState(() =>

random.inSphere(new Float32Array(5001), { radius: 1.2 });

I am not the original answerer, so please look at the link I provided.

Also, I apologize for commenting, Stack Overflow automatically added a comment, I cannot remove it.