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

[Neil-Hong]

I've got error in firefox, chorme works fine.
Error Message: THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

I figure out the problem is in position attribute but I don't know how to fix it and what's the issue.

const Galaxy = () => {
const particles = useRef();
const parameters = {};
parameters.count = 1000;
parameters.size = 0.1;
parameters.insideColor = "white";
parameters.outsideColor = "#1b3984";

const positions = new Float32Array(parameters.count * 3);

const colors = new Float32Array(parameters.count * 3);
const scales = new Float32Array(parameters.count * 1);
const randomness = new Float32Array(parameters.count * 3);

const insideColor = new THREE.Color(parameters.insideColor);
const outsideColor = new THREE.Color(parameters.outsideColor);

const { gl } = useThree();

for (let i = 0; i < parameters.count; i++) {
    const i3 = i * 3;
    positions[i3] = (Math.random() - 0.5) * 20;
    positions[i3 + 1] = (Math.random() - 0.5) * 20;
    positions[i3 + 2] = (Math.random() - 0.5) * 20;

    scales[i] = Math.random();

    const mixedColor = insideColor.clone();
    // mixedColor.lerp(outsideColor, radius / parameters.radius);

    colors[i3] = mixedColor.r;
    colors[i3 + 1] = mixedColor.g;
    colors[i3 + 2] = mixedColor.b;
}

const galaxyVertexShader = `
        uniform float uSize;
        uniform float uTime;

        attribute float aScale;
        attribute vec3 aRandomness;
        varying vec3 vColor;

        void main()
        {
            vec4 modelPosition = modelMatrix * vec4(position, 1.0);
            vec4 viewPosition = viewMatrix * modelPosition;
            vec4 projectedPosition = projectionMatrix * viewPosition;

            gl_Position = projectedPosition;

            //randomnize the particle size
            gl_PointSize = uSize * aScale;
            gl_PointSize *= (1.0 / - viewPosition.z);

            vColor = color;
        }
    `;

const galaxyFragmentShader = `
        varying vec3 vColor;

        void main()
        {
            //Shape 
            float strength = distance(gl_PointCoord, vec2(0.5));
            // strength *= 2.0;
            strength = 1.0 - strength;
            strength = pow(strength, 5.0);

            //Color
            vec3 color = mix(vec3(0.0), vColor, strength);

            gl_FragColor = vec4(color, 1.0);
        }
    `;

const uniformData = {
    uSize: { value: 60.0 * gl.getPixelRatio() },
    uTime: { value: 0 },
};

console.log(particles.current);
return (
    <points ref={particles}>
        <bufferGeometry args={[2, 2, 2]}>
            <bufferAttribute
                attach={"attributes-position"}
                array={positions}
                itemSize={3}
                count={positions.length}
            />
            <bufferAttribute attach={"attributes-aScale"} array={scales} itemSize={1} count={scales.length} />
            <bufferAttribute attach={"attributes-color"} array={colors} itemSize={3} count={colors.length} />
            <bufferAttribute
                attach={"attributes-aRandomness"}
                array={randomness}
                itemSize={3}
                count={randomness.length}
            />
        </bufferGeometry>
        <shaderMaterial
            depthWrite={false}
            blending={THREE.AdditiveBlending}
            vertexColors={true}
            vertexShader={galaxyVertexShader}
            fragmentShader={galaxyFragmentShader}
            uniforms={uniformData}
        />
    </points>
);

};

const Scene6 = () => {
return (

            <directionalLight color="red" position={[0, 0, 5]} />
            <Suspense fallback={null}>
                <Galaxy />
            </Suspense>
            <OrbitControls />
        </Canvas>
    </div>
);

};

export default Scene6;