THREE.Scene 是 Three.js 库中的一个关键类，用于表示一个场景（或者说是一个 3D 空间）。它是 Three.js 中构建和管理三维场景的基础组件之一。
在 Three.js 中，一个场景（Scene）可以包含多个物体（Object3D），比如模型、灯光、相机等。通过将这些物体添加到场景中，可以创建一个丰富的三维环境。
Scene 类提供了管理场景中物体的方法，包括添加物体、移除物体、获取物体等。它还提供了一些属性和方法，用于控制场景的背景色、雾效、光照等。
使用 THREE.Scene 类的基本流程如下：
- 创建一个新的 Scene 实例：
const scene = new THREE.Scene(); - 将需要展示的物体添加到场景中：
scene.add(object); - 创建相机并设置好相机的位置和视角。
- 创建渲染器（Renderer）并将场景和相机传递给渲染器进行渲染。
通过 Scene 类，你可以构建一个具有层次结构的三维场景，管理其中的物体，并应用各种效果和交互。
创建场景
在 Three.js 中，创建场景 THREE.Scene 非常简单。你只需调用 THREE.Scene 的构造函数来创建一个新的场景实例。以下是创建一个基本场景的示例代码：
// 引入 Three.js 库
import * as THREE from 'three';
// 创建场景
const scene = new THREE.Scene();
// 在这里你可以向场景添加物体、光源、相机等元素
在这个示例中，我们使用 import 语句导入 Three.js 库，并创建一个新的场景实例 scene，它将用于存放和管理我们的场景元素。
创建场景后，你可以继续向场景中添加物体、光源、相机等元素，以构建你的三维场景。例如，你可以创建一个立方体并将它添加到场景中：
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);
在这个示例中，我们使用 THREE.BoxGeometry 创建一个立方体的几何体，并使用 THREE.MeshPhongMaterial 创建一个红色的材质。然后，我们使用这些几何体和材质创建一个 THREE.Mesh 对象 cube。最后，我们将这个立方体对象添加到场景中，这样它就会在场景中显示出来。
创建场景后，你可以根据你的项目需求，添加更多的物体、光源和相机，实现你想要的三维场景效果。完成场景的构建后，你可以使用 Three.js 的渲染器将场景呈现到屏幕上，让用户看到你创建的三维世界。
销毁场景
在 Three.js 中，当你想要销毁一个场景（scene）或者释放内存时，可以通过以下方法来实现：
删除场景中的物体：
while (scene.children.length > 0) {
const object = scene.children[0];
scene.remove(object);
disposeObject(object);
}
定义一个 disposeObject 函数
定义一个 disposeObject 函数来处理物体的几何体（geometry）、材质（material）以及纹理（texture）：
function disposeObject(obj) {
if (obj.geometry) {
obj.geometry.dispose();
}
if (obj.material) {
if (Array.isArray(obj.material)) {
obj.material.forEach((material) => {
disposeMaterial(material);
});
} else {
disposeMaterial(obj.material);
}
}
if (obj.texture) {
obj.texture.dispose();
}
}
定义一个 disposeMaterial 函数
定义一个 disposeMaterial 函数来处理材质的纹理（texture）：
function disposeMaterial(material) {
if (material.map) {
material.map.dispose();
}
if (material.lightMap) {
material.lightMap.dispose();
}
if (material.bumpMap) {
material.bumpMap.dispose();
}
if (material.normalMap) {
material.normalMap.dispose();
}
if (material.specularMap) {
material.specularMap.dispose();
}
if (material.envMap) {
material.envMap.dispose();
}
if (material.alphaMap) {
material.alphaMap.dispose();
}
if (material.aoMap) {
material.aoMap.dispose();
}
if (material.displacementMap) {
material.displacementMap.dispose();
}
if (material.emissiveMap) {
material.emissiveMap.dispose();
}
if (material.gradientMap) {
material.gradientMap.dispose();
}
if (material.metalnessMap) {
material.metalnessMap.dispose();
}
if (material.roughnessMap) {
material.roughnessMap.dispose();
}
if (material.clearcoatMap) {
material.clearcoatMap.dispose();
}
if (material.clearcoatRoughnessMap) {
material.clearcoatRoughnessMap.dispose();
}
if (material.clearcoatNormalMap) {
material.clearcoatNormalMap.dispose();
}
material.dispose(); // 释放材质
}
释放 WebGLRenderer 占用的资源
如果你使用了 WebGLRenderer，还需要执行以下操作：
renderer.dispose(); // 释放 WebGLRenderer 占用的资源
通过以上步骤，你可以在 Three.js 中销毁场景和物体，从而释放内存。
