I recently imported one of my model into the Three js canvas as a GLTF file. I worked it on blender and the origin was where it should be, but in Three js it’s not, it’s really away from where it should be and it’s messing up my rotation. I saw some people talking about putting the object inside a Group and then using the group for rotation and positioning but either I doesn’t work for me or I’m doing something wrong, so if someone with this type of solution could provide just an example of code I would be very thankful.
You could probably try loading your model in the official editor and then try to center it there since there is the CENTER button available on the Geometry tab.
Alternative to this could be to load your GLTF model in my GLTF Viewer to check if it gets centered. If it does get centered then you can check the viewer’s code and its set_initial_scale() function.
box3.getCenter / geometry.center should be what you’re looking for.
If the model is complex - has many meshes and geometries - use box3 to measure it and calculate the center.
If the model has a single geometry - just use geometry.center.
1 Like
let box = new THREE.Box3().setFromObject( glb.scene );
glb.scene.position.sub( box.getCenter(new THREE.Vector3() );
I got help on the Three.js Discord, so I’ll write my solution here for anyone encountering this problem.
In fact the problem was not really that complicated, what happened is that I didn’t know that by exporting the model with Blender the origin of it should be at the global 0, 0, 0 coordinates.