如何在React Three Fiber中加载3d模型

Question

我有一个App.js文件，在Three Fiber中呈现一个二十面体几何体，我如何使文件加载model .js文件中的模型

App.js

import React, { Suspense, useRef} from "react";
import { Canvas, useFrame } from "react-three-fiber";
import { Model } from "./Model";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import GltfModel from "./GltfModel";
import "./styles.scss";
const Box = () => {
const mesh = useRef(null);
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
return (
<mesh ref={mesh}>
<icosahedronGeometry  />
<meshPhongMaterial attach="material" color="#a6fb22" />
</mesh>
);
}
function App() {

return (
<>
<Canvas>

<Box />
<ambientLight args={[0xff0000]} intensity={0.01} />
<directionalLight position={[0, 0, 5]} intensity={0.5} />
<Suspense></Suspense>
</Canvas>
</>
);
}
export default App;

这是用npx gltfjsx模型制作的文件。gltf Model.js

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'
export function Model(props) {
const { nodes, materials } = useGLTF('/model.gltf')
return (
<group {...props} dispose={null}>
<mesh geometry={nodes.Text.geometry} material={materials.Material} position={[-0.08, 0, 0.25]} rotation={[Math.PI / 2, 0, 0]} />
</group>
)
}
useGLTF.preload('/model.gltf')

Answer 1

您的代码几乎完成添加模型，您必须将其放置在<Suspense/>中，如下所示:

return (
<>
<Canvas>

<Box />
<ambientLight args={[0xff0000]} intensity={0.01} />
<directionalLight position={[0, 0, 5]} intensity={0.5} />
<Suspense fallback={null}>
<Model/>
</Suspense>
</Canvas>
</>
);

你还必须确保model.gltf放在你的项目的public文件夹:

public/model.gltf

所以可以下载