Loaded GLTF is clipping out of view and far away

Questions
,
1

I am trying to render a GLTF model using the GLTFLoader. When I render the object, it can only be seen out of the corner of the camera, and disappears as I move the camera towards it.

Here is the ReactJS code, GLTF file, and a screen recording: Example using react-three fiber to load a GLTF · GitHub

2

@Swhite215 probably you will need to put the object in the center of the scene where the camera is looking at.

To do that, put the gltf scene into a new group. Something like:


loader.load('model.gltf', ( gltf ) => {

const group = new THREE.Group();
group.add(gltf.scene);
scene.add(group);
....

PD: your gltf example need to a .bin file that is not in the link you sent. Can you share a glb version or add the missing .bin file

3

@JuanP Okay I was able to add to a group and then change the camera position, albeit with a lot of trial and error, to get the object in the center. But now when I move the screen, the object is not the center focus. How do I change this? Example using react-three fiber to load a GLTF · GitHub