当前位置：首页 > news >正文

学习threejs，Animation、Core、CustomBlendingEquation、Renderer常量汇总

news 来源：原创 2025/8/26 22:17:41

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️Animation常量汇总
- - 1.1.1 循环模式
  - 1.1.2 插值模式
  - 1.1.3 结束模式
- 1.2 ☘️Core常量汇总
- - 1.2.1 修订版本号
  - 1.2.2 Color Spaces
  - 1.2.3 鼠标按钮
- 1.3 ☘️CustomBlendingEquation常量汇总
- - 1.3.1 混合方程
  - 1.3.2 源因子
  - 1.3.3 目标因子
- 1.4 ☘️Renderer常量汇总
- - 1.4.1 面剔除模式
  - 1.4.2 阴影类型
  - 1.4.3 色调映射

一、🍀前言

本文详细threejs讲解有关Animation、Core、CustomBlendingEquation、Renderer的相关常量。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️Animation常量汇总

动画相关常量

1.1.1 循环模式

THREE.LoopOnce
THREE.LoopRepeat
THREE.LoopPingPong

1.1.2 插值模式

THREE.InterpolateDiscrete
THREE.InterpolateLinear
THREE.InterpolateSmooth

1.1.3 结束模式

THREE.ZeroCurvatureEnding
THREE.ZeroSlopeEnding
THREE.WrapAroundEnding

1.2 ☘️Core常量汇总

核心常量

1.2.1 修订版本号

THREE.REVISION

当前three.js的修订版本号

1.2.2 Color Spaces

THREE.SRGBColorSpace
THREE.LinearSRGBColorSpace

SRGBColorSpace (“sRGB”) 是指由 Rec. 定义的色彩空间。 709 原色、D65 白点和非线性 sRGB 传输函数。 sRGB 是 CSS 中的默认颜色空间，经常出现在调色板和颜色选择器中。以十六进制或 CSS 表示法表示的颜色通常在 sRGB 颜色空间中。

LinearSRGBColorSpace (“Linear-sRGB”) 是指具有线性传递函数的 sRGB 颜色空间（上图）。 Linear-sRGB 是 three.js 中的工作色彩空间，在大部分渲染过程中使用。 three.js 材质和着色器中的 RGB 分量位于线性 sRGB 颜色空间中。

1.2.3 鼠标按钮

THREE.MOUSE.LEFTTHREE.MOUSE.MIDDLETHREE.MOUSE.RIGHT

1.3 ☘️CustomBlendingEquation常量汇总

自定义混合方程
代码示例：

const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
material.blending = THREE.CustomBlending;
material.blendEquation = THREE.AddEquation; //default
material.blendSrc = THREE.SrcAlphaFactor; //default
material.blendDst = THREE.OneMinusSrcAlphaFactor; //default

1.3.1 混合方程

THREE.AddEquation
THREE.SubtractEquation
THREE.ReverseSubtractEquation
THREE.MinEquation
THREE.MaxEquation

1.3.2 源因子

THREE.ZeroFactor
THREE.OneFactor
THREE.SrcColorFactor
THREE.OneMinusSrcColorFactor
THREE.SrcAlphaFactor
THREE.OneMinusSrcAlphaFactor
THREE.DstAlphaFactor
THREE.OneMinusDstAlphaFactor
THREE.DstColorFactor
THREE.OneMinusDstColorFactor
THREE.SrcAlphaSaturateFactor

1.3.3 目标因子

所有的源因子的值，在目标因子中都是有效的。除了：

THREE.SrcAlphaSaturateFactor

1.4 ☘️Renderer常量汇总

渲染器

1.4.1 面剔除模式

THREE.CullFaceNone
THREE.CullFaceBack
THREE.CullFaceFront
THREE.CullFaceFrontBack

CullFaceNone 禁用面剔除。
CullFaceBack 为默认值，剔除背面。
CullFaceFront 剔除正面。
CullFaceFrontBack 剔除正面和背面。

1.4.2 阴影类型

THREE.BasicShadowMap
THREE.PCFShadowMap
THREE.PCFSoftShadowMap
THREE.VSMShadowMap

这些常量定义了WebGLRenderer中shadowMap.type的属性。

BasicShadowMap 能够给出没有经过过滤的阴影映射 —— 速度最快，但质量最差。

PCFShadowMap 为默认值，使用Percentage-Closer Filtering (PCF)算法来过滤阴影映射。

PCFSoftShadowMap 和PCFShadowMap一样使用 Percentage-Closer Filtering (PCF) 算法过滤阴影映射，但在使用低分辨率阴影图时具有更好的软阴影。

VSMShadowMap 使用Variance Shadow Map (VSM)算法来过滤阴影映射。当使用VSMShadowMap时，所有阴影接收者也将会投射阴影。

1.4.3 色调映射

THREE.NoToneMapping
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping

这些常量定义了WebGLRenderer中toneMapping的属性。这个属性用于在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围（HDR）效果。