組其實(shí)就是一個(gè)集合,將不同的物體添加到一個(gè)組中,就形成了一個(gè)集合;
比如我們可以創(chuàng)建兩個(gè)物體,然后將這兩個(gè)物體使用group.add方法添加到同一個(gè)組中
// 創(chuàng)建幾何體
const geometry = new THREE.BoxGeometry(50,50,50)
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({
color:0x00ff00
})
// 創(chuàng)建物體A
const cubeA = new THREE.Mesh(geometry,material)
cubeA.position.set(100,0,0)
// 創(chuàng)建物體B
const cubeB = new THREE.Mesh(geometry,material)
cubeB.position.set(-100,0,0)
// 創(chuàng)建組
const group = new THREE.Group()
// 將物體A添加到組中
group.add(cubeA)
// 將物體B添加到組中
group.add(cubeB)
// 將group添加到scene中
scene.add(group)
Group的特性
在Threejs的官方文檔中介紹Group時(shí)說它幾乎與Object3D相同,因此,Group的屬性和Object3D的相同
.children屬性
使用group.children屬性可以查看所有g(shù)roup的子對象
console.log('group的子對象',group.children)
.name屬性
使用group.name屬性可以給組命名
group.name='幸?;▓@小區(qū)建筑'
.visible
對象的顯示和隱藏
group.visible = false //隱藏
平移縮放旋轉(zhuǎn)
組的平移縮放旋轉(zhuǎn)等操作會影響組里面的子對象,即子對象會跟隨組對象一起變化
使用group.translate對組進(jìn)行平移
group.translateX(100)
子對象的坐標(biāo)跟著平移了
使用group.scale.set來設(shè)置組的縮放
group.scale.set(0.5,0.5,0.5)
注意看這里同時(shí)使用了向x軸平移和縮放,其對各個(gè)物體的位置影響是綜合作用的結(jié)果。
使用group.rotate設(shè)置組的旋轉(zhuǎn)
group.rotateY(Math.PI/4)
.traverse()方法 遞歸遍歷
可以通過遞歸遍歷的算法去遍歷Threejs一個(gè)模型對象包含的所有后代
group.traverse(function(obj){
console.log(obj);
// 判斷子對象是否是物體,如果是,更改其顏色
if(obj.isMesh){
obj.material.color.set(0x0000ff)
}
})
.getObjectByName()方法 通過名稱查詢某個(gè)模型
const cubeANode = group.getObjectByName ("cubeA")
.remove() 移除對象
可以通過.remove() 方法刪除父對象中的一個(gè)子對象
group.remove(cubeA)
可以一次移除多個(gè)子對象
group.remove(cubeA,cubeB)
本地坐標(biāo)
本地坐標(biāo)也叫局部坐標(biāo),任何一個(gè)模型對象的本地坐標(biāo)都是其自身的position屬性,通過設(shè)置position屬性設(shè)置模型對象的本地坐標(biāo)
cubeA.position.set(0,10,0)
世界坐標(biāo)
世界坐標(biāo)是模型自身position和所有父對象position累加的坐標(biāo)。
這里要注意一點(diǎn),改變父對象的position,其子對象也會受到影響,做相應(yīng)的改變,因此,此時(shí)子對象的position應(yīng)該是父對象.position和子對象.position疊加的結(jié)果。
.getWorldPosition() 獲取世界坐標(biāo)
可以通過.getWorldPosition()方法來獲取世界坐標(biāo),要獲取世界坐標(biāo),首先需要先定義一個(gè)三維向量
然后通過.getWorldPosition()方法將世界坐標(biāo)傳遞給三維向量
// 聲明一個(gè)三維向量用來表示某個(gè)坐標(biāo)
const worldPosition = new THREE.Vector3()
// 獲取物體的世界坐標(biāo)
cubeA.getWorldPosition(worldPosition)
給子對象添加輔助坐標(biāo)系
可以通過.add()方法給子對象添加一個(gè)輔助的局部坐標(biāo)系,方便觀察文章來源:http://www.zghlxwxcb.cn/news/detail-462640.html
const cubeAaxesHelper = new THREE.AxesHelper(50)
cubeA.add(cubeAaxesHelper)
好了,關(guān)于Threejs中的Group對象,就介紹到這里,更多的功能可以查看官方文檔,喜歡的關(guān)注點(diǎn)贊哦文章來源地址http://www.zghlxwxcb.cn/news/detail-462640.html
到了這里,關(guān)于Threejs入門之十四:Threejs中的組(Group)對象的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!