分組
const group1 = new THREE.Group(); //所有高層樓的父對象group1.name = "高層";for (let i = 0; i < 5; i++) {const geometry = new THREE.BoxGeometry(20, 60, 10);const material = new THREE.MeshLambertMaterial({color: 0x00ffff});const mesh = new THREE.Mesh(geometry, material0);mesh.position.x = i * 30; // 網格模型mesh沿著x軸方向陣列group1.add(mesh); //添加到組對象group1mesh.name = i + 1 + '號樓';// console.log('mesh.name',mesh.name);}group1.position.y = 30;const group2 = new THREE.Group();group2.name = "洋房";// 批量創建多個長方體表示洋房for (let i = 0; i < 5; i++) {const geometry = new THREE.BoxGeometry(20, 30, 10);const material = new THREE.MeshLambertMaterial({color: 0x00ffff});const mesh = new THREE.Mesh(geometry, material0);mesh.position.x = i * 30;group2.add(mesh); //添加到組對象group2mesh.name = i + 6 + '號樓';}group2.position.z = 50;group2.position.y = 15;const model = new THREE.Group();model.name = '小區房子';model.add(group1, group2);model.position.set(-50, 0, -25);scene.add(model);console.log(scene.children)
把模型分組后可以通過group設置一些共有屬性 比如例子中的房子在x軸平鋪 y、z是相同的
子項的位置是相對于父項的位置確定的 比如父項x為-30 子項為0 那么子項的實際位置在-30
這樣設置有利于把一個整體一起放在圖上 而不用一個一個設置坐標
遍歷節點
//遍歷節點 obj為節點 obj.屬性可以進行判斷model.traverse(function (obj) {console.log('所有模型節點的名稱', obj.name);// obj.isMesh:if判斷模型對象obj是不是網格模型'Mesh'if (obj.isMesh) {//判斷條件也可以是obj.type === 'Mesh'obj.material.color.set(0xffff00);}});
指定屬性獲取
// 通過name獲取const nameNode = scene.getObjectByName("4號樓");console.log(nameNode);//通過指定屬性獲取const nameNode1 = scene.getObjectByProperty("name", "3號樓");console.log(nameNode1);
根據id獲取會報錯 id是只讀屬性 最好還是不要使用id
獲取世界位 三維向量
大部分世界位不在屬性上
//獲取指定模型的世界坐標const worldPosition = new THREE.Vector3();nameNode.getWorldPosition(worldPosition);//獲取縮放const worldScale = new THREE.Vector3();nameNode.getWorldScale(worldScale); console.log(worldPosition);
移除指定節點
//移除要在要移除節點的父節點上移除group1.remove(nameNode);console.log(model.children);//移除多個group1.remove(nameNode, nameNode1);
顯示/隱藏
//隱藏模型/組group1.visible = false;//隱藏材質 隱藏材質后所有相關的模型都會隱藏nameNode.material.visible =false;