React 使用 three.js 加载 gltf 3D模型,监听点击事件

在React中使用three.js加载GLTF(用于3D模型文件格式) 3D模型并监听点击事件通常涉及以下几个步骤：

1. 首先，你需要安装必要的库。在项目中通过npm或yarn添加`@react-three/fiber`和`@loaders.gl/gltf`：

npm install @react-three/fiber @loaders.gl/gltf
# 或者
yarn add @react-three/fiber @loaders.gl/gltf

2. 引入并初始化Three.js和相关组件：

import { Canvas } from '@react-three/fiber'
import { useLoader } from '@react-three/fiber'
import GLTFLoader from '@loaders.gl/gltf'

3. 创建一个函数组件，使用useLoader动态加载模型，并设置点击事件监听：

function ModelComponent() {
  // 定义需要加载的模型路径
  const model = useLoader(GLTFLoader, 'path/to/your/model.gltf')

  // 添加点击事件处理器
  const handleClick = (event) => {
    console.log('Model clicked at:', event.position)
    // 这里可以根据需要对模型或点击位置执行操作
  }

  return (
    <Canvas>
      <mesh onClick={handleClick} object={model}>
        {/* 可能需要应用材质、纹理等 */}
      </mesh>
    </Canvas>
  )
}

4. 将`ModelComponent`添加到你的React组件树中：

return (
  <div>
    <ModelComponent />
  </div>
)