React ThreeJs 渲染问题 - 计算半径为 NaN

Question

我是 Threejs 的新手，我对试图在屏幕上显示的星星模型有疑问。这些点有效，但我收到以下消息：

THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.

在查看了我的代码并发现解决问题的部分是星星画布之后。星星画布：

const StarsCanvas = () => {
  return (
    <div className="w-full h-auto absolute inset-0 z-[-1]">
      <Canvas camera={{ position: [0, 0, 1] }}>
        <Suspense fallback={null}>
          <Stars />
        </Suspense>
        <Preload all />
      </Canvas>
    </div>
  );
};

这是我正在使用的画布，下面是星星组件：

星星：

import * as random from "maath/random/dist/maath-random.esm";
...
const Stars = (props) => {

  const ref = useRef();
  const [sphere] = useState(() =>
    random.inSphere(new Float32Array(5000), { radius: 1.2 })
  );

  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.002}
          sizeAttenuation={true}
          depthWrite={false}
        />
      </Points>
    </group>
  );
};

useFrames 正在让星星移动并且它正在发挥作用。

解决问题的部分很可能是 random.inSphere(new Float32Array(5000), { radius: 1.2 }) 它显然给出了使半径为 NaN 的值（可能在加载之后？）。我正在使用“@react-三/纤维”和“@react-三/drei 库

我阅读了文档，但没有找到解决我的问题的方法，希望获得一些帮助，谢谢！

改写随机位置还是不行。写出不同的方式来展示星星

Answer 1

我已经找到解决方案了！

随机函数生成 5000 个点。Threejs 向量从数组中获取 3 个点 - x,y,z。使得最后一个 z 点不存在！(5000/3 -> 1666 2/3) 我需要更改为除以 3 - 5001 的数字，以使错误消失。

const [sphere] = useState(() =>
random.inSphere(new Float32Array(5001), { radius: 1.2 }));