层级模型

创建层级模型

import * as THREE from "three";

const geometry = new THREE.BoxGeometry(50, 50, 50);
const meterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, });
const mesh1 = new THREE.Mesh(geometry, meterial);
const mesh2 = mesh1.clone();

// 将mesh2的x坐标轴平移150
mesh2.translateX(150);

// 创建组
const group = new THREE.Group();
// 将mesh1、mesh2添加进组
group.add(mesh1, mesh2)

// 修改组的属性，组内所有子对象都会修改
group.rotation.x = 0.5;

// 查看组对象
console.log('组对象group子对象: ', group.children);

export default group;

遍历模型树结构、查询模型节点

.traverse()查找其所有子节点、.getObjectByName()查找指定名称的子节点

import * as THREE from "three";

const split = 20;

// 第一排
const group = new THREE.Group();
group.name = '第一排'

// 第二排
const group2 = new THREE.Group();
group2.name = '第二排'


// 第一排
for (let i = 0; i < 6; i++) {
    // 创建立方体
    const roomGeometry = new THREE.BoxGeometry(10, 50, 5);
    const roomMeterial = new THREE.MeshBasicMaterial({
        color: 0xffff00,
    });

    const room = new THREE.Mesh(roomGeometry, roomMeterial);
    room.name = '楼栋' + Number(i + 1);
    room.position.set(i * 20, 25, 0);
    group.add(room)
}

// 第二排
for (let i = 0; i < 6; i++) {
    // 创建立方体
    const roomGeometry = new THREE.BoxGeometry(10, 25, 5);
    const roomMeterial = new THREE.MeshBasicMaterial({
        color: 0xffff00,
    });

    const room = new THREE.Mesh(roomGeometry, roomMeterial);
    room.name = '楼栋' + Number(i + 1);
    room.position.set(i * 20, 12.5, 25);
    group2.add(room)
}

// 汇总
const group3 = new THREE.Group();
group3.add(group, group2);
group3.name = '小区';

// 递归遍历所有的模型节点
group3.traverse((object) => {
    // console.log('object name：', object.name);
    if (object.isMesh) {  // 判断是否为Mesh模型
        console.log('object.name', object.name);
        // 修改楼栋颜色
        object.material.color.set(0x00ff00);
    }
});

// 查找某个具体的模型，依据getObjectName()方法
const four = group3.getObjectByName('楼栋4');
console.log('four：', four);
if (four) {
    // 修改其颜色
    four.material.color.set(0xff0000);
}

export default group3;

本地(局部)坐标与世界坐标

本地坐标：模型对象的.position属性. 世界坐标：模型对象.position和所有父对象的.position属性的叠加.

/* 本地坐标、世界坐标 */
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(50, 0, 0)

const meshGroup = new THREE.Group();
meshGroup.position.set(50, 0, 0)  // 此时mesh.position.x = 100
meshGroup.add(mesh);

// 获取mesh的世界坐标
const worldPosition = new THREE.Vector3();
mesh.getWorldPosition(worldPosition) // 存储世界坐标得先创建一个Vector3对象
console.log('mesh的世界坐标为：', worldPosition);  // Vector3 {x: 100, y: 0, z: 0}
console.log('mesh的本地坐标为：', mesh.position);  // Vector3 {x: 50, y: 0, z: 0}

// 给模型添加一个局部坐标系
const meshAxesHelper = new THREE.AxesHelper(40);
mesh.add(meshAxesHelper);



// 改变模型自身相对局部坐标原点位置
// 创建一个box
const boxGeometry = new THREE.BoxGeometry(50, 50, 50);  // box的几何中心默认与原点重合
const boxMaterial = new THREE.MeshBasicMaterial({
  color: 0xff0000,
});

// 平移几何体的顶点数据，修改其自身相对于局部坐标原点的位置
boxGeometry.translate(25, 25, 25);
const box = new THREE.Mesh(boxGeometry, boxMaterial);
meshGroup.add(box);

// .remove()：移除模型
// meshGroup.remove(box);

// .visible属性：模型的隐藏与显示
box.visible = false;  // false true

// 对材质设置visible会影响到所有使用该材质的对象
boxMaterial.visible = false;