threejs--01整体api整理

文章目录

threejs学习
- 01 threejs的基本组成
- - 1. threejs的坐标系
  - 2. threejs的场景
  - 3. threejs相机的类型
  - 4. threejs光
  - - 4.1 threejs的光
    - 4.2 threejs的阴影
  - 5. threejs的物体
  - - 5.1 threejs的曲线
    - 5.2 threejs的几何体
    - 5.3 threejs的材质
    - 5.3 threejs的纹理
  - 6. threejs的动画
  - - 6.1 threejs的动画效果
    - 6.2 threejs的动画关键帧轨道
- 02 threejs的加载、渲染、数学计算和辅助方法等
- - 1. threejs的核心
  - 2. threejs的附加组件
  - 3. threejs的加载器
  - 4. threejs的渲染器
  - - 4.1 threejs的渲染器
    - 4.2 threejs的着色器
  - 5. threejs的辅助方法
  - 6. threejs的数学计算
  - - - 插值
  - 7. threejs的常量

threejs学习

01 threejs的基本组成

想象自己是造物主，首先创造一个场地，然后加物体，最后再添加光。这些物体是由不同的物质组成的，同时又遵守一些运动规律。最后你有一个相机或者摄影机就可以选择拍摄了。很容易记住threejs的基本组成**：场景+物体(材质+形状+运动)+光+相机。

除此之外与现实世界不同的是threejs还有加载、渲染、数学计算和辅助方法等用于内容。

1. threejs的坐标系

threejs的坐标系是右手坐标系。

右手坐标系：大拇指x正方向，食指y正方向，中指z正方向。
x轴：从左到右，y轴**：从下到上，z轴**：从后到前。

2. threejs的场景

设置场景背景和环境效果。

Scene：用于组织3D场景中的所有元素，包括物体、光源、相机等。它是渲染场景的容器。
Fog：用于设置场景的雾化效果。它通过模拟大气中的颗粒物来创建一种深度感，使得远处的物体看起来更模糊。
FogExp2：FogExp2 类是 Fog 类的扩展，它使用指数衰减来模拟雾化效果，使得远处的雾更加均匀和自然。

3. threejs相机的类型

正交相机、透视相机、多透视相机。

Camera：Camera是所有相机类型的基类，它提供了相机的基本功能，但通常不会直接使用。相反，您会使用它的子类，如PerspectiveCamera或OrthographicCamera。
OrthographicCamera：正交相机。适用于2D游戏和UI渲染。
PerspectiveCamera：透视相机。真实感3D场景的标准选择。
ArrayCamera：虚拟现实（VR）应用中的双眼视图，游戏动画等多视图。由多个子相机组成，每个子相机可以渲染场景的不同部分。
CubeCamera：生成立方体贴图，用于环境映射或反射映射，天空盒（Skybox）。由六个子相机组成，每个子相机面向一个方向（上、下、前、后、左、右），用于捕捉场景的六个不同方向的视图。
StereoCamera：3D电影或VR应用中的双眼视图。由两个子相机组成，每个子相机代表一个眼睛的视角，渲染合成。

4. threejs光

代码里光和影是分开添加的，在可以产生阴影的光下添加阴影。

4.1 threejs的光

AmbientLight（环境光）：均匀照亮，不考虑位置，无阴影。
HemisphereLight（半球光）：模拟天空盒。天空和地面反射的光，无阴影。
DirectionalLight（定向光）：太阳光或远处的灯光。光线平行，可以产生阴影。
PointLight（点光源）：灯泡或蜡烛等。所有方向，考虑位置，可以产生阴影。
SpotLight（聚光灯）：手电筒、舞台灯光或汽车前灯等。圆锥形的光束，考虑位置方向，可以产生阴影。
AreaLight（区域光）：灯罩、窗户或其他平面光源。平面光源，柔和的阴影和光照效果。插件。
LensFlare（镜头光晕）：光晕效果。不是光源，是一种视觉效果。

4.2 threejs的阴影

LightShadow：所有阴影投射器的基类。它定义了阴影投射器的基本接口和功能。
PointLightShadow：点光源阴影(PointLight)。
DirectionalLightShadow：定向光源阴影(DirectionalLight)。
SpotLightShadow：聚光灯阴影(SpotLight)。它使用聚光灯的位置、方向和角度来确定阴影区域，并将其应用于场景中的物体

5. threejs的物体

物体基本的内容**：点、线、网格、精灵、动画。

