react-three/cannon场景中球体移出平面几何范围后不响应重力问题

问题根源 #

@react-three/cannon 提供的usePlane接口默认生成的是无限延伸的物理碰撞平面，碰撞范围和你视觉渲染时用planeBufferGeometry定义的50x50尺寸没有关联，这就是球体移出视觉平面范围后依然不会下落的原因。

你之前猜测物理碰撞范围由几何参数决定的思路是正确的，只是usePlane属于特例，它的物理碰撞体不会自动绑定视觉网格的尺寸。

解决方案 #

将地面的物理碰撞体从无限平面替换为可自定义尺寸的盒型碰撞体，即可让物理碰撞范围和视觉渲染范围完全对齐，修改后的Ground.js代码如下：

import { useBox } from '@react-three/cannon'
import { useNormalTexture } from '@react-three/drei'

export default function Ground(props) {
  // 盒型碰撞体的尺寸和视觉平面一致：宽50、深50、厚度0.1，旋转参数保持不变
  const [ref] = useBox(() => ({ 
    rotation: [-Math.PI / 2, 0, 0],
    args: [50, 50, 0.1],
    ...props 
  }))

  const [normalMap] = useNormalTexture(32, {
    offset: [0, 0],
    repeat: [100, 100],
    anisotropy: 8
  })

  return (
    <mesh ref={ref} receiveShadow>
      <planeBufferGeometry attach="geometry" args={[50, 50]} />
      <meshStandardMaterial
        attach="material"
        normalMap={normalMap}
        color="#dadb84"
      />
    </mesh>
  )
}

修改后球体只要移出50x50的地面范围，就会正常受重力影响下落。

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