3. 本地坐标和世界坐标
# 本地(局部)坐标和世界坐标
通过前面两节课的学习,大家对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);
改变子对象的
.position
,子对象在3D空间中的坐标会发生改变。改变父对象的
.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);