点：点Points；
线：线Line、环线LineLoop、线段LineSegments直线+闭合曲线+任意曲线；
面：精灵Sprite图标粒子等；
体：网格Mesh(平面+立体)、蒙皮网格SkinnedMesh；
动画：骨骼Bone、组Group、骨架Skeleton骨骼组；
多细节层次LOD：根据观察者的距离来显示不同细节级别的模型。

5.1 threejs的曲线

在Three.js中，这些类都是用于创建和操作曲线（Curve）的。如圆弧、贝塞尔曲线、椭圆等。

ArcCurve：创建一个圆弧路径。指定圆弧的中心点、半径、起始角度和结束角度。
CatmullRomCurve3：创建一个基于Catmull-Rom样条曲线的路径。需要指定一系列控制点来定义曲线的形状。
CubicBezierCurve：创建一个三次贝塞尔曲线路径。需要指定四个控制点来定义曲线的形状。
CubicBezierCurve3：创建一个三维空间中的三次贝塞尔曲线路径。需要指定四个控制点来定义曲线的形状。
EllipseCurve：创建一个椭圆路径。需要指定椭圆的中心点、半径和起始角度。
LineCurve：创建一个直线路径。需要指定两个点来定义直线的起点和终点。
LineCurve3：创建一个三维空间中的直线路径。需要指定两个点来定义直线的起点和终点。
QuadraticBezierCurve：创建一个二次贝塞尔曲线路径。需要指定三个控制点来定义曲线的形状。
QuadraticBezierCurve3：创建一个三维空间中的二次贝塞尔曲线路径。
SplineCurve：创建一个基于样条曲线的路径。需要指定一系列控制点来定义曲线的形状。

5.2 threejs的几何体

面
PlaneGeometry平面、CircleGeometry圆形、ShapeGeometry塑性(自定义面)、TorusGeometry圆环
简单几何体
CubeGeometry立方体、CylinderGeometry圆柱、TorusKnotGeometry圆环扭结、PolyhedronGeometry多面体、IcosahedronGeometry二十面体、OctahedronGeometry八面体、TetrahedronGeometry四面体
稍微复杂的几何体

ConvexGeometry凸面体：通过提供一个顶点数组，Three.js会计算出一个包围这些顶点的凸包。
LatheGeometry扫描体：(螺丝)
ExtrudeGeometry拉伸几何体：拉伸一个形状通常是一个THREE.Shape对象来形成的3D形状。
TubeGeometry管状体：沿着一条曲线通常是THREE.Curve对象的路径的管状形状。
ParametricGeometry参数几何体：用于创建通过参数方程定义的形状。
TextGeometry文本几何体

5.3 threejs的材质

threejs的材质分为：基础材质、标准材质、物理材质、法向材质。一个物体的基本颜色+纹理+折射反射等+阴影。

PointsMaterial：用于渲染点，可以设置点的颜色、大小和纹理。

LineBasicMaterial基础线条材质、LineDashedMaterial虚线材质

SpriteMaterial：用于精灵（2D图像），可以设置颜色、纹理和透明度等。

基础材质：不考虑光照的影响

MeshBasicMaterial基础网格材质：可以设置颜色或纹理，用于简单的渲染。
Material材质的抽象基类：所有其他材质类型都继承自这个类。它提供了一些通用的属性，如颜色、透明度等。

标准材质：考虑光照的影响

MeshLambertMaterial：用于非光泽表面，不考虑镜面反射。
MeshPhongMaterial：用于光滑表面，考虑光照的影响，包括镜面反射。

距离

MeshDepthMaterial：深度网格材质，根据物体到摄像机的距离来渲染颜色，常用于创建深度贴图。
MeshDistanceMaterial：网格距离材质，用于阴影映射，可以根据物体到光源的距离来渲染颜色

阴影

ShadowMaterial：阴影材质，用于创建接收阴影的材质，使物体表面能够接收并显示阴影。

着色器

RawShaderMaterial：原始着色器材质，允许使用GLSL着色器来定义材质，但不会自动添加任何Three.js内置的 uniforms 或 attributes。
ShaderMaterial：着色器材质，允许使用GLSL着色器来定义材质的外观和行为，Three.js会自动添加一些内置的 uniforms 和 attributes。

物理

MeshPhysicalMaterial：物理网格材质，是MeshStandardMaterial的扩展，提供了更多的物理渲染属性，如清晰度、透射率等。
MeshStandardMaterial：标准网格材质，基于物理的渲染（PBR）材质，提供更真实的光照和反射效果。

法向

