加载展厅gltf模型

下面给大家讲解加载展厅的gltf模型，还有相机位置的设置问题。

Blender导出gltf模型

Blender导出gltf(与threejs协作) (opens new window)

选择gltf的二进制格式.glb即可。

CreateTwin.js编写gltf加载器代码

...
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

export default class CreateTwin {
    constructor() {
        // 场景
        this.scene = new THREE.Scene();
        ...
        this.loader = new GLTFLoader()
        ...
    }
}

HelloWorld.js文件调用this.loader加载模型

<script setup>
import twin from './twin';
import * as THREE from 'three';
twin.loader.load('./展厅.glb',function(gltf){
    twin.scene.add(gltf.scene);
})
//添加一个光源方便观察模型
const ambient = new THREE.AmbientLight(0xffffff, 1.0);
twin.scene.add(ambient);
</script>

<template>
    
</template>

<style scoped>

</style>

相机参数设置

上节课相机位置默认参数

this.camera.position.set(100, 100, 100);

如果想正常预览展厅内部效果，要注意展厅位置设置，可以Blender中测量下展厅大概尺寸，判断下尺寸对应单位。

相机距离地面高度，与人眼睛距离低面高度近似即可。

h = 1.6;//不一定设置1.6，也可以1.7，不同人人高也有差异，大概设置即可
this.camera.position.set(x, h, z);

x和z位置设置，注意别超出展厅范围，才能默认看到室内效果，要不然就是室外效果了，另外也注意别放到展厅内其它设备里面了，比如设置(0, h, 0)会与展厅中间设置重合，可以适当错开(1.0, h, 3.0)

this.camera.position.set(1.0, 1.6, 3.0);

// 辅助观察坐标
const axesHelper = new THREE.AxesHelper(50)
twin.scene.add(axesHelper)

建模软件Blender与threejs坐标系xyz对应 (opens new window)

相机选择合适视场角度

调整视场角度fov改变观察范围，选择一个你想要的角度即可。

this.camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 3000);