Unable to correctly create position attr for points. Error: THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values."

Questions
1

Hi,
I am facing with the error "THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “position” attribute is likely to have NaN values. "
The points are successfully created, i am just confused why the error happened and how to solve it.
Here is my code. I am using Next.js. And my threejs version is
“three”: “0.160.0”,
“three-stdlib”: “^2.28.9”,
“@react-three/drei”: “^9.92.7”,
“@react-three/fiber”: “8.15.12”,

import { useMemo, useRef } from 'react'
import * as THREE from 'three'

import { useFrame } from '@react-three/fiber'

const fragmentShader = `
    uniform float uTime;
    
    varying vec3 vNormal;
    varying vec3 vPosition;
    
    
    void main() {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
`

const vertexShader = `
    uniform float uTime;
    
    varying vec3 vNormal;
    varying vec3 vPosition;
    
    void main() {
        vNormal = normal;
        
        vec3 delta = 40.0 * normal * sin(
            abs(normal.x) * 2.0 +
            abs(normal.y) * 3.0 +
            abs(normal.z) * 4.0 + uTime / 2.0);

        delta.x += 20.0 * sin(uTime * normal.z);
        delta.y += 20.0 * sin(uTime * normal.x);
        delta.z += 20.0 * sin(uTime * normal.y);
        
        vec3 newPosition = position + delta;
        
        vPosition = newPosition;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
        gl_PointSize = 1.0;
    }
    
`

const MassiveCurve = ({ ...props }) => {
  const shaderRef = useRef()
  const pointsRef = useRef()
  const torusGeometry = new THREE.TorusGeometry(25, 1, 3000, 3)

  useFrame((state, delta) => {
    shaderRef.current.uniforms.uTime.value += delta
    pointsRef.current.material.uniforms.needsUpdate = true
  })

  const data = useMemo(
    () => ({
      extensions: {
        derivatives: '#extension GL_OES_standard_derivatives: enable',
      },
      side: THREE.DoubleSide,
      transparent: true,
      uniforms: {
        uTime: { value: 0.0 },
      },
      fragmentShader,
      vertexShader,
    }),
    [],
  )

  return (
    <points ref={pointsRef} position={[1, 0, -1]} rotation={[-3.47, 0, 0]} scale={[0.18, 0.08, 0.08]}>
      <bufferGeometry attach='geometry'>
        <bufferAttribute
          attach='attributes-position'
          count={torusGeometry.attributes.position.array.length}
          array={torusGeometry.attributes.position.array}
          itemSize={3}
        />
        <bufferAttribute
          attach='attributes-normal'
          count={torusGeometry.attributes.normal.array.length}
          array={torusGeometry.attributes.normal.array}
          itemSize={3}
        />
      </bufferGeometry>

      <shaderMaterial
        ref={shaderRef}
        attach='material'
        size={0.01}
        color='#ffffff'
        sizeAttenuation
        depthWrite={false}
        {...data}
      />
    </points>
  )
}

export default MassiveCurve

Error:

1708916842406
1708916842406786×413 48.8 KB

2

Try replacing this:

count={torusGeometry.attributes.position.array.length}

with:

count={torusGeometry.attributes.position.array.count}

Same thing for the normals, use count instead of length

3

Thank you for your input! Unfortunately it did not solve the error. And i got new error coming up “workbox-c06b064f.js:1 Uncaught (in promise) DOMException: Failed to execute ‘put’ on ‘Cache’: Quota exceeded.”