Skip to content

常量与配置 ​

本页文档介绍了 Three.js 中的常量系统,该系统提供了整个库中用于配置渲染行为、材质属性、纹理参数和其他 3D 场景管理方面的命名数值和字符串标识符。这些常量确保了类型安全的配置,并通过用语义名称替换魔数来提高代码可读性。

关于材质如何使用这些常量的信息,请参阅 材质与纹理系统。关于渲染器特定配置,请参阅 WebGL 渲染管线。

用途和组织 ​

Three.js 常量在单个源文件中定义并导出为数值或字符串。它们配置:

  • 渲染管线行为(剔除、混合、深度测试)
  • 纹理采样和包装模式
  • 像素格式和数据类型
  • 色彩空间转换
  • 材质外观参数
  • 动画和插值模式

所有常量都是可以从主 Three.js 模块导入的不可变导出。常量系统允许开发人员配置复杂的渲染行为,而无需记忆数值 WebGL 枚举值。

常量系统架构 ​

SVG
100%

渲染配置常量 ​

面剔除 ​

根据环绕顺序控制渲染哪些三角形面。这些常量确定 GPU 级别的剔除优化。

ConstantValueDescription
CullFaceNone0Disables face culling (renders both sides)
CullFaceBack1Culls back faces (default behavior)
CullFaceFront2Culls front faces
CullFaceFrontBack3Culls both front and back faces

使用上下文: 设置在 Material.side 属性上作为 FrontSide、BackSide 或 DoubleSide,它们内部映射到剔除模式。

阴影贴图类型 ​

定义具有不同质量和性能特征的阴影渲染算法。

ConstantValueDescription
BasicShadowMap0Unfiltered shadow maps (fastest)
PCFShadowMap1Percentage-Closer Filtering
PCFSoftShadowMap2PCF with better soft shadows
VSMShadowMap3Variance Shadow Maps

使用上下文: 设置在 WebGLRenderer.shadowMap.type 上以配置阴影渲染质量。

侧面常量 ​

确定渲染几何体的哪些面。

ConstantValueDescription
FrontSide0Render only front-facing triangles
BackSide1Render only back-facing triangles
DoubleSide2Render both front and back faces

混合模式 ​

SVG
100%

混合模式常量:

ConstantValueBehavior
NoBlending0Disables alpha transparency
NormalBlending1Standard alpha blending (default)
AdditiveBlending2Adds source and destination colors
SubtractiveBlending3Subtracts destination from source
MultiplyBlending4Multiplies colors
CustomBlending5Requires manual equation/factor setup
MaterialBlending6Material-specific blending

使用上下文: 设置在 Material.blending 上以控制透明度行为。自定义混合需要通过 Material.blendEquation、Material.blendSrc 和 Material.blendDst 进行额外配置。

深度测试 ​

控制片段如何通过或未通过深度缓冲区比较。

ConstantValueDescription
NeverDepth0Never pass depth test
AlwaysDepth1Always pass depth test
LessDepth2Pass if incoming < buffer
LessEqualDepth3Pass if incoming ≤ buffer (default)
EqualDepth4Pass if incoming == buffer
GreaterEqualDepth5Pass if incoming ≥ buffer
GreaterDepth6Pass if incoming > buffer
NotEqualDepth7Pass if incoming ≠ buffer

使用上下文: 设置在 Material.depthFunc 上以自定义深度测试行为。

纹理配置常量 ​

纹理映射模式 ​

定义纹理如何映射到几何体表面。

ConstantValueTypeDescription
UVMapping300numberStandard UV coordinate mapping
CubeReflectionMapping301numberCube environment reflection
CubeRefractionMapping302numberCube environment refraction
EquirectangularReflectionMapping303numberEquirectangular reflection
EquirectangularRefractionMapping304numberEquirectangular refraction
CubeUVReflectionMapping306numberPMREM cube UV reflection

纹理包装 ​

控制纹理坐标超出 [0, 1] 范围时的行为。

ConstantValueDescription
RepeatWrapping1000Texture repeats infinitely
ClampToEdgeWrapping1001Edge pixels stretch to boundary
MirroredRepeatWrapping1002Texture repeats with mirroring

使用上下文: 设置在 Texture.wrapS 和 Texture.wrapT 属性上。

