Threejs入门之十四：Threejs中的组(Group)对象

组其实就是一个集合，将不同的物体添加到一个组中，就形成了一个集合；
比如我们可以创建两个物体，然后将这两个物体使用group.add方法添加到同一个组中

// 创建几何体
const geometry = new THREE.BoxGeometry(50,50,50)
// 创建材质
const material = new THREE.MeshBasicMaterial({
  color:0x00ff00
})
// 创建物体A
const cubeA = new THREE.Mesh(geometry,material)
cubeA.position.set(100,0,0)
// 创建物体B
const cubeB = new THREE.Mesh(geometry,material)
cubeB.position.set(-100,0,0)
// 创建组
const group = new THREE.Group()
// 将物体A添加到组中
group.add(cubeA)
// 将物体B添加到组中
group.add(cubeB)
// 将group添加到scene中
scene.add(group)

Group的特性
在Threejs的官方文档中介绍Group时说它几乎与Object3D相同，因此，Group的属性和Object3D的相同
.children属性
使用group.children属性可以查看所有group的子对象

console.log('group的子对象',group.children)

.name属性
使用group.name属性可以给组命名

group.name='幸福花园小区建筑'

.visible
对象的显示和隐藏

group.visible = false  //隐藏

平移缩放旋转
组的平移缩放旋转等操作会影响组里面的子对象，即子对象会跟随组对象一起变化
使用group.translate对组进行平移

group.translateX(100)

子对象的坐标跟着平移了
使用group.scale.set来设置组的缩放

group.scale.set(0.5,0.5,0.5)

注意看这里同时使用了向x轴平移和缩放，其对各个物体的位置影响是综合作用的结果。
使用group.rotate设置组的旋转
group.rotateY(Math.PI/4)
.traverse()方法 递归遍历
可以通过递归遍历的算法去遍历Threejs一个模型对象包含的所有后代

group.traverse(function(obj){
  console.log(obj);
  // 判断子对象是否是物体，如果是，更改其颜色
  if(obj.isMesh){
    obj.material.color.set(0x0000ff)
  }
})

.getObjectByName()方法 通过名称查询某个模型

const cubeANode = group.getObjectByName ("cubeA")

.remove() 移除对象
可以通过.remove() 方法删除父对象中的一个子对象

group.remove(cubeA)

可以一次移除多个子对象

group.remove(cubeA,cubeB)

本地坐标
本地坐标也叫局部坐标，任何一个模型对象的本地坐标都是其自身的position属性，通过设置position属性设置模型对象的本地坐标

cubeA.position.set(0,10,0)

世界坐标
世界坐标是模型自身position和所有父对象position累加的坐标。
这里要注意一点，改变父对象的position，其子对象也会受到影响，做相应的改变，因此，此时子对象的position应该是父对象.position和子对象.position叠加的结果。

.getWorldPosition() 获取世界坐标
可以通过.getWorldPosition()方法来获取世界坐标，要获取世界坐标，首先需要先定义一个三维向量
然后通过.getWorldPosition()方法将世界坐标传递给三维向量

// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3()
// 获取物体的世界坐标
cubeA.getWorldPosition(worldPosition)

给子对象添加辅助坐标系
可以通过.add()方法给子对象添加一个辅助的局部坐标系，方便观察

const cubeAaxesHelper = new THREE.AxesHelper(50)
cubeA.add(cubeAaxesHelper)

好了，关于Threejs中的Group对象，就介绍到这里，更多的功能可以查看官方文档，喜欢的关注点赞哦