0

I am currently using useGLTF from @react-three/drei to load my 3d model. I have already compressed the model using gltf-pipeline (the .glb file is 1.7MB). However, for the first time accessing the website, the model takes a extremely long time to load (about 30-50 seconds). You can check out my code below:

import { Canvas, useFrame } from '@react-three/fiber'
import { useGLTF, Environment, OrbitControls } from '@react-three/drei'
import React, { Suspense, useRef } from 'react'
import styles from './ThreeScene.module.css'

function Robot(props) {
    const { scene } = useGLTF('/compressed-robot.glb');
    return <primitive object={scene} {...props} />;
}

export default function Model() {
    const ref = useRef();
    return (
        <div className={styles.canvas}>
            <Suspense fallback={<div className="center">loading</div>}>
                <Canvas shadows dpr={[1, 2]} camera={{ position: [3, 3, 3], fov: 50 }}>
                    <ambientLight intensity={0.5} />
                    <Robot position={[0, -0.9, 0]} scale={0.7} />
                    <Environment preset="city" />
                    <OrbitControls ref={ref} autoRotate enableZoom={false} enableRotate={true} autoRotateSpeed={4.0} />
                </Canvas>
            </Suspense>
        </div>
    )
}

Any ideas how I can improve the performance? I am using NextJS.

I have tried searching for solutions, but those founded were all for @react-three. I am using a basic model here, so I used the pre-built function useGLTF() from @react-three/drei. And I could not find a solution for the problem.

Sagar Darekar
  • 982
  • 9
  • 14
Huynh Le
  • 1

1 Answers1

0

I'm more in THREE.js than react three fiber but...

Do you have the polygon Count on youre model ?

I had a problem like that before loader some models...my polygons count was to high...

Try this page and lower the polygons count with blender to see if it can helps.

reduce polygon count

Have a great day !

nok
  • 11
  • 2