首页 前端知识 Threejs入门之十四:Threejs中的组(Group)对象

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

2024-05-25 09:05:05 前端知识 前端哥 567 839 我要收藏

组其实就是一个集合,将不同的物体添加到一个组中,就形成了一个集合;
比如我们可以创建两个物体,然后将这两个物体使用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对象,就介绍到这里,更多的功能可以查看官方文档,喜欢的关注点赞哦

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9429.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!