Increasing performance running many .gltf models in the same scene

Questions
,
1

Hello,

I have a collection of .gltf models I am trying to display – currently I have them in one group, and I would like to have up to 50 of them in a single scene.

Currently they’re spread out in a circle, and I rotate the circle like a carousel and the user can view the model as it rotates infront of a static camera.

Here’s an example of one of my model tsx files that i’m loading,

import {useEffect, useRef} from "react";
import {useLoader, useFrame} from "@react-three/fiber";
import {useAnimations, Text3D, PresentationControls } from '@react-three/drei';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import font from './assets/Open Sans_Regular.json';
import model from "./assets/model.gltf";

export default function P50(props) {

    const group = useRef();
 
    const gltf = useLoader(GLTFLoader, model);
    const nodes = gltf.nodes;
    const materials = gltf.materials;
    const animations = gltf.animations;
    const { actions } = useAnimations(animations, group);


    useEffect(() => {
     group.current.position.x = props.x;
     group.current.position.y = props.y;
     group.current.position.z = props.z;
      console.log(gltf.scene);
    }, [])
    

  return (
    <group {...props} ref={group} dispose={null}  rotation={[0, props.offsetRotation, 0]}>
        <PresentationControls  enabled={true} >
      <group position={[0, -0.05, 0]} scale={[20, 20, 20]}>
        <mesh geometry={nodes.body.geometry} material={materials.Vault_2i2} />
        <mesh geometry={nodes.grill.geometry} material={materials.Vault_2i2} />
        <mesh geometry={nodes.polySurface1.geometry} material={materials.Vault_2i2}/>
      </group>
      </PresentationControls>
      {/* <Text3D font={font} {...textOptions} position ={[-1.9, -3, 1.7]} rotation={[0, 0, 0]} >
     {props.name}
  <meshBasicMaterial color="rgb(20, 20, 20)"/>
</Text3D> */}
    </group>
  )
}

The component containing all the models

export default function Showcase(props) {



return (
    <>
      <Canvas  camera={{fov: 30}, {position: [0, 1, 8]}}> 
        <color attach="background" args={['#F9F9F9']} />
        <Suspense fallback={null}>
        <Carousel unitRotation={props.unitRotation} models={props.models}/> 

        <spotLight intensity={0.5} angle={0.2} penumbra={1} position={[0, 10, 10]} castShadow/>
        </Suspense>
        <ambientLight intensity={1.5}/>
      
      </Canvas>
     
  </>
      
);


};

And here is the movement function that rotates the group, prop-driven
```js
 
    useFrame((state, delta) => {
      universe.current.rotation.y = THREE.MathUtils.lerp(
        universe.current.rotation.y,
        props.unitRotation,  
        0.02)
    })

Are there any tricks I can use to reduce lag during animation?

2

There’s a performance pitfalls section in the R3F docs that you’ll probably want to review — you’ll want to avoid setting state or props for each frame. If your components are rendering constantly, that’s going to be a huge bottleneck. I sometimes add logging to the component body so that it’s obvious if the component renders more than once or twice. The R3F docs offer some suggestions on other ways to structure this.

3

Thank you for the response, all the best