层级模型

group 对象&层级模型

创建 group 层级模型

const group = new THREE.Group();
const mesh1 = new THREE.Mesh(geometry, material);
const mesh2 = new THREE.Mesh(geometry, material);
// 插入网格模型
group.add(mesh1, mesh2);
// 将 group 插入到场景中
scene.add(group);

查看子对象

// 查看 group 子对象: mesh1, mesh2
group.children;
// 查看场景子对象: group, 辅助坐标, 光源等
scene.children;

父对象旋转平移缩放操作, 子对象跟着变化

遍历模型结构

模型命名

const mesh = new THREE.Mesh(geometry, material);
const group = new THREE.Group();
group.name = "组";
mesh.name = "网格模型";

递归遍历方法 .traverse()

const group1 = new THREE.Group();
const group2 = new THREE.Group();
// ... for循环往 group1, group2中添加 mesh模型并命名
const model = new THREE.Group();
model.add(grouop1, group2);
// 递归遍历 model 包含所有的模型节点
model.traverse((obj) => {
  console.log("所有模型节点的名称", obj.name);
  // obj.isMesh：if判断模型对象 obj 是不是网格模型'Mesh'
  if (obj.isMesh) {
    //判断条件也可以是obj.type === 'Mesh'
    obj.material.color.set(0xffff00);
  }
});

查找某个具体的模型 .getObjectByName()

// 返回名.name为"4号楼"对应的对象
const nameNode = scene.getObjectByName("4号楼");
nameNode.material.color.set(0xff0000);

本地坐标和世界坐标

// 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.获取世界坐标 .getWorldPosition()

// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3();
// 获取mesh的世界坐标, 并把读取结果存储到参数Vector3中
mesh.getWorldPosition(worldPosition);
console.log("世界坐标", worldPosition);
console.log("本地坐标", mesh.position);

2.给子对象添加局部坐标系

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

模型相对局部坐标

移除&隐藏对象

1.移除对象 .remove()

• 使用

  // 删除父对象的子网格模型
  group.remove(mesh1);
  scene.remove(ambient); //移除场景中的环境光
  scene.remove(model); // 移除场景中模型对象

• 一次移除多个对象 group.remove(mesh1,mesh2)

2.隐藏对象

• 模型属性

  mesh.visible = false; // 隐藏一个网格模型，visible的默认值是true
  group.visible = false; // 隐藏一个包含多个模型的组对象group

• 材质属性

  mesh.material.visible = false;
  // 如果 mesh2和 mesh的.material 指向同一个材质，mesh2也会一起隐藏