How to load the GLB model correctly?

Hello everyone, I am a beginner at three.js. I have a few confusing questions and would like to consult everyone.
Method 1: Use three. js to load a model (it is a duck with a file type of glb).As shown in the figure:

Method 2: Using https://gltf-viewer.donmccurdy.com To load this model.As shown in the figure:

It can be seen that the effect of method two is very good.
Firstly,the clarity of the model is relatively high;
Second, the size and position of the model are just right.

I think there is a problem with the settings of the scene, camera, and rendering parameters.

<template>
    <div ref="container"></div>
</template>

<script>
    import * as THREE from "three";
    import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
    // 导入轨道控制器
    import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"

    export default {
        name: "Model",
        data() {
            return {
                scene: null,
                camera: null,
                renderer: null,
                control: null,
                model: null,
            };
        },
        methods: {
            // 场景
            initScene() {
                this.scene = new THREE.Scene();
            },
            // 相机
            initCamera() {

                this.camera = new THREE.PerspectiveCamera(
                    50, // 视角(物体大小)
                    window.innerWidth / window.innerHeight, // 宽高比
                    0.01, // 近平面
                    1000 // 远平面
                );
                // 设置相机位置
                this.camera.position.x = 0.02;
                this.camera.position.y = 5;
                this.camera.position.z = 10;
                // this.camera.lookAt(0, 0, 0);
            },
            // 渲染器
            initRenderer() {
                // 创建渲染器
                this.renderer = new THREE.WebGLRenderer({antialias: true});
                this.renderer.setSize(window.innerWidth, window.innerHeight);
                this.$refs.container.appendChild(this.renderer.domElement);
            },
            //光源
            initLight() {
                const light = new THREE.AmbientLight(0xffffff, 1);
                this.scene.add(light);
            },
            // 轨道控制器
            initControl() {
                this.control = new OrbitControls(this.camera, this.renderer.domElement);
                // 设置阻尼
                this.control.enableDamping = true;
                this.control.dampingFactor = 0.05;
                // 自动旋转
                this.control.autoRotate = true;
                this.control.autoRotateSpeed = 2.0;
            },
            // 模型
            initModel() {
                let _this = this;

                const loader = new GLTFLoader();
                loader.load(
                    "Duck.glb",
                    (glb) => {
                        console.log(glb);
                        _this.model = glb.scene;
                        _this.scene.add(_this.model);
                    },
                    function (xhr) {
                        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                    },
                    function (error) {
                        console.log("An error happened:", error);
                    }
                );
            },

            init() {
                // 场景
                this.initScene();
                // 相机
                this.initCamera();
                // 渲染器
                this.initRenderer();
                //光源
                this.initLight();
                // 轨道控制器
                this.initControl();
                // 模型
                this.initModel();
            },

            animate() {
                requestAnimationFrame(() => {
                    this.animate();
                });
                this.renderer.render(this.scene, this.camera);
            },
        },
        mounted() {
            this.init();

            this.animate();

            // 监听窗口变化
            window.addEventListener("resize", () => {
                // 重置渲染器宽高比
                this.renderer.setSize(window.innerWidth, window.innerHeight);
                // 重置相机宽高比
                this.camera.aspect = window.innerWidth / window.innerHeight;
                // 更新相机投影矩阵
                this.camera.updateProjectionMatrix();
            });
        },
    };
</script>

But I don’t know how to adjust them.

On the right side of Method 2, the gltf viewer lists many parameters of the model.
So how should the code for these parameters correspond?

Thank you!

The second one just seems to have better lighting, you seem to be using ambient light only. You can set the scale of the model yourself and the camera position is your own doing. If the model is properly centered in the world, then all you need to do is adjust the z axis. But there is no need to scale in your case, since its all done with the camera position.

/cc

As a beginner, take a look at the following.

Experiment with the examples.

From the collection:

LoadGLTFmove
PointLightBrightness
ArtOfLathe
LightHelperTransformControls

BeginnerExample
lines 121 …126, 221, 679

Good luck :slightly_smiling_face:

Read all of the above. But for reference. The simplest is this using the promise await

const result = await new GLTFLoader().loadAsync('model.glb');
scene.add(result.scene)