react three.js引入.glb模型文件

在React中引入和渲染`.glb`模型文件需要使用`react-three-fiber`库。下面是一个简单的示例代码：

首先，确保你已经安装了依赖项：

npm install three react-three-fiber

然后，创建一个新的React组件来加载和渲染`.glb`模型文件：

import React, { useRef } from 'react';
import { Canvas, useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

function Model() {
  const gltf = useLoader(GLTFLoader, '/path/to/model.glb');
  const modelRef = useRef();

  return <primitive object={gltf.scene} ref={modelRef} />;
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Model />
    </Canvas>
  );
}

export default App;

在上面的代码中，我们首先导入了需要的库和组件。然后，在`Model`组件中，我们使用`useLoader`钩子加载`.glb`模型文件。我们还通过`useRef`创建了一个引用来访问模型的实例。

在`App`组件中，我们创建了一个基本的Three.js场景，并添加了环境光和点光源。然后，我们将`Model`组件放置在场景中以渲染模型。

请确保将`/path/to/model.glb`替换为你实际模型文件的路径。

这只是一个简单的示例，你可以根据需要进行修改和扩展。希望对你有所帮助！