如何在Three.js中正确加载GLB模型？参数适配问题咨询

一、解决模型尺寸与位置问题 #

在线查看器会自动计算模型包围盒，将模型居中并调整相机到合适距离，代码中可通过以下逻辑实现：

在模型加载回调中添加包围盒计算与调整逻辑：

_this.model = glb.scene;
_this.scene.add(_this.model);

// 计算模型包围盒
const box = new THREE.Box3().setFromObject(_this.model);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());

// 将模型移至场景中心
_this.model.position.sub(center);

// 根据模型尺寸计算相机最优位置，确保完整显示
const maxDim = Math.max(size.x, size.y, size.z);
const fov = _this.camera.fov * (Math.PI / 180);
let cameraZ = (maxDim / 2) / Math.tan(fov / 2);
cameraZ *= 1.2; // 增加1.2倍余量避免模型贴边

_this.camera.position.set(0, size.y/2, cameraZ);
_this.camera.lookAt(0, 0, 0);

// 更新轨道控制器目标点，让旋转围绕模型中心
_this.control.target.set(0, 0, 0);
_this.control.update();

二、提升模型清晰度 #

1. 适配设备像素比 #

在线查看器会自动适配屏幕像素比避免模糊，在渲染器初始化时添加：

this.renderer.setPixelRatio(window.devicePixelRatio);

2. 增强光源配置 #

仅用环境光会导致模型质感平淡，在线查看器通常搭配多光源组合，替换原initLight方法：

initLight() {
    // 环境光提供基础照明
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    this.scene.add(ambientLight);
    
    // 主方向光模拟太阳光，增强立体感
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(5, 10, 7.5);
    this.scene.add(directionalLight);
    
    // 辅助方向光弱化阴影，避免过暗区域
    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4);
    directionalLight2.position.set(-5, 10, -7.5);
    this.scene.add(directionalLight2);
}

三、在线查看器参数与代码的对应关系 #

在线查看器右侧的参数可直接映射到Three.js API：

• 相机参数：FOV对应PerspectiveCamera构造函数第一个参数，近/远平面对应第3、4个参数，相机位置对应camera.position；
• 模型参数：位置对应model.position，缩放对应model.scale，旋转对应model.rotation；
• 光源参数：光源类型（环境光/方向光等）对应Three.js的光源类，强度对应光源的intensity属性，颜色对应color属性，位置对应光源的position；
• 渲染参数：抗锯齿对应WebGLRenderer的antialias选项，像素比对应renderer.setPixelRatio()方法。

优化后的完整代码 #

<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
                );
            },
            initRenderer() {
                this.renderer = new THREE.WebGLRenderer({antialias: true});
                this.renderer.setSize(window.innerWidth, window.innerHeight);
                // 适配设备像素比提升清晰度
                this.renderer.setPixelRatio(window.devicePixelRatio);
                this.$refs.container.appendChild(this.renderer.domElement);
            },
            initLight() {
                // 环境光
                const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
                this.scene.add(ambientLight);
                
                // 主方向光
                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
                directionalLight.position.set(5, 10, 7.5);
                this.scene.add(directionalLight);
                
                // 辅助方向光
                const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4);
                directionalLight2.position.set(-5, 10, -7.5);
                this.scene.add(directionalLight2);
            },
            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) => {
                        _this.model = glb.scene;
                        _this.scene.add(_this.model);

                        // 计算模型包围盒并调整位置和相机
                        const box = new THREE.Box3().setFromObject(_this.model);
                        const center = box.getCenter(new THREE.Vector3());
                        const size = box.getSize(new THREE.Vector3());

                        // 模型居中
                        _this.model.position.sub(center);

                        // 调整相机位置
                        const maxDim = Math.max(size.x, size.y, size.z);
                        const fov = _this.camera.fov * (Math.PI / 180);
                        let cameraZ = (maxDim / 2) / Math.tan(fov / 2);
                        cameraZ *= 1.2; // 增加余量

                        _this.camera.position.set(0, size.y/2, cameraZ);
                        _this.camera.lookAt(0, 0, 0);

                        // 更新控制器目标
                        _this.control.target.set(0, 0, 0);
                        _this.control.update();
                    },
                    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.control.update();
                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>

内容的提问来源于stack exchange，提问作者nieyuan1980