three js gltf model not center like originally and no color

Question

这是我的模型在 Babylon 查看器上的截图：

在 Threejs 上实现加载 gltf 模型 后，我的模型没有显示并且无法居中，我已经尝试了一些代码，例如 Centering and Resizing GLTF models automatically in Three.js，但仍然不起作用，

这是我实施后模型的结果：

这是我使用 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();

我想念的是什么吗？ :( 花了好几个小时才用 Stackoverflow 的一些答案来解决这个问题，最后我在这里问了