Threejs入门之十四：Threejs中的组(Group)对象
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对象，就介绍到这里，更多的功能可以查看官方文档，喜欢的关注点赞哦
腾讯云开发者
