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处于显示状态
上一篇: 如何管理SVG元素的层级结构
推荐阅读
-
Three.js详解第九课:理解Three.js的层次结构模型
-
【2022新手指南】Java编程进阶之路 - 六、技术架构篇 ### MySQL索引底层解析与优化实战 - 你会讲解MySQL索引的数据结构吗?性能调优技巧知多少? - Redis深度揭秘:你知道多少?从基础到哨兵、主从复制全梳理 - Redis持久化及哨兵模式详解,还有集群搭建和Leader选举黑箱打开 - Zookeeper是个啥?特性和应用场景大公开 - ZooKeeper集群搭建攻略及 Leader选举、读写一致性、共享锁实现细节 - 探究ZooKeeper中的Leader选举机制及其在分布式环境中的作用 - Zab协议深入剖析:原理、功能与在Zookeeper中的核心地位 - RabbitMQ全方位解读:工作模式、消费限流、可靠投递与配置策略 - 设计者视角:RabbitMQ过期时间、死信队列与延时队列实践指南 - RocketMQ特性和应用场景揭示:理解其精髓与差异化优势 - Kafka详细介绍:特性及广泛应用于实时数据处理的场景解析 - ElasticSearch实力揭秘:特性概述与作为搜索引擎的广泛应用 - MongoDB认知升级:非关系型数据库的优势阐述,安装与使用实战教学 - BIO/NIO/AIO网络模型对比:掌握它们的区别与在网络编程中的实际应用 - Netty带你飞:理解其超快速度背后的秘密,包括线程模型分析 - 网络通信黑科技:Netty编解码原理与常用编解码器的应用,Protostuff实战演示 - 解密Netty粘包与拆包现象,怎样有效应对这一常见问题 - 自定义Netty心跳检测机制,轻松调整检测间隔时间的艺术 - Dubbo轻骑兵介绍:核心特性概览,服务降级实战与其实现益处 - Dubbo三大神器解读:本地存根与本地伪装的实战运用与优势呈现 ----------------------- 七、结语与回顾