【threejs】三要素之场景

场景

场景（Scene）是一个容器或者说是一个“舞台”，用于存放所有的 3D 对象（如网格、模型）、光源、相机等，场景是一个树形结构，所有对象都可以通过父子关系组织起来，进行管理和操作，它继承自 Object3D。

文档：https://threejs.rocyuan.top/docs/?q=scene#api/zh/scenes/Scene

创建场景

场景的创建非常简单，只需要使用 THREE.Scene 即可，其详细属性和方法见 文档。

1
2
3
4
import * as THREE from "three";

// 创建场景
const scene = new THREE.Scene();

常见操作

它集成自 Object3D 类，所以 Scene 也有 Object3D 的一些方法和属性。

添加对象

1
scene.add(Object3D);

删除对象

1
scene.remove(Object3D);

清空场景

1
2
3
while (scene.children.length > 0) {
  scene.remove(scene.children[0]); // 移除所有子对象
}

设置背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 纯颜色
scene.background = new THREE.Color(0x000000);
// 背景贴图纹理
scene.background = new THREE.TextureLoader().load("images/texture.jpg");
// 立方贴图纹理（天空盒）
// 图片宽高应一致，否则图片显示不齐
// 图片宽高比应为 1:1 ，否则不显示
scene.background = new THREE.CubeTextureLoader().setPath("/images/").load([
  "px.jpg", // Positive X  正X
  "nx.jpg", // Negative X  负X
  "py.jpg", // Positive Y  正Y
  "ny.jpg", // Negative Y  负Y
  "pz.jpg", // Positive Z  正Z
  "nz.jpg", // Negative Z  负Z
]);

添加雾效果

线性雾：雾的密度是随着设置的 近距离 到 远距离 线性增大的，相机到近距离是看不到雾的。

指数雾：在相机附近提供清晰的视野，随着距离相机越远，雾的浓度随着设置的指数增长。

1
2
3
4
// 线性雾（颜色，近，远）
scene.fog = new THREE.Fog(0x000000, 0, 1000);
// 指数雾（颜色，密度增长指数）
scene.fog = new THREE.FogExp2(0x000000, 0.00025);

遍历场景中的对象

1
2
3
4
5
6
7
8
9
scene.traverse(function (object) {
  console.log(object);
  // 对每个对象执行操作 如让每个模型对象旋转
  if (object.type === "Mesh") {
    object.rotation.x += 0.01;
    object.rotation.y += 0.01;
    object.rotation.z += 0.01;
  }
});