【Three.js】知识梳理九：Three.js层级模型

本文主要是介绍【Three.js】知识梳理九：Three.js层级模型，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. Object3D和Group

1.1 Object3D

Object3D是Three.js中所有3D对象的基类。它为我们提供了一个通用的结构，包括位置、旋转、缩放等变换属性，以及子对象的组织和管理功能。无论是网格（Mesh）、光源（Light）还是其他类型的对象，它们都继承自Object3D。

1.11 创建Object3D实例

创建一个Object3D实例非常简单：

import * as THREE from 'three';
​
const obj = new THREE.Object3D();

1.2 Group

Group类继承自Object3D，并添加了对子对象的分组功能。通过使用Group，我们可以更轻松地管理场景中的对象，例如对一组对象进行批量操作，或对对象进行层级组织。

1.21 创建Group实例

创建一个Group实例同样非常简单：

import * as THREE from 'three';
​
const group = new THREE.Group();

1.22 .add()向Group添加对象

由于Group继承自Object3D，因此您可以像处理普通Object3D对象一样添加和移除子对象。以下是一个向Group中添加立方体和球体的示例：

import * as THREE from 'three';
​
const scene = new THREE.Scene();
const group = new THREE.Group();
​
// 创建并添加一个立方体到Group中
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
group.add(cube);
​
// 创建并添加一个球体到Group中
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({color: 0xff0000});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
group.add(sphere);
​
// 将Group添加到场景中
scene.add(group);

1.23 .remove()移除Group中对象

.remove()方法和.add()方法是相反的，是把子对象从父对象的.children()属性中删除。

// 删除父对象group的子对象网格模型mesh1
group.remove(mesh1);
// 通过浏览器控制台查看.children()属性的变化。
console.log('查看group的子对象',group.children);
​
// 一次移除多个子对象
group.remove(mesh1,mesh2);

1.24 对Group中的对象进行批量操作

由于Group是一个Object3D对象，因此对其应用的任何变换（位置、旋转、缩放等）都会应用到其子对象上。例如，我们可以一次性旋转Group中的所有对象：

group.rotation.x += 0.01;
group.rotation.y += 0.01;

2. 模型命名，查询和遍历

2.1 .name命名属性

在Three.js中，每个对象都有一个.name属性，可以用于为对象分配一个唯一的名称。这个名称可以用来在后续操作中轻松地查找和识别对象。

import * as THREE from 'three';
​
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
​
// 为立方体对象分配一个名称
cube.name = 'myCube';

2.2 .getObjectByName()查询方法

.getObjectByName()方法允许您根据对象的名称快速查找场景中的对象。这在场景中有许多对象时非常有用。以下是一个如何使用getObjectByName()查找对象的示例：

// 假设我们已经创建了一个名为 'myCube' 的立方体对象并将其添加到场景中
​
// 使用 getObjectByName 查找名为 'myCube' 的对象
const myCube = scene.getObjectByName('myCube');
​
if (myCube) {console.log('找到名为 myCube 的对象:', myCube);
} else {console.log('没有找到名为 myCube 的对象');
}

2.3 .traverse()遍历方法

.traverse()方法是一个递归函数，可以用于遍历给定对象及其子对象。这对于在场景中查找特定类型或名称的对象非常有用。以下是一个使用traverse()方法遍历场景中对象的示例：

scene.traverse((object) => {// 对所有类型为 Mesh 的对象执行操作if (object instanceof THREE.Mesh) {console.log('找到一个 Mesh 对象:', object);}
});

结合使用 .name 属性、.traverse() 方法和 .getObjectByName() 方法，您可以轻松地在 Three.js 场景中查找、遍历和管理对象。这些方法在处理复杂场景时非常有用，可以让您的代码更具可读性和可维护性。

3. 显示，隐藏对象

3.1 visible属性

模型对象的父类Object3D封装了一个属性.visible，通过该属性可以隐藏或显示一个模型。

mesh.visible =false;// 隐藏一个网格模型，visible的默认值是true
group.visible =false;// 隐藏一个包含多个模型的组对象group
​
mesh.visible =true;// 使网格模型mesh处于显示状态

附送250套精选项目源码

源码截图

 源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接

这篇关于【Three.js】知识梳理九：Three.js层级模型的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---