如何在反应三纤维中进行简单的碰撞检测

Question

我不想使用任何库。我只想要简单的碰撞检测。如果它是沿物体移动方向的光线投射，我对此感到满意。

我不知道从哪里开始为此编写代码。

Answer 1

这称为Raycaster。可以通过使用 hook 在 React-Three-Fiber 中实现：

import { useThree } from '@react-three/fiber'
import { useMemo } from 'react'
import { Object3D, Raycaster, Vector3 } from 'three'

export const useForwardRaycast = (obj: {current: Object3D|null}) => {

  const raycaster = useMemo(() => new Raycaster(), [])
  const pos = useMemo(() => new Vector3(), [])
  const dir = useMemo(() => new Vector3(), [])
  const scene = useThree(state => state.scene)

  return () => {
    if (!obj.current)
      return []
    raycaster.set(
      obj.current.getWorldPosition(pos),
      obj.current.getWorldDirection(dir))
    return raycaster.intersectObjects(scene.children)
  }
}

这是一个codesandbox，检查控制台以了解数组何时包含命中。

TLDR 实施：

const Comp = () => {
  const ref = useRef(null)
  const raycast = useForwardRaycast(ref)
  useFrame((state, delta) => {
    ref.current.rotation.y += 1 * delta
    const intersections = raycast()
    console.log(intersections.length)
    //...do something here
  })

  return (
    <mesh ref={ref}>
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}