3

this is the screenshot of my model on Babylon viewer: pic of my model on Babylon viewer work fine

after I implementation on Threejs to load the gltf model, my model is not showing and can't center , I have tried some code like Centering and Resizing GLTF models automatically in Three.js, but still not work,

here is the result of my model after I implement : the result of my model after I implement

here is my full 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 );

// instance of gltf loader
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();

is that anything I miss here ? :( , been hours to fix this with some answer Stackoverflow, finally I am asking here

iuer ui
  • 117
  • 9
  • You mention you've tried to center the model, but your full code does not include any attempt – could you share that code as well? Also, it's not obvious to me that this model has any color. Try it in a few online viewers. It's likely the color you see in the first screenshot is simply coming from the viewer's lighting, which is not part of the model itself. You can set up colored lighting in three.js if you wish, or use an environment map or matcap. – Don McCurdy May 02 '23 at 13:54

0 Answers0