@react-three/fiber下map渲染的任意位置Box如何添加随机旋转

问题根因 #

• 拼写错误：JavaScript 内置圆周率常量的正确写法是全大写的Math.PI，你写的Math.Pi会返回undefined，计算后得到NaN自然无法生效
• 属性使用错误：@react-three/fiber 的mesh组件不存在rotateX/rotateY顶层属性，旋转参数需要通过rotation属性传递

修正方案 #

最简修正 #

直接修改Box组件的mesh属性写法即可，修改后代码如下：

const Box = ({position}) => {
  const mesh = useRef()
  return (
    <mesh
      ref={mesh}
      position={position}
      // rotation参数依次对应x、y、z轴的旋转弧度值
      rotation={[Math.random()*Math.PI, Math.random()*Math.PI, 0]}
      scale={Math.random()}
    >
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshNormalMaterial />
    </mesh>
  )
}

额外优化建议 #

• 你当前循环只生成了100个坐标点，如果要实现500个立方体的需求，把createPositions函数里的循环上限i < 100改成i < 500即可
• 如果你希望立方体的旋转、缩放参数在组件重渲染时保持固定，不会每次刷新都变，可以提前把所有随机参数一次性生成，不要在组件渲染函数内计算随机值：

// 提前生成所有立方体的参数
function createBoxParams() {
  let params = []
  for (var i = 0; i < 500; i++) {
    params.push({
      position: [(Math.random() - 0.5) * 30, (Math.random() - 0.5) * 30, (Math.random() - 0.5) * 30],
      rotation: [Math.random()*Math.PI, Math.random()*Math.PI, 0],
      scale: Math.random()
    })
  }
  return params
}
const boxParams = createBoxParams()

// 渲染时直接传参数即可
{boxParams.map((item, i) => (
  <Box key={i} {...item}  />
))}

内容的提问来源于stack exchange，提问作者abrar