MeshNormalMaterial：一种特殊的材质，它将法向量映射到RGB颜色上，通常用于调试或创建特殊效果。

风格

MeshToonMaterial：实现卡通着色的材质，通过渐变纹理来模拟光照效果。

其他

MeshMatcapMaterial：使用材质捕捉（matcap）纹理来定义物体的颜色和光照效果

5.3 threejs的纹理

基础：图片、视频、canvas

Source：所有纹理类型的基类，它定义了纹理的基本属性和方法。
Texture：最常用的纹理类型，它使用图像文件作为纹理数据。你可以使用各种图像格式（如PNG、JPG等）作为纹理。
VideoTexture：使用HTML5的Video元素作为纹理。它允许你使用视频文件作为纹理，从而创建动态的纹理效果。
CanvasTexture：使用HTML5的Canvas元素作为纹理。它允许你直接在HTML5画布上绘制纹理内容。

压缩

CompressedTexture：一种压缩纹理，它使用了各种压缩格式来减少纹理文件的大小，从而提高加载速度和性能。
CompressedArrayTexture：CompressedArrayTexture是一种压缩的纹理数组，它使用压缩格式来存储多个纹理，每个纹理可以被映射到Mesh的不同部分。

立方体

CubeTexture：CubeTexture是一个立方体贴图，包含了六个不同方向（上、下、前、后、左、右）的纹理图像。它通常用于模拟反射和折射效果。

数据

DataArrayTexture：使用数组作为纹理数据，而不是图像文件。
DataTexture：使用二维数组作为纹理数据，而不是图像文件。
Data3DTexture：使用三维数组作为纹理数据，而不是图像文件。

计算

DepthTexture：DepthTexture是一个深度纹理，它存储了场景的深度信息。它通常用于模拟反射和折射效果。
FramebufferTexture：FramebufferTexture从帧缓冲区中获取纹理数据。它通常用于实现特殊效果，如环境映射或后处理效果。

6. threejs的动画

6.1 threejs的动画效果

对象（对象分组）+ 帧 + 动画属性（动画属性混合效果）+ 动画片段 + 处理函数。在帧上放对象，对象绑定动画属性，构成动画片段，通过不同的方式混合，用播放器控制。

动画播放器

AnimationAction：动画播放器，它允许你控制动画的播放、停止、循环等。你可以通过AnimationAction对象来指定动画的播放速率、是否循环播放等。

动画片段

AnimationClip：定义一个动画片段，它包含了关键帧和插值数据。你可以创建多个AnimationClip对象来定义不同的动画。
AnimationMixer：管理多个动画片段的播放和混合。你可以将多个AnimationClip对象添加到AnimationMixer中，并控制它们的播放。

动画对象分组

AnimationObjectGroup：将多个动画对象分组，以便在AnimationMixer中统一控制。你可以将多个AnimationClip对象添加到一个AnimationObjectGroup中，然后将AnimationObjectGroup添加到AnimationMixer中。

动画处理函数

AnimationUtils：包含了一些用于动画处理的实用函数，如创建关键帧、序列化和反序列化动画数据等。

关键帧

KeyframeTrack：定义关键帧轨迹，它包含了关键帧的时间戳和属性值。你可以创建多个KeyframeTrack对象来定义动画的关键帧。

动画属性值绑定 + 混合多个动画轨迹动画属性

PropertyBinding：将动画的属性值绑定到场景中的对象上。你可以创建多个PropertyBinding对象来绑定动画的属性值。
PropertyMixer：混合多个动画轨迹的属性值。你可以创建多个PropertyMixer对象来混合动画的属性值。

6.2 threejs的动画关键帧轨道

关键帧轨道类型通过定义不同类型的属性关键帧，创建复杂的动画效果，添加到AnimationClip中，可以创建包含多种属性和变换的动画。

BooleanKeyframeTrack：定义布尔属性的关键帧。例如，对象显隐。
ColorKeyframeTrack：定义颜色属性的关键帧。例如，材质的颜色。
NumberKeyframeTrack：定义数值属性的关键帧。例如，物体的缩放值或位置。
QuaternionKeyframeTrack：定义四元数（Quaternion）属性的关键帧。例如，物体的旋转。
StringKeyframeTrack：定义字符串属性的关键帧。例如，物体材质名称。
VectorKeyframeTrack：定义向量（Vector）属性的关键帧。例如，物体的位置或方向。

02 threejs的加载、渲染、数学计算和辅助方法等

1. threejs的核心