纹理过滤 ​

SVG
100%

过滤常量:

ConstantValueDescription
NearestFilter1003Point sampling (no interpolation)
NearestMipmapNearestFilter1004Nearest mip level, point sample
NearestMipmapLinearFilter1005Interpolate between mip levels, point sample
LinearFilter1006Bilinear interpolation
LinearMipmapNearestFilter1007Nearest mip level, bilinear sample
LinearMipmapLinearFilter1008Trilinear filtering (best quality)

纹理数据类型 ​

定义纹理像素分量的数据类型。

常量值描述
UnsignedByteType10098 位无符号整数
ByteType10108 位有符号整数
ShortType101116 位有符号整数
UnsignedShortType101216 位无符号整数
IntType101332 位有符号整数
UnsignedIntType101432 位无符号整数
FloatType101532 位浮点数
HalfFloatType101616 位浮点数
UnsignedShort4444Type1017打包 4-4-4-4 格式
UnsignedShort5551Type1018打包 5-5-5-1 格式
UnsignedInt248Type1020打包深度-模板格式
UnsignedInt5999Type35902打包 5-9-9-9 HDR 格式
UnsignedInt101111Type35899打包 10-11-11 格式

使用上下文: 设置在 Texture.type 上以指定像素分量精度和编码。

纹理格式 ​

定义通道布局和压缩的广泛格式常量:

类别示例常量值范围
基本格式AlphaFormat、RGBFormat、RGBAFormat1021-1023
深度格式DepthFormat、DepthStencilFormat1026-1027
整数格式RedIntegerFormat、RGBAIntegerFormat1029-1033
压缩 DXTRGB_S3TC_DXT1_Format、RGBA_S3TC_DXT5_Format33776-33779
压缩 PVRTCRGB_PVRTC_4BPPV1_Format、RGBA_PVRTC_2BPPV1_Format35840-35843
压缩 ETCRGB_ETC1_Format、RGBA_ETC2_EAC_Format36196-37496
压缩 ASTCRGBA_ASTC_4x4_Format ... RGBA_ASTC_12x12_Format37808-37821
压缩 BPTCRGBA_BPTC_Format、RGB_BPTC_UNSIGNED_Format36492-36495
压缩 RGTCRED_RGTC1_Format、RED_GREEN_RGTC2_Format36283-36286

材质配置常量 ​

法线贴图类型 ​

ConstantValueDescription
TangentSpaceNormalMap0Normals relative to surface (default)
ObjectSpaceNormalMap1Normals relative to object

法线贴图打包 ​

常量值类型描述
NoNormalPacking""string无特殊打包
NormalRGPacking"rg"stringRG 通道中的法线
NormalGAPacking"ga"stringGA 通道中的法线

深度打包 ​

定义渲染时深度值的编码方式。

常量值描述
BasicDepthPacking3200反向深度 (1.0 - z)
RGBADepthPacking320132 位 RGBA 编码
RGBDepthPacking320224 位 RGB 编码
RGDepthPacking320316 位 RG 编码

色彩空间常量 ​

Three.js 使用字符串标识符表示色彩空间,以匹配 CSS Color Module Level 4 和 WebGPU 规范。

SVG
100%

色彩空间常量:

ConstantValueDescription
NoColorSpace""No color space defined
SRGBColorSpace"srgb"Standard sRGB color space
LinearSRGBColorSpace"srgb-linear"Linear sRGB (no gamma curve)

传递函数常量:

常量值描述
LinearTransfer"linear"线性传递函数
SRGBTransfer"srgb"sRGB gamma 传递函数

使用上下文: 设置在 Texture.colorSpace 和 WebGLRenderer.outputColorSpace 上,以确保在整个渲染管线中正确的色彩管理。

色调映射常量 ​

定义将 HDR 值映射到显示范围的算法。

ConstantValueDescription
NoToneMapping0No tone mapping applied
LinearToneMapping1Simple linear mapping
ReinhardToneMapping2Reinhard operator
CineonToneMapping3Cineon filmic curve
ACESFilmicToneMapping4ACES filmic curve
CustomToneMapping5User-defined in shader
AgXToneMapping6AgX tone mapper
NeutralToneMapping7Khronos neutral tone mapper

