ThreeJs学习-层级模型

本文主要是介绍ThreeJs学习-层级模型，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ThreeJs所有的模型就是一个树结构

1. Group层级模型

   //创建两个网格模型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插入到场景中作为场景子对象
   scene.add(group);

2. name可以给模型命名

3. traverse()方法递归遍历所有的模型

   // 递归遍历model包含所有的模型节点
   model.traverse(function(obj) {console.log('所有模型节点的名称',obj.name);// obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'if (obj.isMesh) {//判断条件也可以是obj.type === 'Mesh'obj.material.color.set(0xffff00);}
   });
   

4. 查找某个具体的模型.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);

• 改变子对象的.postition，子对象的在3D空间的坐标会发生改变。

• 改变父对象的.position，子对象的坐标也会改变。（父对象的坐标改变，子对象的坐标也改变）

• 本地坐标就是模型本身position属性，世界坐标就是模型本身加上父对象的.position

• getWorldPosition()获取世界坐标

  // 声明一个三维向量用来表示某个坐标,来存储世界坐标
  const worldPosition = new THREE.Vector3();
  // 获取mesh的世界坐标
  mesh.getWorldPosition(worldPosition);
  console.log('世界坐标',worldPosition);
  console.log('本地坐标',mesh.position);

• 移除对象remove

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

• 模型和材质的隐藏和显示

  mesh.visible = false;  //模型隐藏
  material.visible = true  //材质显示

  如果多个模型使用同一个材质（共享材质），这个材质隐藏后，那么使用这个材质的模型都会隐藏。

这篇关于ThreeJs学习-层级模型的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---