在Three.js中，这些类主要用于处理3D场景中的数据和交互。

BufferAttribute：定义缓冲区中的属性数据，如顶点位置、法线、颜色等。
BufferGeometry：定义3D几何体，包括顶点、法线、UV坐标等，并可以使用BufferAttribute来存储属性数据。
Clock：创建一个时间计时器，通常用于动画和物理模拟。
EventDispatcher：创建一个事件发射器，通常用于监听和触发事件。
GLBufferAttribute：定义一个OpenGL缓冲区中的属性数据，通常与WebGL相关。
InstancedBufferAttribute：定义一个InstancedBufferGeometry中的属性数据，用于渲染多个相同几何体的实例。
InstancedBufferGeometry：定义一个InstancedBufferAttribute中的属性数据，用于渲染多个相同几何体的实例。
InstancedInterleavedBuffer：定义一个InstancedBufferAttribute中的属性数据，用于渲染多个相同几何体的实例。
InterleavedBuffer：定义一个混合属性的InterleavedBufferAttribute，用于渲染多个相同几何体的实例。
InterleavedBufferAttribute：定义一个InterleavedBuffer中的属性数据，通常与WebGL相关。
Layers：创建一个图层管理器，通常用于管理不同图层中的物体。
Object3D：创建一个3D对象，它是所有Three.js对象的基类，用于管理3D对象和属性。
Raycaster：创建一个射线投射器，通常用于检测3D场景中的物体。
Uniform：定义一个着色器中的统一变量，通常用于存储全局数据。

2. threejs的附加组件

DataUtils：提供了一些数据处理的方法，如解析JSON、序列化对象等。
Earcut：提供了一个方法，用于解析多边形并生成其三角剖分，常用于生成碰撞检测的三角形网格。
ImageUtils：提供了一些与图像相关的实用方法，如加载图像、处理图像数据等。
PMREMGenerator：提供了一个方法，用于生成基于物理的漫反射环境映射（PMREM）。
ShapeUtils：提供了一些与形状相关的实用方法，如生成形状的路径等。

附加组件/核心

Curve：定义了一个曲线对象，可以包含多种类型的曲线，如贝塞尔曲线、样条曲线等。
CurvePath：定义了一个曲线路径对象，可以包含多个曲线对象，用于创建复杂的路径。
Interpolations：提供了一些插值方法，如线性插值、多项式插值等。
Path：定义了一个路径对象，可以包含多个曲线对象，用于创建复杂的路径。
Shape：定义了一个形状对象，可以包含多种类型的形状，如矩形、圆形等。
ShapePath：定义了一个形状路径对象，可以包含多个形状对象，用于创建复杂的路径。

3. threejs的加载器

加载器用法都差不多

const loader = new THREE.ObjectLoader();
loader.load('path/to/object.json', function(object) {// 处理加载到的对象数据
});

加载器工具

Loader：所有加载器的基类。它定义了加载器的接口和基本功能。
Cache：简单的缓存系统。存储加载过的资源，以便在需要时快速重用。
LoaderUtils：工具方法。处理加载器的数据和资源，如解析JSON、解析OBJ等。

加载器

FileLoader：文件加载器。加载各种类型的文件，如JSON、OBJ、MTL等。它扩展了Loader类，提供了更灵活的文件加载功能。
TextureLoader：加载纹理图像。如PNG、JPG等。它是FileLoader的一个子类，专门用于加载纹理。
CompressedTextureLoader：加载压缩纹理。如KTX、DDS等。它扩展了TextureLoader，提供了额外的压缩纹理支持。
CubeTextureLoader：加载立方体贴图。通常是从六个图片文件中加载。它扩展了TextureLoader，提供了立方体贴图的支持。
DataTextureLoader：加载数据纹理。通常是从二进制文件中加载。它扩展了TextureLoader，提供了数据纹理的支持。
MaterialLoader：加载材质数据。如JSON、MTL等。
ImageBitmapLoader：加载ImageBitmap。它是HTML5 Canvas API的一部分，可以提高图片的加载性能。
ImageLoader：加载图片文件。如PNG、JPG等。它是FileLoader的一个子类，专门用于加载图片。
BufferGeometryLoader：加载几何体数据，如顶点、法线、UV坐标等。如JSON、OBJ等。
ObjectLoader：加载包含几何体、材质、动画等信息的对象数据。如JSON、OBJ等。
AnimationLoader：加载动画数据。如GLTF、JSON等。
AudioLoader：加载音频文件。如MP3、WAV等。

4. threejs的渲染器

