层级模型-遍历模型树，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13

            
            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

            
            import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const width = window.innerWidth;
const height = window.innerHeight;

let mesh;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,  width / height, 0.1, 3000);
const renderer = new THREE.WebGLRenderer({
  antialias: true,
});

const model = new THREE.Group();
const group1 = new THREE.Group();
const group2 = new THREE.Group();

const axesHelper = new THREE.AxesHelper(150); // 坐标系
const pointLight = new THREE.DirectionalLight('#fff', 1); // 光源
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10); // 光源辅助观察

const controls = new OrbitControls(camera, renderer.domElement); // 相机控件轨道控制器

group1.name = '高层';
group1.position.y = 30;

group2.name = '洋房';
group2.position.y = 30;
group2.position.z = 30;

model.name = '小区';
model.add(group1, group2);
model.position.set(50, 0, 25);


const createMesh = (meshCount, groupObj, type) => {
  for(let i = 0; i < meshCount; i++) {
    const geometry = new THREE.BoxGeometry(20, 60, 10);
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ffff
    });
    mesh = new THREE.Mesh(geometry, material);

    mesh.position.x = i * 30;
    groupObj.add(mesh); // 添加组对象到group
    mesh.name = type === '高层' ? i + 1 + '号楼' : i + 6 + '栋';
    // console.log('mesh:', mesh.name)
  }
}

createMesh(6, group1, '高层');
createMesh(7, group2, '洋房');

pointLight.decay = 0.0; // 设置光源不随距离衰减,默认为2.0
pointLight.position.set(-500, 400, 500);

scene.add(model);
scene.add(axesHelper);
scene.add(pointLight);
scene.add(pointLightHelper);

camera.position.set(-300, 200, 200); // x,y,z
camera.lookAt(model.position); // 相机视角: 指向mesh设置的位置(中心点)

renderer.setSize(width, height);
renderer.setClearColor(0x444444, 1);
renderer.render(scene, camera); // 执行渲染操作

document.body.appendChild(renderer.domElement); // 通过.domElement获得.render渲染方法生成的canvas画布

// 递归遍历model包含所有的模型节点
model.traverse(function(obj) {
    // console.log('所有模型节点的名称',obj.name);
    // obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'
    if (obj.isMesh) {//判断条件也可以是obj.type === 'Mesh'
        obj.material.color.set(0xfeff39);
    }
});

controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
});

// 返回名.name为"4号楼"对应的对象
const nameNode = scene.getObjectByName("4号楼");
// console.log(nameNode.material)
nameNode.material.color.set(0xff0000);


// 声明一个三维向量用来表示某个坐标
const worldPosition = new THREE.Vector3();
mesh.getWorldPosition(worldPosition); // 获取mesh的世界坐标
console.log('世界坐标',worldPosition);
console.log('本地坐标',mesh.position);

//可视化mesh的局部坐标系
const meshAxesHelper = new THREE.AxesHelper(50);
mesh.add(meshAxesHelper);

// .remove移除方法，移除一个/多个
// model.remove(group1);
// model.remove(group1,group2);

            
                1
2
3
4
5

            
            {
  "dependencies": {
    "three": "0.173.0"
  }
}