练习题-外部gltf箱子模型

继续上节课箱子案例的讲解，做一个练习题，你可以尝试把上节课threejs代码创建的箱子模型替换为外部gltf模型。

// 箱子网格模型
const geometry = new THREE.BoxGeometry(1.0,0.4,0.6);
const material = new THREE.MeshLambertMaterial({
    map: new THREE.TextureLoader().load('./箱子.jpg'),
});
const mesh = new THREE.Mesh(geometry, material);

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
const gltf = await loader.loadAsync("../箱子.glb")
const mesh = gltf.scene;//获取箱子网格模型
mesh.position.y = 5;

包围盒Box3计算模型尺寸

如果你想知道箱子gltf模型尺寸，可以在Blender中测量，当然也可以用包围盒Box3自动计算外部gltf模型长宽高尺寸。

用包围盒计算好处就是，你加载的模型不管长宽高是多少，都可以代码自动计算出来。

如果关于包围盒知识点忘记了，你可以参考前面基础内容对包围盒 (opens new window)讲解。

const box3 = new THREE.Box3();
box3.expandByObject(mesh);//计算模型包围盒
const size = new THREE.Vector3();
box3.getSize(size);//包围盒计算箱子的尺寸

根据包围盒计算的结果，设置Box的尺寸。

// 物理箱子
const body = new CANNON.Body({
    ...
    shape: new CANNON.Box(new CANNON.Vec3(size.x/2, size.y/2, size.z/2))
});

外部gltf箱子模型局部坐标原点问题

你可以打开课件中两个模型文件箱子.glb与箱子-坐标原点不于中心重合.glb，查看自身坐标原点相对自身几何中心的位置，对比下不同。箱子.glb模型的局部坐标原点与自身几何中心重合，另一个模型不重合。

你可以对比下，两个箱子模型文件在代码中的表现。你会发现，模型局部坐标原点相对自身位置，会影响代码结果。

这提醒我们，在以后的开发中，Blender或其他人任何三维建模软件导出模型的时候，要注意模型的坐标原点位置。

// const gltf = await loader.loadAsync("../箱子.glb")
const gltf = await loader.loadAsync("../箱子-坐标原点不于中心重合.glb")