Question

Technologies:

javascript

Tolerim

a month ago

The three js gltf model is not centered as it was originally and lacks color.

Here's the modified text: This is a screenshot of my model on Babylon Viewer:

A picture of my model on Babylon Viewer that works fine

However, after implementing the glTF model on Three.js, my model is not showing and can't be centered. I've tried some code suggestions from this StackOverflow post: "Centering and resizing glTF models automatically in Three.js", but it still doesn't work.

Here's the result of my model after implementation:

For reference, here's my code using Parcel.js:

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const pathModel = new URL('../assets/ya.glb', import.meta.url);

const camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 2, 8000  );

const scene = new THREE.Scene();

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 10, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 0, 10 );
scene.add( dirLight );

// glTF loader instance
const loader = new GLTFLoader();

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
// renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x808080)

// Load my model here.
loader.load( pathModel.href, function ( gltf ) {
    scene.add(gltf.scene);
}, undefined, function ( error ) {
    console.error( error );
});

document.body.appendChild( renderer.domElement );

// Animation
function animation() {
    render();
    requestAnimationFrame( animation );
}

// Render all
function render() {
    renderer.render( scene, camera );
}

render();
animation();

Am I missing anything here? It's been hours of troubleshooting, and I've already tried various solutions on StackOverflow, but it's still not working.

Answers(2)

Tolerim

a month ago

It looks like the model is not showing up in the scene and you are having trouble centering it. One issue might be that you haven't set the camera's position to view the model. You can try adding the following code after you load the model:

loader.load(pathModel.href, function (gltf) {
    // code to center model to origin and set camera position
    const box = new THREE.Box3().setFromObject(gltf.scene);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());

    // optionally add some padding to the size
    const maxDim = Math.max(size.x, size.y, size.z);
    const fov = camera.fov * (Math.PI / 180);
    let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
    cameraZ *= 1.1; // add some padding to the camera distance
    camera.position.set(center.x, center.y, cameraZ);
    camera.lookAt(center);

    // add model to scene
    scene.add(gltf.scene);
}, undefined, function (error) {
    console.error(error);
});

This code will center the model to the origin and set the camera's position and look at direction to view the model. Another issue could be that the model is not scaled properly, in which case you can adjust the scale of the model by setting gltf.scene.scale to a suitable value. Hope this helps!

Accepted Answer

I see. It seems like you are having trouble centering and resizing your glTF model on Three.js. I can help you with that. Firstly, I noticed that you are not setting the size of the renderer. You can set the size of the renderer by uncommenting the following line in your code:

renderer.setSize( window.innerWidth, window.innerHeight );

Secondly, you can center and resize your glTF model by using the following code:

// Load my model here.
loader.load( pathModel.href, function ( gltf ) {
    // Center and resize model
    const bbox = new THREE.Box3().setFromObject(gltf.scene);
    const center = bbox.getCenter(new THREE.Vector3());
    const size = bbox.getSize(new THREE.Vector3());
    const maxDim = Math.max(size.x, size.y, size.z);
    const scale = 1.0 / maxDim;
    gltf.scene.scale.set(scale, scale, scale);
    gltf.scene.position.sub(center.multiplyScalar(scale));
    scene.add(gltf.scene);
}, undefined, function ( error ) {
    console.error( error );
});

This code will center and resize your glTF model automatically. I hope this helps! Let me know if you have any other questions.