4.1 threejs的渲染器

主要用于与WebGL（Web Graphics Library）进行交互，包括渲染目标、渲染器和其他与渲染相关的对象。

渲染目标

WebGL3DRenderTarget：创建一个3D渲染目标。它可以用来存储渲染的结果，以便在后续的渲染过程中使用。
WebGLArrayRenderTarget：创建一个渲染目标数组。它可以用来存储多个渲染目标，每个渲染目标可以存储不同的渲染结果。
WebGLMultipleRenderTargets：创建多个渲染目标。它可以用来存储多个渲染目标，每个渲染目标可以存储不同的渲染结果。

渲染器

WebGLRenderer：渲染器类，用于与WebGL进行交互。渲染3D场景的核心类，提供了各种渲染功能和设置。
WebGL1Renderer：WebGLRenderer的子类，专门用于渲染使用WebGL1 API的场景。它提供了对WebGL1特性的支持。

其他与渲染相关的对象

WebGLRenderTarget：创建一个渲染目标，存储渲染的结果，以便在后续的渲染过程中使用。
WebGLCubeRenderTarget：创建一个立方体贴图渲染目标，用来存储立方体贴图的渲染结果。

4.2 threejs的着色器

着色器是用于控制3D对象外观和行为的关键组件，它们在渲染过程中运行在GPU上。threejs是对WebGL的封装，不管是OpenGL还是WebGL着色器都是重要的部分，都是基于GLSL。所以要先明白一些着色器的基本类型和概念。

着色器的基本类型：顶点着色器（Vertex Shader）、片元着色器（Fragment Shader）、几何着色器（Geometry Shader）。运行顺序：顶点着色器 => 几何着色器 => 片元着色器

顶点着色器：用于处理顶点数据，如位置、颜色、法线等。
几何着色器：顶点数组扩展为多个三角形（建模的基础，不能有四边形，都由三角形组成）
片元着色器：用于处理像素数据，如颜色、透明度等。

threejs的封装：ShaderChunk、ShaderLib、UniformsLib、UniformsUtils

ShaderChunk：包含着色器片段的工具类。这些片段可以被重用和组合，以创建复杂的着色器效果。ShaderChunk通常包含一系列着色器代码块，这些代码块可以被加载并用于不同的着色器中。
ShaderLib：包含着色器库的工具类。它提供了一系列预定义的着色器片段，这些片段可以被加载并用于不同的着色器中。ShaderLib中的着色器片段通常被设计为可重用的，以便在不同的着色器中使用。
UniformsLib：包含统一变量（Uniforms）的库。统一变量是着色器中的全局变量，它们可以在着色器代码中使用，并可以通过JavaScript进行动态设置。UniformsLib提供了一系列预定义的统一变量，这些变量可以被加载并用于不同的着色器中。
UniformsUtils：用于处理统一变量的工具类。它提供了一系列方法，用于创建、合并、复制和修改统一变量。UniformsUtils可以帮助开发者更方便地管理和使用统一变量，以创建复杂的着色器效果。

ShaderChunk、ShaderLib常用的着色器片段：

common：包含一些常用的数学函数和常量，如三角函数、矩阵操作等。
morphtarget：包含用于处理变形目标的着色器代码，如变形目标的混合计算。
skinning：包含用于处理皮肤动画的着色器代码，如皮肤权重和矩阵的计算。
shadowmap：包含用于生成阴影映射的着色器代码，如阴影映射的采样和计算。
fog：包含用于处理雾效果的着色器代码，如雾的混合和计算。
lights：包含用于处理光照的着色器代码，如光照的计算和混合。
points：包含用于处理点光源的着色器代码，如点光源的计算和混合。
meshbasic：包含用于基础网格材质的着色器代码，如颜色混合和计算。
meshlambert：包含用于Lambert材质的着色器代码，如Lambert光照的计算和混合。
meshphong：包含用于Phong材质的着色器代码，如Phong光照的计算和混合。

示例：

import * as THREE from 'three';
import { ShaderChunk, ShaderLib } from 'three';const vertexShader = `// 顶点着色器代码${ShaderChunk.common}${ShaderChunk.morphtarget}void main() {// 顶点着色器逻辑${ShaderChunk.morphtarget}gl_Position = projectionMatrix * modelViewMatrix * morphedVertex;}
`;const fragmentShader = `// 片元着色器代码${ShaderChunk.common}${ShaderChunk.fog}void main() {// 片元着色器逻辑gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);}
`;const material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,// 其他材质属性
});