在线工具推荐：Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D数字孪生场景编辑器

本地坐标和世界坐标

通过前面两节课的学习，大家对threejs的层级模型或者模型的树结构有了一定了解。

本地(局部)坐标和世界坐标

// mesh的世界坐标就是mesh.position与group.position的累加
const mesh = new THREE.Mesh(geometry, material); 
mesh.position.set(50, 0, 0);
const group = new THREE.Group();
group.add(mesh);
group.position.set(50, 0, 0);

1. 改变子对象的.position，子对象在3D空间中的坐标会发生改变。
2. 改变父对象的.position，子对象在3D空间中的位置也会跟着变化，也就是说父对象.position和子对象.position叠加才是才是子对象的.position。

任何一个模型的本地坐标(局部坐标)就是模型的.position属性。

一个模型的世界坐标，说的是，模型自身.position和所有父对象.position累加的坐标。

.getWorldPosition()获取世界坐标

mesh.getWorldPosition(Vector3)读取一个模型的世界坐标，并把读取结果存储到参数Vector3中。

// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3();
// 获取mesh的世界坐标，你会发现mesh的世界坐标受到父对象group的.position影响
mesh.getWorldPosition(worldPosition);
console.log('世界坐标',worldPosition);
console.log('本地坐标',mesh.position);

给子对象添加一个局部坐标系

mesh.add(坐标系)给mesh添加一个局部坐标系。

//可视化mesh的局部坐标系
const meshAxesHelper = new THREE.AxesHelper(50);
mesh.add(meshAxesHelper);

3D建模学习工作室

专注数字孪生、3D建模、3D仿真、虚拟现实

3D建模学习工作室