四、Threejs层级模型

 备注：“本文中部分核心知识点整理自老师的授课网站”

网站地址：http://www.webgl3d.cn/pages/aac9ab/

 一、Vector3与模型位置、缩放属性

1、Group层级模型(树结构)案例

2、组对象Group案例

import * as THREE from 'three'

const geometry = new THREE.BoxGeometry(50,50,50)
const material = new THREE.MeshBasicMaterial({
    color: 'green'
})
const mesh1 = new THREE.Mesh(geometry,material)
const mesh2 = new THREE.Mesh(geometry,material)
mesh2.translateX(100)

const group = new THREE.Group();
group.add(mesh1)
group.add(mesh2)

export default group

import cube from './group.js'

scene.add(cube);

3、查看子对象.children

Threejs场景对象Scene、组对象Group都有一个子对象属性.children,通过该属性可以访问父对象的子对象，子对象属性.children的值是数组，所有子对象是数组的值，你可以在浏览器控制台打印测试上面案例代码。

父对象执行.add()方法的本质就是把参数中的子对象添加到自身的子对象属性.children中。

console.log('group.children',group.children);

注意：group的子对象就是我们之前.add添加进去的。

 4、场景对象结构

console.log('scene.children',scene.children);

场景对象Scene的子对象，除了组对象Group之外，还可以看到环境光AmbientLight、平行光DirectionalLight、辅助坐标对象AxesHelper。

场景对象对象scene构成的层级模型本身是一个树结构，场景对象层级模型的第一层，也就是树结构的根节点，一般来说网格模型Mesh、点模型Points、线模型Line是树结构的最外层叶子结点。构建层级模型的中间层一般都是通过Threejs的Group类来完成，