使用上下文: 设置在 WebGLRenderer.toneMapping 上以控制 HDR 到 LDR 的转换。

动画常量 ​

循环模式 ​

ConstantValueDescription
LoopOnce2200Play animation once
LoopRepeat2201Loop from end to start
LoopPingPong2202Alternate forward/backward

插值模式 ​

ConstantValueDescription
InterpolateDiscrete2300No interpolation (stepped)
InterpolateLinear2301Linear interpolation
InterpolateSmooth2302Smooth cubic interpolation
InterpolateBezier2303Bezier curve interpolation

结束行为 ​

ConstantValueDescription
ZeroCurvatureEnding2400Zero curvature at endpoints
ZeroSlopeEnding2401Zero slope at endpoints
WrapAroundEnding2402Wrap to beginning

混合模式 ​

ConstantValueDescription
NormalAnimationBlendMode2500Standard blending (default)
AdditiveAnimationBlendMode2501Additive layer blending

模板操作常量 ​

模板操作 ​

ConstantValueGL EnumDescription
ZeroStencilOp0-Set stencil to 0
KeepStencilOp7680GL_KEEPKeep current value
ReplaceStencilOp7681GL_REPLACEReplace with reference
IncrementStencilOp7682GL_INCRIncrement (clamped)
DecrementStencilOp7683GL_DECRDecrement (clamped)
IncrementWrapStencilOp34055GL_INCR_WRAPIncrement (wrapped)
DecrementWrapStencilOp34056GL_DECR_WRAPDecrement (wrapped)
InvertStencilOp5386GL_INVERTBitwise invert

Stencil Comparison Functions ​

ConstantValueGL EnumDescription
NeverStencilFunc512GL_NEVERNever pass
LessStencilFunc513GL_LESSPass if ref < stencil
EqualStencilFunc514GL_EQUALPass if ref == stencil
LessEqualStencilFunc515GL_LEQUALPass if ref ≤ stencil
GreaterStencilFunc516GL_GREATERPass if ref > stencil
NotEqualStencilFunc517GL_NOTEQUALPass if ref ≠ stencil
GreaterEqualStencilFunc518GL_GEQUALPass if ref ≥ stencil
AlwaysStencilFunc519GL_ALWAYSAlways pass

Drawing Mode Constants ​

Defines how vertex data is interpreted for rendering.

ConstantValueDescription
TrianglesDrawMode0Every 3 vertices form a triangle
TriangleStripDrawMode1Strip of connected triangles
TriangleFanDrawMode2Fan of triangles from first vertex

使用上下文: 设置在 BufferGeometry.drawMode 上(已弃用)或用于自定义绘制调用。

杂项常量 ​

绑定模式 ​

ConstantValueTypeDescription
AttachedBindMode"attached"stringSkinned mesh shares skeleton space
DetachedBindMode"detached"stringSkinned mesh independent of skeleton

环境贴图操作 ​

ConstantValueDescription
MultiplyOperation0Multiply env map with surface color
MixOperation1Blend using reflectivity
AddOperation2Add env map to surface color

Input Control Constants ​

ConstantPropertiesDescription
MOUSE{LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2}Mouse button mappings for controls
TOUCH{ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3}Touch gesture types

Version ​

ConstantValueDescription
REVISION"183dev"Current Three.js version string

使用模式 ​

材质配置 ​

// 典型材质设置示例
material.side = FrontSide;           // 仅渲染正面
material.blending = NormalBlending;  // 标准 alpha 混合
material.depthFunc = LessEqualDepth; // 默认深度测试
material.transparent = true;          // 启用 alpha 混合

常量通常作为命名导入访问:

import { 
    FrontSide, 
    DoubleSide,
    NormalBlending,
    AdditiveBlending,
    RepeatWrapping,
    LinearFilter
} from 'three';

纹理配置 ​

// 典型纹理设置示例
texture.wrapS = RepeatWrapping;
texture.wrapT = RepeatWrapping;
texture.magFilter = LinearFilter;
texture.minFilter = LinearMipmapLinearFilter;
texture.colorSpace = SRGBColorSpace;

渲染器配置 ​

// 典型渲染器设置示例
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;
renderer.toneMapping = ACESFilmicToneMapping;
renderer.outputColorSpace = SRGBColorSpace;