useGLTF——使用GLTF格式的3D模型

useGLTF是一个React Hook，用于在React应用中加载和管理GLTF格式的3D模型。GLTF是一种开放的3D文件格式，可以包含几何形状、材质、动画等属性，可在多个3D应用程序之间共享。使用useGLTF，可以轻松地将GLTF模型集成到您的React应用中。

安装

npm install use-gltf --save

API

useGLTF提供了以下API：

useGLTF(url: string, [extensions: string[], [resolve: Function]])

此方法用于加载GLTF文件并返回所提供URL的资源。还可以选择传递扩展名和解析函数参数，以支持您的特定GLTF资产。

import { useGLTF } from 'use-gltf';

const GltfModel = ({ url }) => {
  const { scene, nodes } = useGLTF(url);
  return (
    <group>
      <primitive object={scene} />
    </group>
  );
};

useGLTF.preload(url: string, [extensions: string[], [resolve: Function]])

此方法用于预加载GLTF文件。调用此方法将在后台加载模型，以便可以快速呈现模型。还可以选择传递扩展名和解析函数参数，以支持您的特定GLTF资产。

import { useGLTF } from 'use-gltf';

useGLTF.preload('/models/my-model.gltf');

示例

下面是一个使用useGLTF加载的简单示例：

import React from 'react';
import { Canvas } from 'react-three-fiber';
import { useGLTF } from 'use-gltf';

const MyModel = ({ url }) => {
  const { nodes } = useGLTF(url);

  return (
    <group>
      <mesh geometry={nodes.mesh1.geometry}>
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </group>
  );
};

const App = () => (
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <MyModel url="/models/my-model.gltf" />
  </Canvas>
);

结论

使用useGLTF可以轻松地在React应用程序中集成GLTF格式的3D模型。只需几行代码，就可以将您的3D资产加载到您的应用程序中，并在交互中呈现。它使您可以利用官方的THREE.GLTFLoader和THREE.GLTFExporter库（以及任何其他适用的GLTF库）来轻松运作，为您呈现出优秀的3D场景。