How to dynamically adjust the camera for different models?

Questions
,
1

I am new to threejs and react-three-fiber. In a nutshell, I want to make models viewer. First I upload a bunch of models to the server. Then I do request and get the name list of these models. And after double click on any name I should get the model view. The problem is that these models have different sizes and for each model I need properly set the camera position. Thus the camera position has to be set dynamically, depending on the model size. I left out some details before. For my task I have to add event handlers on each mesh of the model. So I can’t just use

<primitive object={model.scene}>

At first I did something like this:

const Model = (props) => {
  const model = useGLTF(props.url);
  
  return model.scene.children.map(m => {
    if (m.geometry) return <Mesh key={m.name} m={m} />
    //I've tried not to return this but there is no difference
    return <primitive key={m.name} object={m}>
  })
}

const Mesh = (props) => {
  const {m} = props;
  const [color, setColor] = useState('white');

  return <mesh key={m.name} 
               geometry={m.geometry}
               material={m.material}
               material-color={color}
               onPointerOver={() => setColor('red')}
               onPointerOut={() => setColor('white')}
         />
}

But in this case some meshes of some models like ground have wrong position. And as I said before the camera is always on the wrong position.

Then I tried this:

const Model = (props) => {
  const model = useGLTF(props.url);
  
  return model.scene.children.map(m => {
    if (m.geometry) return <Prim key={m.name} m={m} />
    return <primitive key={m.name} object={m}>
  })
}

const Prim = (props) => {
  const {m} = props;
  const [color, setColor] = useState('white');

  return <primitive object={m}
                    material-color={color}
                    onPointerOver={() => setColor('red')}
                    onPointerOut={() => setColor('white')}
         />
}

In this case the camera is better, but not ideal, all meshes are in the right positions. But I cant manipulate color. Thus I guess this option does not suit me.

So how can I properly set camera position depending on the size of the model? That being said, I need to use meshes. And why do some of meshes lose their position while using mesh component?

2

Check this code from model-viewer

3

Have you found any solution? I also need this solution

4

there is a ready-made zoom to fit component in drei called <Bounds>: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

the easiest way to use it:

<Bounds clip fit observe>
  <Model />
</Bounds>

this will set clipping planes, fit the camera and adjust it all again on window resize. it has some other properties for damping, margins.

1 Like