层级模式和树结构
场景对象scene构成的层级模型本身是一个树结构,场景对象层级模型的第一层,也就是树结构的根节点,一般来说网格模型Mesh、点模型Points、线模型Line是树结构的最外层叶子结点。构建层级模型的中间层一般都是通过Threejs的
Group
类来完成,Group
类实例化的对象可以称为组对象
Object3D本身就是表示模型节点,因此也可以作为中间层
Threejs场景对象Scene、组对象Group都有一个子对象属性.children
,通过该属性可以访问父对象的子对象,子对象属性.children
的值是数组,所有子对象是数组的值。
父对象执行.add()
方法的本质就是把参数中的子对象添加到自身的子对象属性.children
中。
//创建两个网格模型mesh1、mesh2
const geometry = new THREE.BoxGeometry(20, 20, 20);
const material = new THREE.MeshLambertMaterial({color: 0x00ffff});
const group = new THREE.Group();
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
mesh2.translateX(25);
//把mesh1型插入到组group中,mesh1作为group的子对象
group.add(mesh1);
//把mesh2型插入到组group中,mesh2作为group的子对象
group.add(mesh2);
// 批量插入
group.add(mesh1,mesh2);
//把group插入到场景中作为场景子对象
scene.add(group);
移除对象
// 删除父对象group的子对象网格模型mesh1
group.remove(mesh1);
// 批量移除
group.remove(mesh1,mesh2);
本地坐标和世界坐标
任何一个模型的本地坐标(局部坐标)就是模型的
.position
属性。一个模型的世界坐标,说的是,模型自身
.position
和所有父对象.position
累加的坐标。
获取世界坐标
// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3();
// 获取mesh的世界坐标,你会发现mesh的世界坐标受到父对象group的.position影响
mesh.getWorldPosition(worldPosition);
console.log('世界坐标',worldPosition);
console.log('本地坐标',mesh.position);
给子对象添加一个局部坐标系
//可视化mesh的局部坐标系
const meshAxesHelper = new THREE.AxesHelper(50);
mesh.add(meshAxesHelper);
改变模型相对局部坐标原点位置
局部坐标相对模型发生改变,旋转轴自然也会发生变化
//长方体的几何中心默认与本地坐标原点重合
const geometry = new THREE.BoxGeometry(50, 50, 50);
// 平移几何体的顶点坐标,改变几何体自身相对局部坐标原点的位置
geometry.translate(50/2,0,0,);;
function render() {
model.rotateY(0.01);//旋转动画
requestAnimationFrame(render);
}
render();