threejs
threejs高级概念
- 渲染器：渲染器是将场景中的物体会知道屏幕上的组建，他负责管理场景中的相机，光源，材质，并将他们转换为屏幕上的像素点，threejs提供了多种渲染器，包括：WebglRenderer,CSS3DRenderer和canasRenderer
- 相机：决定场景在屏幕上的投影方式，threejs中提供了多种相机类型，包括PerspectiveCamera,OrthographicCamera,CubeCamera
- 材质：决定物体表面外观的对象
- 光源：用于模拟世界中的光照效果
- 动画：threejs支持基于时间的动画，可以使用Tweenjs和gsap来实现复杂动画效果
- 骨骼动画：骨骼动画是一种通过动画骨骼来控制模型运动的动画
- 粒子系统：模拟了粒子的效果的技术，threejs提供了ParticleSystem和Points来实现粒子效果
- 后期处理：后期处理用于对渲染结果进行额外处理的技术
- 加载器：用于加载文件或网格模型等资源
动画
| 名称 | 解释 |
|---|---|
| AnimationAction | 管理单个动作，开始暂停等 |
| AnimationClip | 一个对象的一个动作 |
| AnimationMixer | 一个对象所有动作的管理者 |
| AnimationObjectGroup | 共享同一动画的多个模型集合 |
| AnimationUtils | 动画的辅助方法 |
| AnimationTrack | 动画关键帧 |
| PropertyBinding | 对场景图中某一真实属性的引用 |
| PropertyMixer | 对场景图中真实对象属性的管理 |
轨道
| 名称 | 解释 |
|---|---|
| BooleanKeyFrameTrack | 布尔类型的关键帧轨道 |
| ColorKeyFrameTrack | |
| NumberKeyFrameTrack | |
| QuaternionKeyFrameTrack | |
| StringKeyframeTrack | |
| VectorKeyframeTrack |
音频
摄像机
| 名称 | 解释 |
|---|---|
| ArrayCamera | 相机组，vr控制多相机同步移动实用 |
| Camera | 相机抽象基础类，在构建任何新相机时实用 |
| CubeCamera | 立方相机 |
| OrthographicCamera | 正交相机，忽视近大远小的原则 |
| PerspectiveCamera | 透视相机 |
| StereoCamera | 立体相机 |
常量
| 名称 | 解释 |
|---|---|
| Animation | 动画常量 |
| Core | 核心常量 |
| CustomBlendingEquation | 自定义混合方程常量 |
| Materials | 材质常量 |
| Renderer | webgl渲染常量 |
| Textures | 纹理常量 |
核心
| 名称 | 解释 |
|---|---|
| BufferAttribute | 用于存储与BufferGeometry相关的变量 |
| BufferGeometry | 点，线，面，体的描述 |
| Clock | 用于跟踪时间 |
| EventDispatcher | 自定义javascript事件 |
| GLBufferAttribute | GL缓冲区属性，好像与webgl有关 |
| InstanceBufferAttribute | |
| InstanceInterleaveBuffer | |
| InterleavedBuffer | |
| InterleavedBufferAttribute | |
| Layears | 层级，默认为32层，可通过对象layer属性设置层级 |
| Object3D | THREEJS所有对象的基类 |
| RayCaster | 光线投射，可用于鼠标选取目标 |
| Uniform | GLSL中的全局变量 |
附件
曲线
| 名称 | 解释 |
|---|---|
| ArcCurve | 弧线 |
| CatmullRomCurve3 | 三维样条曲线 |
| CubicBezierCurve | 创建一个平滑的二维三次贝塞尔曲线 |
| CubeBezierCurve3 | 创建一个三维三次贝塞尔曲线 |
| EllipseCurve | 创建椭圆曲线 |
| LineCurve | 二维线段曲线 |
| LinuCurve3 | 三维线段曲线 |
| QuadraticBezierCurve | 二维二次贝塞尔曲线 |
| QuadraticBezierCurve3 | 三维二次贝塞尔曲线 |
| SplineCurve | 二维样条曲线 |
几何体
| 名称 | 解释 |
|---|---|
| BoxGeometry | 几何体 |
| CircleGeometry | 圆形 |
| CloneGeometry | 圆锥形 |
| CylinderGeometry | 圆柱体 |
| DodecahedronGeometry | 十二面体 |
| EdgesGeometry | 边缘几何体 |
| ExtrudeGeometry | 挤压缓冲几何体 |
| IcosahedronGeometry | 十二面缓冲 |
| LatheGeometry | 车削几何体 |
| OctahedronGeometry | 八面体 |
| PlanceGeometry | 平面缓冲几何体 |
| PolyhedronGeometry | 多面缓冲几何体 |
| RingGeometry | 圆环缓冲几何体 类似于二维环 |
| ShaperGeometry | 形状缓冲几何体 单面 |
| SpheGeometry | 球 |
| TetrahedronGeometry | 四面缓冲几何体 |
| TorusGeometry | 甜甜圈形状 |
| TorusKnotGeometry | 圆环缓冲扭结几何体 |
| TubeGeometry | 管道缓冲几何体 |
| WireframeGeometry | 网格几何体 |
辅助对象
| 名称 | 解释 |
|---|---|
| ArrowHelper | 模拟方向的三维箭头对象 |
| AxesHelper | 坐标轴 |
| BoxHelper | 用于图形化地展示对象世界轴心对齐的包围盒的辅助对象，展示每个点的三维坐标 |
| Box3Helper | 模拟三维包围盒的辅助对象 |
| CameraHelper | 模拟相机视锥体的辅助对象 |
| DirectionalLightHelper | 模拟平行光的辅助对象，表示光的方向和位置 |
| GridHelper | 二维网格对象 |
| PolarGridHelper | 极坐标网格对象 |
| HemisphereLightHelper | 创建一个虚拟的球形网格 |
| PlanceHelper | 模拟平面的辅助对象 |
| PointLightHelper | 模拟一个虚拟球的网格辅助对象模拟点光源，就是将点光源位置可视化 |
| SkeletonHelper | 用来模拟骨骼 Skeleton 的辅助对象. 该辅助对象使用 LineBasicMaterial 材质. |
| SpotLightHelper | 用于模拟聚光灯 SpotLight 的锥形辅助对象. |
灯光
| 名称 | 解释 |
|---|---|
| AmbientLight | 环境光 |
| AmbientLightProbe | 环境光探针 |
| DirectionalLight | 平行光 |
| HemisphereLight | 半球光 |
| HemisphereLightProb | 半球光探针 |
| Light | 光源的基类 |
| LightProb | 光照探针 |
| PointLight | 点光源 |
| RectAreaLight | 平面光光源 |
| SportLight | 聚光灯 |
阴影
| 名称 | 解释 |
|---|---|
| LightShadow | 光影基类 |
| PointLightShadow | 点光源阴影 |
| DIrectionalLightShadow | 方向性光影 |
| SpotLightShadow | 聚光灯阴影 |
加载器
管理器
材质
| 名称 | 解释 |
|---|---|
| LineBasicMaterial | 基础线条材质 |
| LineDashedMaterial | 虚线材质 |
| Material | 材质基类 |
| MeshBasicMaterial | 基本的网格材质，显示为做基本的颜色或线框，不考虑光线的影响 |
| MeshDepthMaterial | 使用简单的颜色，但是颜色的深度和距离相机的远近有关 |
| MeshDistanceMaterial | 网格距离材质，可以通过相机与物体之间的距离展示不同的效果，可以使用顶点着色器去控制 |
| MeshLamberMaterial | 兰伯特网格材质，考虑光线影响，哑光材质 |
| MeshMatcapMaterial | 马特卡普网格材质，在三维渲染时提供高光反射效果，可以创建非常真实的表面，如金属，皮肤，塑料等 |
| MeshNormalMaterial | 法线网格材质，用于将网格外观设置为基于法线向量的颜色，法线向量垂直于表面向量，用于计算光照和 阴影 |
| MeshPhongMaterial | 高光网格材质，考虑光线影响，光泽材质 |
| MeshPhysicalMaterial | 物理网格材质，提供更高级物理渲染属性 |
| MeshStandardMaterial | 标准网格材质，可实现物理渲染PBR，需要灯光才能显示 |
| MeshToonMaterial | 卡通网格材质 |
| PointsMaterial | 点材质 |
| RawShaderMaterial | 原始着色器材质 |
| ShaderMaterial | 着色器材质，使用着色器来控制顶点如何被放置，像素如何披着色 |
| ShadowMaterial | 阴影材质 |
| SpriteMaterial | 点精灵材质，针对单个点渲染时可以使用 |
数学库
插值
物体
| 名称 | 中文 | 解释 |
|---|---|---|
| Bone | 骨骼 | |
| Group | 分组 | |
| InstanceMesh | 网格实例 | |
| Line | 线 | 创建一条线 |
| LineLoop | 环线 | 创建一条首尾相接的线 |
| LineSegments | 线段 | 设置模型的轮廓线 |
| LOD | 多层次细节 | 根据相机的远近展示更少的几何体来进行精准显示 |
| Mesh | 网格 | |
| Points | 点集 | |
| Skeleton | 骨架 | 使用一个bones数组来创建一个可以由SkinnedMesh使用的骨架 |
| SkinnedMesh | 蒙皮网格 | |
| Sprite | 精灵 | 精灵的面总是朝向摄像机的，通常包含一个半透明的纹理 |
渲染器
| 名称 | 中文 | 注释 |
|---|---|---|
| WebGLMultipleRenderTargets | 多目标渲染器 | 能够使片段着色器写入多个纹理 |
| WegGLRenderer | 常用渲染器 | |
| WebGl1Renderer | 旧版本webgl1渲染器 | |
| WebGLRenderTarget | 渲染缓冲 | 创建一个渲染缓冲区 |
| WebCubeRenderTarget | 立方相机渲染器 | 必须配合CubeCamera使用 |
着色器
| 名称 | 中文 | 注释 |
|---|---|---|
| ShaderChunk | 着色器片段 | WebGL着色器库的着色器片段 |
| ShaderLib | 着色器库 | three.js的WebGL着色器库 |
| UniformsLib | 外置属性库 | 为webgl着色器提供的Uniforms库 |
| UniformsUtils | 工具库 |
webXR
场景
| 名称 | 中文 | 注释 |
|---|---|---|
| Fog | 雾 | 创建雾气属性 |
| FogExp2 | 雾-指数 | 包含了参数自定义雾的属性 |
| Scene | 场景 | 是threejs的基础，可防止模型，相机，灯光等 |
纹理贴图
| 名称 | 中文 | 注释 |
|---|---|---|
| CanvasTexture | canvas贴图 | |
| CompressedTexture | 压缩的纹理 | 基于被压缩的数据，创建一个纹理贴图，例如从一个DDS文件中。 |
| CompriessedArrayTexture | 压缩数组纹理 | |
| CubeTexture | 立方体纹理 | |
| DataArrayTexture | 数据数组纹理 | |
| Data3dTexture | 三维纹理贴图 | |
| DataTexture | 纹理贴图 | 从袁术数据的宽高来直接创建一个纹理贴图 |
| DepthTexture | 深度纹理贴图 | |
| FramebufferTexture | 帧缓冲纹理贴图 | |
| Source | 纹理数据源 | |
| Texture | 纹理 | 创建一个纹理贴图，将其应用于一个表面，或作为反射折射贴图 |
| VideoTexture | 视频纹理 | 创建一个使用视频来作为贴图的纹理对象 |
附件
控制器
| 名称 | 中文 | 注释 |
|---|---|---|
| DragControls | 拖动控件 | 提供可被拖动的交互 |
| FirstPersonControls | 第一人称控制 | 第一人称视角 |
| FlyControls | 飞行控制器 | 启用了类似数字内容的创建工具中的飞行模式的导航凡是，可以在3D空间中变换相机并且无任何限制 |
| OrbitControls | 轨道控制 | 可以使得相机围绕目标进行轨道运动 |
| PointerLockControls | 指针锁定控件 | 类似于人物操控效果，与CF的操作类似 |
| TrackballControls | 轨迹球控件 | 与OrbitControls类似，但是没有极点 |
| TransformControls | 变换控件 | 类似于blender中的模型位置变换，可控制xyz的平移 |
几何体
辅助对象
灯光
加载器
物体
后期处理
| 名称 | 中文 | 解释 |
|---|---|---|
| AdaptiveToneMappingPass | 自适应色调映射 | 自适应色调映射，用于提高场景亮度和色彩范围 |
| AfterimagePass | 残影效果 | 残影效果，用于模拟相机快门速度较慢时的残影效果 |
| BloomPass | 泛光效果 | 泛光效果，用于模拟相机透镜和眼睛对亮度过高区域的适应能力 |
| BokehPass | 景深效果 | 景深效果，用于模拟相机的景深效果 |
| ClearMaskPass | 清除蒙版 | 清除蒙版，用于清除之前添加的蒙版 |
| ColorifyPass | 颜色着色 | 颜色着色，用于改变场景颜色 |
| DotScreenPass | 点状屏幕效果 | 点状屏幕效果，用于模拟印刷品的效果 |
| FilmPass | 胶片效果 | 胶片效果，用于模拟电影或照片的颗粒和伪像效果 |
| FlitchPass | 故障效果 | 故障效果，用于模拟故障或数字干扰效果 |
| GodRaysPass | 光柱效果 | 光柱效果，用于模拟太阳或其他强光源的光线穿过云层或其他遮挡物时产生的光柱效果 |
| HalftonePass | 半色调效果 | 半色调效果，用于模拟印刷品的半色调效果 |
| MaskPass | 蒙版效果 | 蒙版，用于创建蒙版 |
| OutLinePass | 轮廓线效果 | 轮廓线效果，用于创建物体的轮廓线 |
| PixelationPass | 像素化 | 像素化效果，用于模拟像素化效果 |
| RenderPass | 渲染通道 | 渲染通道，用于渲染场景 |
| SAOPass | 环境光遮蔽 | 环境光遮蔽，用于增强场景细节和深度感 |
| ShaderPass | 自定义着色器通道 | 自定义着色器通道，用于添加自定义的着色器通道 |
| SSAOPass | 屏幕空间环境光遮蔽 | 屏幕空间环境光遮蔽，用于模拟光线在环境中的散射和遮蔽效果 |
| SSAARenderPass | SSA抗锯齿通道 | SSAA抗锯齿通道，用于减少场景中的锯齿效果 |
| TAARenderPass | TAA抗锯齿通道 | TAA抗锯齿通道，用于减少场景中的锯齿效果 |
| TexturePass | 贴图通道 | 贴图通道，用于添加贴图 |
| UnrealBloomPass | 真实泛光效果 | 真实泛光效果，用于增强场景的泛光效果，提高场景的视觉效果和真实感 |
