前言

three.js场景 (Scene) 是一个用于渲染和展示3D图形的容器。它包含了所有的物体、光源和摄像机，并提供了一些方法和属性来控制场景的行为和外观。

Scene

你可以把三维场景Scene 对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

Scene里可以放哪些东西

Mesh（网格）：网格是由几何体（Geometry）和材质（Material）组成的对象，用于表示3D物体的外观。
Group（组）：组是一种可以包含其他对象的容器，可以用来组织和管理多个物体。
Light（光源）：光源对象用于模拟场景中的光照效果，包括环境光、平行光、点光源等。
Camera（摄像机）：摄像机对象用于定义观察场景的视角和位置，可以是透视摄像机（PerspectiveCamera）或正交摄像机（OrthographicCamera）。
Particle System（粒子系统）：粒子系统用于创建和管理大量的粒子，如火花、烟雾、雨滴等效果。
Line（线条）：线条对象用于绘制3D空间中的线段。
Points（点云）：点云对象用于绘制大量的离散点，可以用于表示粒子效果或其他需要大量点的场景。
Sprite（精灵）：精灵是一个2D图像，可以根据摄像机的位置自动调整大小，用于创建2D效果。
其他自定义对象：你还可以根据自己的需求创建和添加其他类型的对象到场景中，以实现特定的效果或功能。通过将这些对象添加到场景中，你可以创建出复杂的3D场景，并通过摄像机和渲染器将其呈现在屏幕上。

我们先介绍比较常见Mesh,group,其它的后面再介绍。

Mesh(网格)

Mesh（网格）是用于表示3D物体外观的对象。它由几何体（Geometry）和材质（Material）组成。

Geometry（几何体）

几何体（Geometry）用于定义物体的形状。它包含了一系列的顶点（Vertices）和面（Faces），以及其他相关的属性，如法线（Normals）、UV坐标（UV coordinates）等。在threejs分装了一些常见的几何体类型，如下图所示。

// let geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象 
let geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry

Material（材质）

在three.js中，材质（Material）用于定义物体的外观特性，如颜色、纹理、光照等。three.js提供了多种内置的材质类，可以根据需要选择合适的材质。

以下是一些常见的材质类：

MeshBasicMaterial（基础网格材质）：最简单的材质，只有颜色属性，不受光照影响。
MeshLambertMaterial（兰伯特网格材质）：具有漫反射光照效果的材质，可以接收光照并产生阴影。
MeshPhongMaterial（冯氏网格材质）：具有高光反射效果的材质，可以产生镜面反射和阴影。
MeshStandardMaterial（标准网格材质）：基于物理的材质，具有更真实的光照和阴影效果。
MeshPhysicalMaterial（物理网格材质）：更高级的基于物理的材质，可以模拟更多的光照和材质属性。
除了上述材质类，还有其他一些类似的材质，如MeshToonMaterial（卡通网格材质）、LineBasicMaterial（基础线材质）ShaderMaterial（着色器材质）等。

每种材质类都有不同的属性和参数，你可以根据需要进行调整和配置。在创建材质后，你可以将其传递给Mesh对象的构造函数，以创建一个具有指定外观的网格对象。

let material = new THREE.MeshLambertMaterial({ color: 0x0000ff });

然后合并几何体和材质

let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh 
scene.add(mesh); //网格模型添加到场景中

Group(组)

three.js中，Object3D（对象）是所有可见物体的基类。它充当了一个容器，可以包含其他的几何体、光源、相机等对象，并且可以对它们进行组合、变换和操作。Group的基类也是在Object3D。 Group用于将多个物体组合在一起，并对它们进行集体操作。Group类继承了Object3D的属性和方法，同时还提供了一些特定于组的功能。使用Group可以方便地将多个物体组织在一起，形成一个逻辑上的整体。例如，你可以将多个网格对象添加到一个组中，然后对整个组进行平移、旋转或缩放操作，而不需要逐个操作每个网格对象。 Group类提供了以下常用方法和属性：

add(object)：将一个对象添加到组中。

remove(object)：从组中移除一个对象。

children：组中包含的子对象的数组。

通过使用Group，你可以更方便地管理场景中的多个物体，提高代码的可读性和可维护性。在需要对一组物体进行统一操作时，使用Group可以减少重复的代码，并使代码更加简洁和优雅。通过使用group对物体进行分类管理，便于后期复杂场景下的业务逻辑维护（点击事件，图层控制等）

const group = new THREE.Group();
group.add(mesh1)  
group.add(mesh2)  
scene.add(group); //使用group就不需要scene.add(mesh1);

总结

scene作为三维世界的容器，再往里放东西的时候根据业务需求通过group类将三维物体以树形式add到scene，方便后期批量处理。

// 创建3D场景对象Scene 
const scene = new THREE.Scene();
let material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh 
const group = new THREE.Group(); 
group.add(mesh) 
scene.add(group); //使用group就不需要scene.add(mesh1);

threejs - 3D场景

前言