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

👨‍⚕️ 主页: gis分享者

👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏:threejs gis工程师

文章目录

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

一、🍀前言

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

1.1 ☘️Animation常量汇总

动画相关常量

1.1.1 循环模式

javascript 复制代码
THREE.LoopOnce
THREE.LoopRepeat
THREE.LoopPingPong

1.1.2 插值模式

javascript 复制代码
THREE.InterpolateDiscrete
THREE.InterpolateLinear
THREE.InterpolateSmooth

1.1.3 结束模式

javascript 复制代码
THREE.ZeroCurvatureEnding
THREE.ZeroSlopeEnding
THREE.WrapAroundEnding

1.2 ☘️Core常量汇总

核心常量

1.2.1 修订版本号

javascript 复制代码
THREE.REVISION

当前three.js的修订版本号

1.2.2 Color Spaces

javascript 复制代码
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 鼠标按钮

javascript 复制代码
THREE.MOUSE.LEFT
	THREE.MOUSE.MIDDLE
	THREE.MOUSE.RIGHT

1.3 ☘️CustomBlendingEquation常量汇总

自定义混合方程

代码示例:

javascript 复制代码
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 混合方程

javascript 复制代码
THREE.AddEquation
THREE.SubtractEquation
THREE.ReverseSubtractEquation
THREE.MinEquation
THREE.MaxEquation

1.3.2 源因子

javascript 复制代码
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 目标因子

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

javascript 复制代码
THREE.SrcAlphaSaturateFactor

1.4 ☘️Renderer常量汇总

渲染器

1.4.1 面剔除模式

javascript 复制代码
THREE.CullFaceNone
THREE.CullFaceBack
THREE.CullFaceFront
THREE.CullFaceFrontBack

CullFaceNone 禁用面剔除。

CullFaceBack 为默认值,剔除背面。

CullFaceFront 剔除正面。

CullFaceFrontBack 剔除正面和背面。

1.4.2 阴影类型

javascript 复制代码
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 色调映射

javascript 复制代码
THREE.NoToneMapping
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping

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

相关推荐
gis分享者4 天前
学习threejs,使用LineBasicMaterial基础线材质
threejs·line·basicmaterial·线材质·gosper·高斯帕曲线
gis分享者9 天前
学习threejs,使用ShaderMaterial自定义着色器材质
材质·threejs·着色器·shadermaterial
资深前端之路9 天前
threejs 安装教程
vue.js·threejs
伶俜Monster10 天前
Threejs 光照教程,为 3D 场景注入灵魂
前端·3d·webgl·threejs
gis分享者11 天前
学习threejs,Materials常量汇总
threejs·常量·materials
efvv12 天前
使用CSS3DRenderer/CSS2DRenderer给模型上面添加html标签
前端·javascript·webgl·threejs
gis分享者16 天前
学习threejs,使用MeshBasicMaterial基本网格材质
threejs·basicmaterial·基本网格材质
gis分享者20 天前
学习threejs,使用PointLight点光源
threejs·点光源·pointlight