React三光纤，fbx模型加载时间太长

Question

我刚开始使用threejsfiber，我在3D模型加载方面遇到了一些问题，或者这就是我认为的问题。下面是代码:

const Scene = () => {
let fbx = useFBX("FLEX2_matselections.fbx");
return <primitive object={fbx} scale={0.03} />;
};

export default function MainPage() {
return (
<div className='background-main-page'>
<h1 className='mainpage-hacking-text'>
This is the limited edition of NFT sneakers collectible.
<br /> There are only 10.000 pieces in the entire world.
<br /> The sneakers are in both, phisical and digital fo
</h1>
<Canvas className='canvas'>
<PerspectiveCamera makeDefault position={[17, 2, 3]} />
<OrbitControls
autoRotate
enableZoom={false}
minPolarAngle={Math.PI / 2.8}
maxPolarAngle={Math.PI / 2.8}
/>
<ambientLight intensity={0.5} />
<directionalLight position={[-2, 5, 2]} />
<Suspense fallback={null}>
<Scene />
</Suspense>
</Canvas>
</div>
);
}

事情是我想在h1标签内的文本动画，但动画是停止时，模型正在加载，使一个可怕的用户体验。你知道怎么解决这个问题吗?

Answer 1

使用gltf-pipeline和dracos的最高压缩级别压缩您的gltfs。