我有一个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')
您的代码几乎完成添加模型,您必须将其放置在<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
所以可以下载