本章介绍threejs的常量与核心内容,包括各种常量定义以及核心类,包括各个基础类及公共的类等。

一、学习视频
二、常量
2.1 动画常量(Animation Constants)
循环模式
- THREE.LoopOnce
- THREE.LoopRepeat
- THREE.LoopPingPong
插值模式
- THREE.InterpolateDiscrete
- THREE.InterpolateLinear
- THREE.InterpolateSmooth
结束模式
- THREE.ZeroCurvatureEnding
- THREE.ZeroSlopeEnding
- THREE.WrapAroundEnding
2.2 核心常量(Core Constants)
鼠标按钮
- THREE.MOUSE.LEFT
- THREE.MOUSE.MIDDLE
- THREE.MOUSE.RIGHT
Color Spaces
- THREE.SRGBColorSpace
- THREE.LinearSRGBColorSpace
2.3 自定义混合方程常量(Custom Blending Equation Constants)
这个常量可以用于所有的材质类型。首先将材质的混合模式设置为THREE.CustomBlending,然后设置所需要的混合方程、源因子和目标因子。
混合方程
- THREE.AddEquation
- THREE.SubtractEquation
- THREE.ReverseSubtractEquation
- THREE.MinEquation
- THREE.MaxEquation
源因子
- THREE.ZeroFactor
- THREE.OneFactor
- THREE.SrcColorFactor
- THREE.OneMinusSrcColorFactor
- THREE.SrcAlphaFactor
- THREE.OneMinusSrcAlphaFactor
- THREE.DstAlphaFactor
- THREE.OneMinusDstAlphaFactor
- THREE.DstColorFactor
- THREE.OneMinusDstColorFactor
- THREE.SrcAlphaSaturateFactor
目标因子
所有的源因子的值,在目标因子中都是有效的。除了:THREE.SrcAlphaSaturateFactor
2.4 材质常量(Material Constants)
由这些常量定义的属性对所有的材质类型都生效,除了Texture Combine Operations只应用于 MeshBasicMaterial,MeshLambertMaterial和MeshPhongMaterial。
面
- THREE.FrontSide
- THREE.BackSide
- THREE.DoubleSide
定义了哪一边的面将会被渲染 ------ 正面,或是反面,还是两个面都渲染。 默认值是FrontSide(只渲染正面)。
混合模式
- THREE.NoBlending
- THREE.NormalBlending
- THREE.AdditiveBlending
- THREE.SubtractiveBlending
- THREE.MultiplyBlending
- THREE.CustomBlending
这些值控制着源和目标材质中,被发送到WebGLRenderer,来给WebGL使用的包含有RGB和Alpha数据的混合方程。
默认值是NormalBlending。
请注意,CustomBlending必须被设置为自定义混合方程(Custom Blending Equations)常量中的值。
深度模式
- THREE.NeverDepth
- THREE.AlwaysDepth
- THREE.LessDepth
- THREE.LessEqualDepth
- THREE.GreaterEqualDepth
- THREE.GreaterDepth
- THREE.NotEqualDepth
材质使用这些深度函数来比较输入像素和缓冲器中Z-depth的值。 如果比较的结果为true,则将绘制像素。
- NeverDepth 永远不返回true。 AlwaysDepth 总是返回true。
- LessDepth 当输入像素Z-depth小于当前缓冲器Z-depth时,返回true。
- LessEqualDepth 为默认值,当输入像素Z-depth小于或等于当前缓冲器Z-depth时,返回true。
- GreaterEqualDepth 当输入像素Z-depth大于或等于当前缓冲器Z-depth时,返回true。
- GreaterDepth 当输入像素Z-depth大于当前缓冲器Z-depth时,返回true。
- NotEqualDepth 当输入像素Z-depth不等于当前缓冲器Z-depth时,返回true。
纹理结合操作
- THREE.MultiplyOperation
- THREE.MixOperation
- THREE.AddOperation
这些常量定义了物体表面颜色与环境贴图(如果存在的话)相结合的结果, 用在MeshBasicMaterial、MeshLambertMaterial和MeshPhongMaterial当中。
MultiplyOperation 是默认值,它将环境贴图和物体表面颜色进行相乘。
MixOperation 使用反射率来混和两种颜色。uses reflectivity to blend between the two colors.
AddOperation 用于对两种颜色进行相加。
模板函数
- THREE.NeverStencilFunc
- THREE.LessStencilFunc
- THREE.EqualStencilFunc
- THREE.LessEqualStencilFunc
- THREE.GreaterStencilFunc
- THREE.NotEqualStencilFunc
- THREE.GreaterEqualStencilFunc
- THREE.AlwaysStencilFunc
材质使用的模板函数,用于决定是否执行一项模板操作.
- NeverStencilFunc 一定会返回true.
- LessStencilFunc 当模板基准值比当前模板值小的时候返回true.
- EqualStencilFunc 当模板基准值和当前模板值一样的时候返回true.
- LessEqualStencilFunc当模板基准值小于等于当前模板值的时候返回true.
- GreaterStencilFunc 当模板基准值比当前模板值大的时候返回true.
- NotEqualStencilFunc 当模板基准值与当前模板值不相等的时候返回true.
- GreaterEqualStencilFunc 当模板基准值比当前模板值大的时候返回true.
- AlwaysStencilFunc一定会返回true.
模板操作
- THREE.ZeroStencilOp
- THREE.KeepStencilOp
- THREE.ReplaceStencilOp
- THREE.IncrementStencilOp
- THREE.DecrementStencilOp
- THREE.IncrementWrapStencilOp
- THREE.DecrementWrapStencilOp
- THREE.InvertStencilOp
当提供的模板函数通过的时候,材质会在模板缓冲像素上执行怎样的模板操作.
- ZeroStencilOp 将模板值设置为0。
- KeepStencilOp 不会对模板值进行任何操作。
- ReplaceStencilOp 使用模板基准值覆盖模板值。
- IncrementStencilOp 将当前模板值加1。
- DecrementStencilOp将当前模板值减1。
- IncrementWrapStencilOp 将当前模板值加1,如果这个值超过了255则会设置为0。
- DecrementWrapStencilOp 将当前模板值减1,如果这个值低于0则会设置为255
- InvertStencilOp将当前模板值按位反转.
GLSL Version
- THREE.GLSL1
- THREE.GLSL3
2.5 WebGL渲染器常量(WebGLRenderer Constants)
面剔除模式
- THREE.CullFaceNone
- THREE.CullFaceBack
- THREE.CullFaceFront
- THREE.CullFaceFrontBack
- CullFaceNone 禁用面剔除。
- CullFaceBack 为默认值,剔除背面。
- CullFaceFront 剔除正面。
- CullFaceFrontBack 剔除正面和背面。
阴影类型
- 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时,所有阴影接收者也将会投射阴影。
色调映射
- THREE.NoToneMapping
- THREE.LinearToneMapping
- THREE.ReinhardToneMapping
- THREE.CineonToneMapping
- THREE.ACESFilmicToneMapping
这些常量定义了WebGLRenderer中toneMapping的属性。 这个属性用于在普通计算机显示器或者移动设备屏幕等低动态范围介质上,模拟、逼近高动态范围(HDR)效果。
2.6 纹理常量(Texture Constants)
映射模式
- THREE.UVMapping
- THREE.CubeReflectionMapping
- THREE.CubeRefractionMapping
- THREE.EquirectangularReflectionMapping
- THREE.EquirectangularRefractionMapping
- THREE.CubeUVReflectionMapping
这些常量定义了纹理贴图的映射模式。
UVMapping是默认值,纹理使用网格的坐标来进行映射。
其它的值定义了环境映射的类型。
CubeReflectionMapping 和 CubeRefractionMapping 用于 CubeTexture ------ 由6个纹理组合而成,每个纹理都是立方体的一个面。 对于CubeTexture来说,CubeReflectionMapping是其默认值。
EquirectangularReflectionMapping 和 EquirectangularRefractionMapping 用于等距圆柱投影的环境贴图,也被叫做经纬线映射贴图。等距圆柱投影贴图表示沿着其水平中线360°的视角,以及沿着其垂直轴向180°的视角。贴图顶部和底部的边缘分别对应于它所映射的球体的北极和南极。
包裹模式
- THREE.RepeatWrapping
- THREE.ClampToEdgeWrapping
- THREE.MirroredRepeatWrapping
这些常量定义了纹理贴图的 wrapS 和 wrapT 属性,定义了水平和垂直方向上纹理的包裹方式。
使用RepeatWrapping,纹理将简单地重复到无穷大。 With RepeatWrapping the texture will simply repeat to infinity.
ClampToEdgeWrapping是默认值,纹理中的最后一个像素将延伸到网格的边缘。
使用MirroredRepeatWrapping, 纹理将重复到无穷大,在每次重复时将进行镜像。
放大滤镜(Magnification Filters)
- THREE.NearestFilter
- THREE.LinearFilter
这些常量用于纹理的magFilter属性,它们定义了当被纹理化的像素映射到小于或者等于1纹理元素(texel)的区域时,将要使用的纹理放大函数。
NearestFilter返回与指定纹理坐标(在曼哈顿距离之内)最接近的纹理元素的值。
LinearFilter是默认值,返回距离指定的纹理坐标最近的四个纹理元素的加权平均值, 并且可以包含纹理的其他部分中,被包裹或者被重复的项目,具体取决于 wrapS 和 wrapT 的值,and on the exact mapping。
缩小滤镜(Minification Filters)
- THREE.NearestFilter
- THREE.NearestMipmapNearestFilter
- THREE.NearestMipmapLinearFilter
- THREE.LinearFilter
- THREE.LinearMipmapNearestFilter
- THREE.LinearMipmapLinearFilter
这些常量用于纹理的minFilter属性,它们定义了当被纹理化的像素映射到大于1纹理元素(texel)的区域时,将要使用的纹理缩小函数。
除了NearestFilter 和 LinearFilter, 下面的四个函数也可以用于缩小:
NearestMipmapNearestFilter选择与被纹理化像素的尺寸最匹配的mipmap, 并以NearestFilter(最靠近像素中心的纹理元素)为标准来生成纹理值。
NearestMipmapLinearFilter选择与被纹理化像素的尺寸最接近的两个mipmap, 并以NearestFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
LinearMipmapNearestFilter选择与被纹理化像素的尺寸最匹配的mipmap, 并以LinearFilter(最靠近像素中心的四个纹理元素的加权平均值)为标准来生成纹理值。
LinearMipmapLinearFilter是默认值,它选择与被纹理化像素的尺寸最接近的两个mipmap, 并以LinearFilter为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
类型
- THREE.UnsignedByteType
- THREE.ByteType
- THREE.ShortType
- THREE.UnsignedShortType
- THREE.IntType
- THREE.UnsignedIntType
- THREE.FloatType
- THREE.HalfFloatType
- THREE.UnsignedShort4444Type
- THREE.UnsignedShort5551Type
- THREE.UnsignedInt248Type
这些常量用于纹理的type属性,这些属性必须与正确的格式相对应。详情请查看下方。
UnsignedByteType 是默认值。
格式
- THREE.AlphaFormat
- THREE.RedFormat
- THREE.RedIntegerFormat
- THREE.RGFormat
- THREE.RGIntegerFormat
- THREE.RGBAFormat
- THREE.RGBAIntegerFormat
- THREE.LuminanceFormat
- THREE.LuminanceAlphaFormat
- THREE.DepthFormat
- THREE.DepthStencilFormat
这些常量用于纹理的format属性,它们定义了shader(着色器)将如何读取的2D纹理或者texels(纹理元素)的元素。.
AlphaFormat 丢弃红、绿、蓝分量,仅读取Alpha分量。
RedFormat discards the green and blue components and reads just the red component.
RedIntegerFormat discards the green and blue components and reads just the red component. The texels are read as integers instead of floating point. (can only be used with a WebGL 2 rendering context).
RGFormat discards the alpha, and blue components and reads the red, and green components. (can only be used with a WebGL 2 rendering context).
RGIntegerFormat discards the alpha, and blue components and reads the red, and green components. The texels are read as integers instead of floating point. (can only be used with a WebGL 2 rendering context).
RGBAFormat 是默认值,它将读取红、绿、蓝和Alpha分量。
RGBAIntegerFormat is the default and reads the red, green, blue and alpha components. The texels are read as integers instead of floating point. (can only be used with a WebGL 2 rendering context).
LuminanceFormat 将每个元素作为单独的亮度分量来读取。 将其转换为范围限制在[0,1]区间的浮点数,然后通过将亮度值放入红、绿、蓝通道,并将1.0赋给Alpha通道,来组装成一个RGBA元素。
LuminanceAlphaFormat 将每个元素同时作为亮度分量和Alpha分量来读取。 和上面LuminanceFormat的处理过程是一致的,除了Alpha分量具有除了1.0以外的值。
DepthFormat将每个元素作为单独的深度值来读取,将其转换为范围限制在[0,1]区间的浮点数。 它是DepthTexture的默认值。
DepthStencilFormat将每个元素同时作为一对深度值和模板值来读取。 其中的深度分量解释为DepthFormat。 模板分量基于深度+模板的内部格式来进行解释。
请注意,纹理必须具有正确的type设置,正如上一节所描述的那样。 请参阅WebGLRenderingContext.texImage2D 来获得有关详细信息。
DDS / ST3C 压缩纹理格式
- THREE.RGB_S3TC_DXT1_Format
- THREE.RGBA_S3TC_DXT1_Format
- THREE.RGBA_S3TC_DXT3_Format
- THREE.RGBA_S3TC_DXT5_Format
要使用CompressedTexture中的format属性, 需要获得WEBGL_compressed_texture_s3tc 扩展的支持。
通过这个扩展,这里的四种S3TC格式将可以使用:
RGB_S3TC_DXT1_Format:RGB图像格式的DXT1压缩图像。 RGBA_S3TC_DXT1_Format:RGB图像格式的DXT1压缩图像,Alpha仅具有是/否透明两个值。
RGBA_S3TC_DXT3_Format:RGBA图像格式的DXT3压缩图像,和32位RGBA纹理贴图相比,它提供了4:1的压缩比。
RGBA_S3TC_DXT5_Format:RGBA图像格式的DXT5压缩图像,它也提供了4:1的压缩比,但与DX3格式的不同之处在于其Alpha是如何被压缩的。
PVRTC 压缩纹理格式(PVRTC Compressed Texture Formats)
- THREE.RGB_PVRTC_4BPPV1_Format
- THREE.RGB_PVRTC_2BPPV1_Format
- THREE.RGBA_PVRTC_4BPPV1_Format
- THREE.RGBA_PVRTC_2BPPV1_Format
要使用CompressedTexture中的format属性,需要获得 WEBGL_compressed_texture_pvrtc 扩展的支持。
PVRTC通常只在具有PowerVR芯片的移动设备上可用,这些设备主要是苹果设备。
通过这个扩展,这里的四种PVRTC格式将可以使用:
RGB_PVRTC_4BPPV1_Format:4位模式下的RGB压缩,每4x4像素一个块。
RGB_PVRTC_2BPPV1_Format:2位模式下的RGB压缩,每8x4像素一个块。
RGBA_PVRTC_4BPPV1_Format: 4位模式下的RGBA压缩,每4x4像素一个块。
RGBA_PVRTC_2BPPV1_Format: 2位模式下的RGB压缩,每8x4像素一个块。
ETC 压缩纹理格式
- THREE.RGB_ETC1_Format
- THREE.RGB_ETC2_Format
- THREE.RGBA_ETC2_EAC_Format
For use with a CompressedTexture's format property, these require support for the WEBGL_compressed_texture_etc1 (ETC1) or WEBGL_compressed_texture_etc (ETC2) extensions.
- ASTC Compressed Texture Format
- THREE.RGBA_ASTC_4x4_Format
- THREE.RGBA_ASTC_5x4_Format
- THREE.RGBA_ASTC_5x5_Format
- THREE.RGBA_ASTC_6x5_Format
- THREE.RGBA_ASTC_6x6_Format
- THREE.RGBA_ASTC_8x5_Format
- THREE.RGBA_ASTC_8x6_Format
- THREE.RGBA_ASTC_8x8_Format
- THREE.RGBA_ASTC_10x5_Format
- THREE.RGBA_ASTC_10x6_Format
- THREE.RGBA_ASTC_10x8_Format
- THREE.RGBA_ASTC_10x10_Format
- THREE.RGBA_ASTC_12x10_Format
- THREE.RGBA_ASTC_12x12_Format
For use with a CompressedTexture's format property, these require support for the WEBGL_compressed_texture_astc extension.
Internal Formats
- 'ALPHA'
- 'RGB'
- 'RGBA'
- 'LUMINANCE'
- 'LUMINANCE_ALPHA'
- 'RED_INTEGER'
- 'R8'
- 'R8_SNORM'
- 'R8I'
- 'R8UI'
- 'R16I'
- 'R16UI'
- 'R16F'
- 'R32I'
- 'R32UI'
- 'R32F'
- 'RG8'
- 'RG8_SNORM'
- 'RG8I'
- 'RG8UI'
- 'RG16I'
- 'RG16UI'
- 'RG16F'
- 'RG32I'
- 'RG32UI'
- 'RG32F'
- 'RGB565'
- 'RGB8'
- 'RGB8_SNORM'
- 'RGB8I'
- 'RGB8UI'
- 'RGB16I'
- 'RGB16UI'
- 'RGB16F'
- 'RGB32I'
- 'RGB32UI'
- 'RGB32F'
- 'RGB9_E5'
- 'SRGB8'
- 'R11F_G11F_B10F'
- 'RGBA4'
- 'RGBA8'
- 'RGBA8_SNORM'
- 'RGBA8I'
- 'RGBA8UI'
- 'RGBA16I'
- 'RGBA16UI'
- 'RGBA16F'
- 'RGBA32I'
- 'RGBA32UI'
- 'RGBA32F'
- 'RGB5_A1'
- 'RGB10_A2'
- 'RGB10_A2UI'
- 'SRGB8_ALPHA8'
- 'DEPTH_COMPONENT16'
- 'DEPTH_COMPONENT24'
- 'DEPTH_COMPONENT32F'
- 'DEPTH24_STENCIL8'
- 'DEPTH32F_STENCIL8'
Heads up: changing the internal format of a texture will only affect the texture when using a WebGL 2 rendering context.
For use with a texture's internalFormat property, these define how elements of a texture, or texels, are stored on the GPU.
- R8 stores the red component on 8 bits.
- R8_SNORM stores the red component on 8 bits. The component is stored as normalized.
- R8I stores the red component on 8 bits. The component is stored as an integer.
- R8UI stores the red component on 8 bits. The component is stored as an unsigned integer.
- R16I stores the red component on 16 bits. The component is stored as an integer.
- R16UI stores the red component on 16 bits. The component is stored as an unsigned integer.
- R16F stores the red component on 16 bits. The component is stored as floating point.
- R32I stores the red component on 32 bits. The component is stored as an integer.
- R32UI stores the red component on 32 bits. The component is stored as an unsigned integer.
- R32F stores the red component on 32 bits. The component is stored as floating point.
- RG8 stores the red and green components on 8 bits each.
- RG8_SNORM stores the red and green components on 8 bits each. Every component is stored as normalized.
- RG8I stores the red and green components on 8 bits each. Every component is stored as an integer.
- RG8UI stores the red and green components on 8 bits each. Every component is stored as an unsigned integer.
- RG16I stores the red and green components on 16 bits each. Every component is stored as an integer.
- RG16UI stores the red and green components on 16 bits each. Every component is stored as an unsigned integer.
- RG16F stores the red and green components on 16 bits each. Every component is stored as floating point.
- RG32I stores the red and green components on 32 bits each. Every component is stored as an integer.
- RG32UI stores the red and green components on 32 bits. Every component is stored as an unsigned integer.
- RG32F stores the red and green components on 32 bits. Every component is stored as floating point.
- RGB8 stores the red, green, and blue components on 8 bits each. RGB8_SNORM stores the red, green, and blue components on 8 bits each. Every component is stored as normalized.
- RGB8I stores the red, green, and blue components on 8 bits each. Every component is stored as an integer.
- RGB8UI stores the red, green, and blue components on 8 bits each. Every component is stored as an unsigned integer.
- RGB16I stores the red, green, and blue components on 16 bits each. Every component is stored as an integer.
- RGB16UI stores the red, green, and blue components on 16 bits each. Every component is stored as an unsigned integer.
- RGB16F stores the red, green, and blue components on 16 bits each. Every component is stored as floating point
- RGB32I stores the red, green, and blue components on 32 bits each. Every component is stored as an integer.
- RGB32UI stores the red, green, and blue components on 32 bits each. Every component is stored as an unsigned integer.
- RGB32F stores the red, green, and blue components on 32 bits each. Every component is stored as floating point
- R11F_G11F_B10F stores the red, green, and blue components respectively on 11 bits, 11 bits, and 10bits. Every component is stored as floating point.
- RGB565 stores the red, green, and blue components respectively on 5 bits, 6 bits, and 5 bits.
- RGB9_E5 stores the red, green, and blue components on 9 bits each.
- RGBA8 stores the red, green, blue, and alpha components on 8 bits each.
- RGBA8_SNORM stores the red, green, blue, and alpha components on 8 bits. Every component is stored as normalized.
- RGBA8I stores the red, green, blue, and alpha components on 8 bits each. Every component is stored as an integer.
- RGBA8UI stores the red, green, blue, and alpha components on 8 bits. Every component is stored as an unsigned integer.
- RGBA16I stores the red, green, blue, and alpha components on 16 bits. Every component is stored as an integer.
- RGBA16UI stores the red, green, blue, and alpha components on 16 bits. Every component is stored as an unsigned integer.
- RGBA16F stores the red, green, blue, and alpha components on 16 bits. Every component is stored as floating point.
- RGBA32I stores the red, green, blue, and alpha components on 32 bits. Every component is stored as an integer.
- RGBA32UI stores the red, green, blue, and alpha components on 32 bits. Every component is stored as an unsigned integer.
- RGBA32F stores the red, green, blue, and alpha components on 32 bits. Every component is stored as floating point.
- RGB5_A1 stores the red, green, blue, and alpha components respectively on 5 bits, 5 bits, 5 bits, and 1 bit.
- RGB10_A2 stores the red, green, blue, and alpha components respectively on 10 bits, 10 bits, 10 bits and 2 bits.
- RGB10_A2UI stores the red, green, blue, and alpha components respectively on 10 bits, 10 bits, 10 bits and 2 bits. Every component is stored as an unsigned integer.
- SRGB8 stores the red, green, and blue components on 8 bits each.
- SRGB8_ALPHA8 stores the red, green, blue, and alpha components on 8 bits each.
- DEPTH_COMPONENT16 stores the depth component on 16bits.
- DEPTH_COMPONENT24 stores the depth component on 24bits.
- DEPTH_COMPONENT32F stores the depth component on 32bits. The component is stored as floating point.
- DEPTH24_STENCIL8 stores the depth, and stencil components respectively on 24 bits and 8 bits. The stencil component is stored as an unsigned integer.
- DEPTH32F_STENCIL8 stores the depth, and stencil components respectively on 32 bits and 8 bits. The depth component is stored as floating point, and the stencil component as an unsigned integer.
Note that the texture must have the correct type set, as well as the correct format. See WebGLRenderingContext.texImage2D, and WebGL2RenderingContext.texImage3D, for more details regarding the possible combination of format, internalFormat, and type.
For more in-depth information regarding internal formats, you can also refer directly to the WebGL2 Specification and to the OpenGL ES 3.0 Specification.
Depth Packing
- THREE.BasicDepthPacking
- THREE.RGBADepthPacking
For use with the depthPacking property of MeshDepthMaterial.
Color Space
- THREE.NoColorSpace = ""
- THREE.SRGBColorSpace = "srgb"
- THREE.LinearSRGBColorSpace = "srgb-linear"
Used to define the color space of textures (and the output color space of the renderer).
If the color space type is changed after the texture has already been used by a material, you will need to set Material.needsUpdate to true to make the material recompile.
三、核心
3.1 BufferAttribute
这个类用于存储与BufferGeometry相关联的 attribute(例如顶点位置向量,面片索引,法向量,颜色值,UV坐标以及任何自定义 attribute )。 利用 BufferAttribute,可以更高效的向GPU传递数据。详情和例子见该页。
在 BufferAttribute 中,数据被存储为任意长度的矢量(通过itemSize进行定义),下列函数如无特别说明, 函数参数中的index会自动乘以矢量长度进行计算。 当想要处理类似向量的数据时, 可以使用在Vector2,Vector3, Vector4以及Color这些类中的.fromBufferAttribute( attribute, index ) 方法来更为便捷地处理。
构造函数
BufferAttribute( array : TypedArray, itemSize : Integer, normalized : Boolean )
- array -- 必须是 TypedArray. 类型,用于实例化缓存。
该队列应该包含:
- temSize * numVertices个元素,numVertices 是 BufferGeometry中的顶点数目
- temSize -- 队列中与顶点相关的数据值的大小。举例,如果 attribute 存储的是三元组(例如顶点空间坐标、法向量或颜色值)则itemSize的值应该是3。
- ormalized -- (可选) 指明缓存中的数据如何与GLSL代码中的数据对应。例如,如果array是 UInt16Array类型,且normalized的值是 true,则队列中的值将会从 0 - +65535 映射为 GLSL 中的 0.0f - +1.0f。 如果array是 Int16Array (有符号),则值将会从 -32768 - +32767 映射为 -1.0f - +1.0f。若 normalized 的值为 false,则数据映射不会归一化,而会直接映射为 float 值,例如,32767 将会映射为 32767.0f.
属性
- .array : TypedArray
在 array 中保存着缓存中的数据。 - .count : Integer
保存 array 除以 itemSize 之后的大小。Read-only property.
若缓存存储三元组(例如顶点位置、法向量、颜色值),则该值应等于队列中三元组的个数。 - .gpuType : Number
Configures the bound GPU type for use in shaders. Either THREE.FloatType or THREE.IntType, default is THREE.FloatType. Note: this only has an effect for integer arrays and is not configurable for float arrays. For lower precision float types, see THREE.Float16BufferAttribute. - .isBufferAttribute : Boolean
用于判断对象是否为BufferAttribute类型的只读标记. - .itemSize : Integer
保存在 array 中矢量的长度。 - .name : String
该 attribute 实例的别名,默认值为空字符串。 - .needsUpdate : Boolean
该标志位指明当前 attribute 已经被修改过,且需要再次送入 GPU 处理。当开发者改变了该队列的值,则标志位需要设置为 true。
将标志位设为 true 同样会增加 version 的值。 - .normalized : Boolean
指明缓存中数据在转化为GLSL着色器代码中数据时是否需要被归一化。详见构造函数中的说明。 - .onUploadCallback : Function
attribute 数据传输到GPU后的回调函数。 - .updateRange : Object
对象包含如下成员:
offset: 默认值为 0。 指明更新的起始位置。
count: 默认值为 -1,表示不指定更新范围。
该值只可以被用于更新某些矢量数据(例如,颜色相关数据)。 - .usage : Usage
为输入的数据定义最优的预估使用方式。等同于在WebGLRenderingContext.bufferData() 中的usage参数。默认为StaticDrawUsage。在usage constants中查看可用值。 - .version : Integer
版本号,当 needsUpdate 被设置为 true 时,该值会自增。
方法
- .applyMatrix3 ( m : Matrix3 ) : this
将矩阵m应用此BufferAttribute中的每一个Vector3元素中。 - .applyMatrix4 ( m : Matrix4 ) : this
将矩阵m应用到此BufferAttribute的每一个Vector3元素中 - .applyNormalMatrix ( m : Matrix3 ) : this
将正规矩阵m应用到此BufferAttribute的每一个Vector3元素中 - .transformDirection ( m : Matrix4 ) : this
将矩阵m应用到此BufferAttribute的每一个Vector3元素中,并将所有元素解释为方向向量。 - .clone () : BufferAttribute
返回该 BufferAttribute 的拷贝。 - .copyArray ( array ) : this
将参数中所给定的普通队列或 TypedArray 拷贝到 array 中。
拷贝 TypedArray 相关注意事项详见 TypedArray.set。 - .copyAt ( index1 : Integer, bufferAttribute : BufferAttribute, index2 : Integer ) : this
将一个矢量从 bufferAttribute[index2] 拷贝到 array[index1] 中。 - .getComponent ( index : Integer, component : Integer ) : Number
Returns the given component of the vector at the given index. - .getX ( index : Integer ) : Number
获取给定索引的矢量的第一维元素 (即 X 值)。 - .getY ( index : Integer ) : Number
获取给定索引的矢量的第二维元素 (即 Y 值)。 - .getZ ( index : Integer ) : Number
获取给定索引的矢量的第三维元素 (即 Z 值)。 - .getW ( index : Integer ) : Number
获取给定索引的矢量的第四维元素 (即 W 值)。 - .onUpload ( callback : Function ) : this
见 onUploadCallback 属性。
在 WebGL / Buffergeometry 中,该方在缓存数据传递给 GPU 后,用于释放内存。 - .set ( value : Array, offset : Integer ) : this
value -- 被拷贝的 Array 或 TypedArray 类型的数据。
offset -- (可选) array 中开始拷贝的位置索引。
对 array,调用 TypedArray.set( value, offset ) 方法。
特别的, 对将 value 转为 TypedArray 的要求详见上述链接。 - .setUsage ( value : Usage ) : this
Set usage to value. See usage constants for all possible input values. - .setComponent ( index : Integer, component : Integer, value : Float ) : Number
Sets the given component of the vector at the given index. - .setX ( index : Integer, x : Float ) : this
设置给定索引的矢量的第一维数据(设置 X 值)。 - .setY ( index : Integer, y : Float ) : this
设置给定索引的矢量的第二维数据(设置 Y 值)。 - .setZ ( index : Integer, z : Float ) : this
设置给定索引的矢量的第三维数据(设置 Z 值)。 - .setW ( index : Integer, w : Float ) : this
设置给定索引的矢量的第四维数据(设置 W 值)。 - .setXY ( index : Integer, x : Float, y : Float ) : this
设置给定索引的矢量的第一、二维数据(设置 X 和 Y 值)。 - .setXYZ ( index : Integer, x : Float, y : Float, z : Float ) : this
设置给定索引的矢量的第一、二、三维数据(设置 X、Y 和 Z 值)。 - .setXYZW ( index : Integer, x : Float, y : Float, z : Float, w : Float ) : this
设置给定索引的矢量的第一、二、三、四维数据(设置 X、Y、Z 和 W 值)。
3.2 BufferGeometry
是面片、线或点几何体的有效表述。包括顶点位置,面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。
读取或编辑 BufferGeometry 中的数据,见 BufferAttribute 文档。
构造函数
BufferGeometry()
创建一个新的 BufferGeometry. 同时将预置属性设置为默认值.
属性
-
.attributes : Object
通过 hashmap 存储该几何体相关的属性,hashmap 的 id 是当前 attribute 的名称,值是相应的 buffer。 你可以通过 .setAttribute 和 .getAttribute 添加和访问与当前几何体有关的 attribute。
-
.boundingBox : Box3
当前 bufferGeometry 的外边界矩形。可以通过 .computeBoundingBox() 计算。默认值是 null。
-
.boundingSphere : Sphere
当前 bufferGeometry 的外边界球形。可以通过 .computeBoundingSphere() 计算。默认值是 null。
-
.drawRange : Object
用于判断几何体的哪个部分需要被渲染。该值不应该直接被设置,而需要通过 .setDrawRange 进行设置。
默认值为
{ start: 0, count: Infinity }
-
.groups : Array
将当前几何体分割成组进行渲染,每个部分都会在单独的 WebGL 的 draw call 中进行绘制。该方法可以让当前的 bufferGeometry 可以使用一个材质队列进行描述。
分割后的每个部分都是一个如下的表单:
{ start: Integer, count: Integer, materialIndex: Integer }start 表明当前 draw call 中的没有索引的几何体的几何体的第一个顶点;或者第一个三角面片的索引。 count 指明当前分割包含多少顶点(或 indices)。 materialIndex 指出当前用到的材质队列的索引。
通过 .addGroup 来增加组,而不是直接更改当前队列。
-
.id : Integer
当前 bufferGeometry 的唯一编号。
-
.index : BufferAttribute
允许顶点在多个三角面片间可以重用。这样的顶点被称为"已索引的三角面片(indexed triangles)。 每个三角面片都和三个顶点的索引相关。该 attribute 因此所存储的是每个三角面片的三个顶点的索引。 如果该 attribute 没有设置过,则 renderer 假设每三个连续的位置代表一个三角面片。 默认值是 null。
-
.isBufferGeometry : Boolean
用于判断对象是否为BufferGeometry的只读标记.
-
.morphAttributes : Object
存储 BufferAttribute 的 Hashmap,存储了几何体 morph targets 的细节信息。
注意:当这个geometry渲染之后,morph attribute 数据无法更改。你需要调用.dispose(),并重新创建一个新的BufferGeometry实例。
-
.morphTargetsRelative : Boolean
用于控制morph target的行为,如果设置为 true,morph target数据作为相对的偏移量,而非绝对的位置/法向。 默认为false。
-
.name : String
当前 bufferGeometry 实例的可选别名。默认值是空字符串。
-
.userData : Object
存储 BufferGeometry 的自定义数据的对象。为保持对象在克隆时完整,该对象不应该包括任何函数的引用。
-
.uuid : String
当前对象实例的 UUID,该值会自动被分配,且不应被修改。
方法
EventDispatcher 在该类上可用的所有方法。
- .setAttribute ( name : String, attribute : BufferAttribute ) : this
为当前几何体设置一个 attribute 属性。在类的内部,有一个存储 .attributes 的 hashmap, 通过该 hashmap,遍历 attributes 的速度会更快。而使用该方法,可以向 hashmap 内部增加 attribute。 所以,你需要使用该方法来添加 attributes。 - .addGroup ( start : Integer, count : Integer, materialIndex : Integer ) : undefined
为当前几何体增加一个 group,详见 groups 属性。 - .applyMatrix4 ( matrix : Matrix4 ) : this
用给定矩阵转换几何体的顶点坐标。 - .center () : this
根据边界矩形将几何体居中。 - .clone () : BufferGeometry
克隆当前的 BufferGeometry。 - .copy ( bufferGeometry : BufferGeometry ) : this
将参数指定的 BufferGeometry 的值拷贝到当前 BufferGeometry 中。 - .clearGroups ( ) : undefined
清空所有的 groups。 - .computeBoundingBox () : undefined
计算当前几何体的的边界矩形,该操作会更新已有 [param:.boundingBox]。
边界矩形不会默认计算,需要调用该接口指定计算边界矩形,否则保持默认值 null。 - .computeBoundingSphere () : undefined
计算当前几何体的的边界球形,该操作会更新已有 [param:.boundingSphere]。
边界球形不会默认计算,需要调用该接口指定计算边界球形,否则保持默认值 null。 - .computeTangents () : undefined
计算并向此geometry中添加tangent attribute。
只支持索引化的几何体对象,并且必须拥有position(位置),normal(法向)和 uv attributes。 如果使用了切线空间法向贴图,最好使用BufferGeometryUtils.computeMikkTSpaceTangents中的MikkTSpace算法。 - .computeVertexNormals () : undefined
通过面片法向量的平均值计算每个顶点的法向量。 - .dispose () : undefined
从内存中销毁对象。
如果在运行是需要从内存中删除 BufferGeometry,则需要调用该函数。 - .getAttribute ( name : String ) : BufferAttribute
返回指定名称的 attribute。 - .getIndex () : BufferAttribute
返回缓存相关的 .index。 - .hasAttribute ( name : String ) : Boolean
检查是否存在有指定名称的attribute,如果有返回true。 - .lookAt ( vector : Vector3 ) : this
vector - 几何体所朝向的世界坐标。
旋转几何体朝向控件中的一点。该过程通常在一次处理中完成,不会循环处理。典型的 用法是过通过调用 Object3D.lookAt 实时改变 mesh 朝向。 - .normalizeNormals () : undefined
几何体中的每个法向量长度将会为 1。这样操作会更正光线在表面的效果。 - .deleteAttribute ( name : String ) : BufferAttribute
删除具有指定名称的 attribute。 - .rotateX ( radians : Float ) : this
在 X 轴上旋转几何体。该操作一般在一次处理中完成,不会循环处理。典型的用法是通过调用 Object3D.rotation 实时旋转几何体。 - .rotateY ( radians : Float ) : this
在 Y 轴上旋转几何体。该操作一般在一次处理中完成,不会循环处理。典型的用法是通过调用 Object3D.rotation 实时旋转几何体。 - .rotateZ ( radians : Float ) : this
在 Z 轴上旋转几何体。该操作一般在一次处理中完成,不会循环处理。典型的用法是通过调用 Object3D.rotation 实时旋转几何体。 - .scale ( x : Float, y : Float, z : Float ) : this
缩放几何体。该操作一般在一次处理中完成,不会循环处理。典型的用法是通过调用 Object3D.scale 实时旋转几何体。 - .setIndex ( index : BufferAttribute ) : this
设置缓存的 .index。 - .setDrawRange ( start : Integer, count : Integer ) : undefined
设置缓存的 .drawRange。详见相关属性说明。 - .setFromPoints ( points : Array ) : this
通过点队列设置该 BufferGeometry 的 attribute。 - .toJSON () : Object
返回代表该 BufferGeometry 的 JSON 对象。 - .toNonIndexed () : BufferGeometry
返回已索引的 BufferGeometry 的非索引版本。 - .translate ( x : Float, y : Float, z : Float ) : this
移动几何体。该操作一般在一次处理中完成,不会循环处理。典型的用法是通过调用 Object3D.rotation 实时旋转几何体。
3.3 Clock
该对象用于跟踪时间。如果performance.now可用,则 Clock 对象通过该方法实现,否则回落到使用略欠精准的Date.now来实现。
构造函数
Clock( autoStart : Boolean )
autoStart --- (可选) 是否要在第一次调用 .getDelta() 时自动开启时钟。默认值是 true。
属性
- .autoStart : Boolean
如果设置为 true,则在第一次调用 .getDelta() 时开启时钟。默认值是 true。 - .startTime : Float
存储时钟最后一次调用 start 方法的时间。默认值是 0。 - .oldTime : Float
存储时钟最后一次调用 start, .getElapsedTime() 或 .getDelta() 方法的时间。默认值是 0。 - .elapsedTime : Float
保存时钟运行的总时长。默认值是 0。 - .running : Boolean
判断时钟是否在运行。默认值是 false。
方法
- .start () : undefined
启动时钟。同时将 startTime 和 oldTime 设置为当前时间。 设置 elapsedTime 为 0,并且设置 running 为 true. - .stop () : undefined
停止时钟。同时将 oldTime 设置为当前时间。 - .getElapsedTime () : Float
获取自时钟启动后的秒数,同时将 .oldTime 设置为当前时间。
如果 .autoStart 设置为 true 且时钟并未运行,则该方法同时启动时钟。 - .getDelta () : Float
获取自 .oldTime 设置后到当前的秒数。 同时将 .oldTime 设置为当前时间。
如果 .autoStart 设置为 true 且时钟并未运行,则该方法同时启动时钟。
3.4 EventDispatcher
自定义对象的 JavaScript 事件。
构造函数
EventDispatcher()
创建 EventDispatcher 对象。
方法
- .addEventListener ( type : String, listener : Function ) : undefined
type - 需要添加监听的事件类型。
listener - 事件发生时被调用到的函数。
为指定事件增加监听函数。 - .hasEventListener ( type : String, listener : Function ) : Boolean
type - 需要被监听的事件类型。
listener - 事件发生时被调用到的函数。
检查监听函数是否已经添加到指定事件。 - .removeEventListener ( type : String, listener : Function ) : undefined
type - 需要移除监听的事件类型。
listener - 需要被移除的监听函数。
从指定事件类型中移除监听函数。 - .dispatchEvent ( event : Object ) : undefined
event - 将被触发的事件。
触发一个事件。
3.5 GLBufferAttribute
此缓冲区属性类不构造 VBO。相反,它使用在构造函数中传递的任何 VBO,以后可以通过 缓冲区属性进行更改。
它需要与 VBO 一起传递额外的参数。它们是:GL 上下文、GL 数据类型、每个顶点的组件数、每个组件的字节数和顶点数。
此类最常见的用例是当某种 GPGPU 计算干扰甚至产生有问题的 VBO 时。
构造方法(Constructor)
GLBufferAttribute( buffer : WebGLBuffer, type : GLenum, itemSize : Integer, elementSize : Integer, count : Integer )
- buffer --- 必须是 WebGLBuffer.
- type --- WebGL数据类型之一.
- itemSize --- 应与特定顶点关联的数组值的数量。例如,如果此属性存储一个3分量向量(例如位置、法线或颜色),则itemSize应为 3。
elementSize --- 1、2 或 4。给定的相应大小(以字节为单位)"类型"参数。
gl.FLOAT: 4
gl.UNSIGNED_SHORT: 2
gl.SHORT: 2
gl.UNSIGNED_INT: 4
gl.INT: 4
gl.BYTE: 1
gl.UNSIGNED_BYTE: 1
count --- VBO 中预期的顶点数。
特性(Properties)
- .buffer : WebGLBuffer
当前WebGLBuffer的实例. - .count : Integer
VBO 中的预期顶点数。 - .isGLBufferAttribute : Boolean
只读。值永远为"true"。 - .itemSize : Integer
每个项目(顶点)组成多少个值。 - .elementSize : Integer
存储当前类型属性值的相应大小(以字节为单位)。
有关已知类型大小的列表,请参见上面的(构造函数)。 - .name : String
该attribute实例的别名,默认值为空字符串。 - .type : GLenum
描述底层 VBO 内容的WebGL数据类型
将此属性与elementSize一起设置。推荐的方法是使用setType方法。
方法(Methods)
- .setBuffer ( buffer ) : this
设置缓冲区属性。 - .setType ( type, elementSize ) : this
设置type和elementSize属性。 - .setItemSize ( itemSize ) : this
设置itemSize属性。 - .setCount ( count ) : this
设置计数属性。 - .version : Integer
版本号,每次将needsUpdate属性设置为true时递增。 - .needsUpdate : Boolean
默认为假。将此设置为 true 增量[page:GLBufferAttribute.version 版本]
3.6 InstancedBufferAttribute
- .meshPerAttribute : Number
默认值为 1。
3.7 InstancedBufferGeometry
构造函数
InstancedBufferGeometry( )
默认构造函数没有参数。
属性
继承属性详见 BufferGeometry。
- .instanceCount : Number
默认值是 Infinity。 - .isInstancedBufferGeometry : Boolean
Read-only flag to check if a given object is of type InstancedBufferGeometry.
方法
继承方法详见 BufferGeometry。
- .copy ( source : InstancedBufferGeometry ) : this
Copies the given InstancedBufferGeometry to this instance.
3.8 InstancedInterleavedBuffer
- .meshPerAttribute : Number
默认值是 1。
3.9 InterleavedBuffer
"交叉存储" 表明多个类型的 attributes (例如,顶点位置、法向量、UV 和颜色值)被存储到一个队列中。
构造函数
InterleavedBuffer( array : TypedArray, stride : Integer )
array -- 一个基于共享缓存的类型化队列。该队列存储几何体相关数据。
stride -- 每个顶点占用类型化队列的多少个元素。
属性
- .array : Array
一个基于共享缓存的类型化队列。该队列存储几何体相关数据。 - .stride : Integer
每个顶点占用类型化队列的多少个元素。 - .count : Integer
类型化队列中,所有元素的数目。 - .updateRange : Object
对象存储着需要更新的数据的偏移量和数量。 - offset: 默认值为 0。
- count: 默认值为 -1。
- .uuid : String
该类所创建的实例的UUID。它是自动被指定的,因此它不应当被编辑、更改。 - .version : Integer
版本号,每次 needsUpdate 属性设置为 true 时,版本号增加。 - .needsUpdate : Integer
默认值为 false。该值被设置为 true 时,会导致 version 增加。 - .usage : Usage
Defines the intended usage pattern of the data store for optimization purposes. Corresponds to the usage parameter of WebGLRenderingContext.bufferData().
方法
- .copy ( source : InterleavedBuffer ) : this
将参数指定的 InterleavedBuffer 拷贝到当前 InterleavedBuffer。 - .copyAt ( index1 : Integer, attribute : InterleavedBuffer, index2 : Integer ) : this
将数据从 attribute[index2] 拷贝到 array[index1]。 - .set ( value : TypedArray, offset : Integer ) : this
value - 被拷贝的源(类型化)队列。
offset - 源队列中,数据开始拷贝的偏移量。默认值是 0.
将源队列数据拷贝到目标队列缓存中。 - .clone ( data : Object ) : InterleavedBuffer
data - This object holds shared array buffers required for properly cloning geometries with interleaved attributes.
Creates a clone of this InterleavedBuffer. - .setUsage ( value : Usage ) : this
Set usage to value. - .toJSON ( data : Object ) : Object
data - This object holds shared array buffers required for properly serializing geometries with interleaved attributes.
3.10 InterleavedBufferAttribute
构造函数
InterleavedBufferAttribute( interleavedBuffer : InterleavedBuffer, itemSize : Integer, offset : Integer, normalized : Boolean )
属性
- .data : InterleavedBuffer
传入构造函数的 InterleavedBuffer 实例。 - .array : TypedArray
data.array 的值。 - .count : Integer
data.count 的值。 所缓存的矢量的个数。如果缓存的矢量是一个三元组(例如,位置、法向量或颜色),则该值计算上述三元组的个数。 - .isInterleavedBufferAttribute : Boolean
Read-only flag to check if a given object is of type InterleavedBufferAttribute. - .itemSize : Integer
队列中每个矢量有多少个元素构成。 - .name : String
Optional name for this attribute instance. Default is an empty string. - .needsUpdate : Boolean
Default is false. Setting this to true will send the entire interleaved buffer (not just the specific attribute data) to the GPU again. - .normalized : Boolean
默认值为 false。 - .offset : Integer
缓存队列中每个元素的起始位置的偏移量。
方法
- .applyMatrix4 ( m : Matrix4 ) : this
Applies matrix m to every Vector3 element of this InterleavedBufferAttribute. - .applyNormalMatrix ( m : Matrix3 ) : this
Applies normal matrix m to every Vector3 element of this InterleavedBufferAttribute. - .transformDirection ( m : Matrix4 ) : this
Applies matrix m to every Vector3 element of this InterleavedBufferAttribute, interpreting the elements as a direction vectors. - .getX ( index : Integer ) : Number
返回给定索引矢量的第一个元素 (X 值)。 - .getY ( index : Integer ) : Number
返回给定索引矢量的第二个元素 (Y 值)。 - .getZ ( index : Integer ) : Number
返回给定索引矢量的第三个元素 (Z 值)。 - .getW ( index : Integer ) : Number
返回给定索引矢量的第四个元素 (W 值)。 - .setX ( index : Integer, x : Float ) : this
通过给定参数,设置指定索引矢量的第一个元素 (X 值)。 - .setY ( index : Integer, y : Float ) : this
通过给定参数,设置指定索引矢量的第二个元素 (Y 值)。 - .setZ ( index : Integer, z : Float ) : this
通过给定参数,设置指定索引矢量的第三个元素 (Z 值)。 - .setW ( index : Integer, w : Float ) : this
通过给定参数,设置指定索引矢量的第四个元素 (W 值)。 - .setXY ( index : Integer, x : Float, y : Float ) : this
通过给定参数,设置指定索引矢量的第一、二个元素 (X 和 Y 值)。 - .setXYZ ( index : Integer, x : Float, y : Float, z : Float ) : this
通过给定参数,设置指定索引矢量的第一、二、三个元素 (X Y 和 Z 值)。 - .setXYZW ( index : Integer, x : Float, y : Float, z : Float, w : Float ) : this
通过给定参数,设置指定索引矢量的第一、二、三、四个元素 (X Y Z 和 W 值)。
3.11 Layers
Layers 对象为 Object3D 分配 1个到 32 个图层。32个图层从 0 到 31 编号标记。 在内部实现上,每个图层对象被存储为一个 bit mask, 默认的,所有 Object3D 对象都存储在第 0 个图层上。
图层对象可以用于控制对象的显示。当 camera 的内容被渲染时与其共享图层相同的物体会被显示。每个对象都需要与一个 camera 共享图层。
每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。
构造函数
Layers()
创建一个新的图层对象,该对象默认与第 0 图层关联。
属性
- .mask : Integer
用 bit mask 表示当前图层对象与 0 - 31 中的哪些图层相对应。所属层所对应的比特位为 1,其他位位 0。
方法
- .disable ( layer : Integer ) : undefined
layer - 一个 0 - 31 的整数。
删除图层对象与参数指定图层的对应关系。 - .enable ( layer : Integer ) : undefined
layer - 一个 0 - 31 的整数。
增加图层对象与参数指定图层的对应关系。 - .set ( layer : Integer ) : undefined
layer - 一个 0 - 31 的整数。
删除图层对象已有的所有对应关系,增加与参数指定的图层的对应关系。 - .test ( layers : Layers ) : Boolean
layers - 一个图层对象。
如果传入图层对象与当前对象属于相同的一组图层,则返回 true,否则返回 false。 - .isEnabled ( layer : Integer ) : Boolean
layer - an integer from 0 to 31.
Returns true if the given layer is enabled. - .toggle ( layer : Integer ) : undefined
layer - 一个 0 - 31 的整数。
根据参数切换对象所属图层。 - .enableAll () : undefined
Add membership to all layers. - .disableAll () : undefined
Remove membership from all layers.
3.12 三维物体(Object3D)
这是Three.js中大部分对象的基类,提供了一系列的属性和方法来对三维空间中的物体进行操纵。
请注意,可以通过.add( object )方法来将对象进行组合,该方法将对象添加为子对象,但为此最好使用Group(来作为父对象)。
构造器
Object3D()
构造器中不带有参数。
属性
- .animations : AnimationClip
三维物体所属的动画剪辑数组. - .castShadow : Boolean
对象是否被渲染到阴影贴图中。默认值为false。 - .children : Array
含有对象的子级的数组。请参阅Group来了解将手动对象进行分组的相关信息。 - .customDepthMaterial : Material
在渲染到深度图的时候所用的自定义深度材质。 只能在网格中使用。 当使用DirectionalLight(平行光)或者SpotLight(聚光灯光)生成影子的时候, 如果你调整过顶点着色器中的顶点位置,就需要定义一个自定义深度材质来生成正确的影子。默认为undefined. - .customDistanceMaterial : Material
与customDepthMaterial相同,但与PointLight(点光源)一起使用。默认值为undefined。 - .frustumCulled : Boolean
当这个设置了的时候,每一帧渲染前都会检测这个物体是不是在相机的视椎体范围内。 如果设置为false 物体不管是不是在相机的视椎体范围内都会渲染。默认为true。 - .id : Integer
只读 ------ 表示该对象实例ID的唯一数字。 - .isObject3D : Boolean
查看所给对象是不是Object3D类型的只读标记. - .layers : Layers
物体的层级关系。 物体只有和一个正在使用的Camera至少在同一个层时才可见。当使用Raycaster进行射线检测的时候此项属性可以用于过滤不参与检测的物体. - .matrix : Matrix4
局部变换矩阵。 - .matrixAutoUpdate : Boolean
当这个属性设置了之后,它将计算每一帧的位移、旋转(四元变换)和缩放矩阵,并重新计算matrixWorld属性。默认值是Object3D.DEFAULT_MATRIX_AUTO_UPDATE (true)。 - .matrixWorld : Matrix4
物体的世界变换。若这个Object3D没有父级,则它将和local transform .matrix(局部变换矩阵)相同。 - .matrixWorldAutoUpdate : Boolean
默认为 true. 当设置的时候,渲染器在每一帧都会检查物体自身以及它的自带是否需要更新世界变换矩阵。 如果不需要的话它自身以及它的子代的所有世界变换矩阵都需要你来维护。 - .matrixWorldNeedsUpdate : Boolean
当这个属性设置了之后,它将计算在那一帧中的matrixWorld,并将这个值重置为false。默认值为false。 - .modelViewMatrix : Matrix4
这个值传递给着色器,用于计算物体的位置。 - .name : String
对象的名称,可选、不必唯一。默认值是一个空字符串。 - .normalMatrix : Matrix3
这个值传递给着色器,用于计算物体的光照。 它是物体的modelViewMatrix矩阵中,左上角3x3子矩阵的逆的转置矩阵。
使用这个特殊矩阵的原因,是只需使用modelViewMatrix就可以得出一个法线(缩放时)的非单位长度或者非垂直的方向(不规则缩放时)。
另一方面,modelViewMatrix矩阵中的位移部分和法线的计算无关,因此Matrix3就已经足够了。 - .onAfterRender : Function
一个可选的回调函数,在Object3D渲染之后直接执行。 使用以下参数来调用此函数:renderer,scene,camera,geometry,material,group。
注意此回调函数只会在可渲染的3D物体上执行。可渲染的3D物体指的是那种拥有视觉表现的、定义了几何体与材质的物体,例如像是Mesh、Line、Points 或者Sprite。 Object3D、 Group 或者 Bone 这些是不可渲染的物体,因此此回调函数不会在这样的物体上执行。 - .onBeforeRender : Function
一个可选的回调函数,在Object3D渲染之前直接执行。 使用以下参数来调用此函数:renderer,scene,camera,geometry,material,group。
注意此回调函数只会在可渲染的3D物体上执行。可渲染的3D物体指的是那种拥有视觉表现的、定义了几何体与材质的物体,例如像是Mesh、Line、Points 或者Sprite。 Object3D、 Group 或者 Bone 这些是不可渲染的物体,因此此回调函数不会在这样的物体上执行。 - .parent : Object3D
在scene graph(场景图)中,一个对象的父级对象。 一个对象最多仅能有一个父级对象。 - .position : Vector3
表示对象局部位置的Vector3。默认值为(0, 0, 0)。 - .quaternion : Quaternion
表示对象局部旋转的Quaternion(四元数)。 - .receiveShadow : Boolean
材质是否接收阴影。默认值为false。 - .renderOrder : Number
这个值将使得scene graph(场景图)中默认的的渲染顺序被覆盖, 即使不透明对象和透明对象保持独立顺序。 渲染顺序是由低到高来排序的,默认值为0。 - .rotation : Euler
物体的局部旋转,以弧度来表示。(请参阅Euler angles-欧拉角) - .scale : Vector3
物体的局部缩放。默认值是Vector3( 1, 1, 1 )。 - .up : Vector3
这个属性由lookAt方法所使用,例如,来决定结果的朝向。 默认值是Object3D.DEFAULT_UP,即( 0, 1, 0 )。 - .userData : Object
一个用于存储Object3D自定义数据的对象。 它不应当包含对函数的引用,因为这些函数将不会被克隆。 - .uuid : String
该对象实例的UUID。 这是一个自动生成的值,不应当对其进行修改。 - .visible : Boolean
可见性。这个值为true时,物体将被渲染。默认值为true。
静态属性
静态属性和方法由每个类所定义,并非由每个类的实例所定义。 也就是说,改变Object3D.DEFAULT_UP或Object3D.DEFAULT_MATRIX_AUTO_UPDATE的值, 将改变每个在此之后由Object3D类(或派生类)创建的实例中的up和matrixAutoUpdate的值。(已经创建好的Object3D不会受到影响)。
- .DEFAULT_UP : Vector3
默认的物体的up方向,同时也作为DirectionalLight、HemisphereLight和Spotlight(自顶向下创建的灯光)的默认方向。 默认设为( 0, 1, 0 )。 - .DEFAULT_MATRIX_AUTO_UPDATE : Boolean
matrixAutoUpdate的默认设置,用于新创建的Object3D。 - .DEFAULT_MATRIX_WORLD_AUTO_UPDATE : Boolean
matrixWorldAutoUpdate的默认设置,用于新创建的Object3D。
方法
EventDispatcher 在该类上可用的所有方法。
- .add ( object : Object3D, ... ) : this
添加对象到这个对象的子级,可以添加任意数量的对象。 当前传入的对象中的父级将在这里被移除,因为一个对象仅能有一个父级。
请参阅Group来查看手动编组对象的相关信息。 - .applyMatrix4 ( matrix : Matrix4 ) : undefined
对当前物体应用这个变换矩阵,并更新物体的位置、旋转和缩放。 - .applyQuaternion ( quaternion : Quaternion ) : this
对当前物体应用由四元数所表示的变换。 - .attach ( object : Object3D ) : this
将object作为子级来添加到该对象中,同时保持该object的世界变换。 - .clone ( recursive : Boolean ) : Object3D
recursive ------ 如果值为true,则该物体的后代也会被克隆。默认值为true。
返回对象前物体的克隆(以及可选的所有后代)。 - .copy ( object : Object3D, recursive : Boolean ) : this
recursive ------ 如果值为true,则该物体的后代也会被复制。默认值为true。
复制给定的对象到这个对象中。 请注意,事件监听器和用户定义的回调函数(.onAfterRender 和 .onBeforeRender)不会被复制。 - .getObjectById ( id : Integer ) : Object3D
id ------ 标识该对象实例的唯一数字。
从该对象开始,搜索一个对象及其子级,返回第一个带有匹配id的子对象。
请注意,id是按照时间顺序来分配的:1、2、3、......,每增加一个新的对象就自增1。 - .getObjectByName ( name : String ) : Object3D
name ------ 用于来匹配子物体中Object3D.name属性的字符串。
从该对象开始,搜索一个对象及其子级,返回第一个带有匹配name的子对象。
请注意,大多数的对象中name默认是一个空字符串,要使用这个方法,你将需要手动地设置name属性。 - .getObjectByProperty ( name : String, value : Any ) : Object3D
name ------ 将要用于查找的属性的名称。
value ------ 给定的属性的值。
从该对象开始,搜索一个对象及其子级,返回第一个给定的属性中包含有匹配的值的子对象。 - .getObjectsByProperty ( name : String, value : Any ) : Object3D
name ------ 将要用于查找的属性的名称。
value ------ 给定的属性的值。
从此对象开始,搜索一个对象及其子对象,返回包含给定属性的匹配值的所有子对象。 - .getWorldPosition ( target : Vector3 ) : Vector3
target --- 结果将被复制到这个Vector3中。
返回一个表示该物体在世界空间中位置的矢量。 - .getWorldQuaternion ( target : Quaternion ) : Quaternion
target --- 结果将被复制到这个Quaternion中。
返回一个表示该物体在世界空间中旋转的四元数。 - .getWorldScale ( target : Vector3 ) : Vector3
target --- 结果将被复制到这个Vector3中。
返回一个包含着该物体在世界空间中各个轴向上所应用的缩放因数的矢量。 - .getWorldDirection ( target : Vector3 ) : Vector3
target --- 结果将被复制到这个Vector3中。
返回一个表示该物体在世界空间中Z轴正方向的矢量。 - .localToWorld ( vector : Vector3 ) : Vector3
vector - 一个表示在该物体局部空间中位置的向量。
将该向量从物体的局部空间转换到世界空间。 - .lookAt ( vector : Vector3 ) : undefined
- .lookAt ( x : Float, y : Float, z : Float ) : undefined
vector - 一个表示世界空间中位置的向量。
也可以使用世界空间中x、y和z的位置分量。
旋转物体使其在世界空间中面朝一个点。
这一方法不支持其父级被旋转过或者被位移过的物体。 - .raycast ( raycaster : Raycaster, intersects : Array ) : undefined
抽象(空方法),在一条被投射出的射线与这个物体之间获得交点。 在一些子类,例如Mesh, Line, and Points实现了这个方法,以用于光线投射。 - .remove ( object : Object3D, ... ) : this
从当前对象的子级中移除对象。可以移除任意数量的对象。 - .removeFromParent () : this
Removes this object from its current parent. - .rotateOnAxis ( axis : Vector3, angle : Float ) : this
axis ------ 一个在局部空间中的标准化向量。
angle ------ 角度,以弧度来表示。
在局部空间中绕着该物体的轴来旋转一个物体,假设这个轴已被标准化。 - .rotateOnWorldAxis ( axis : Vector3, angle : Float ) : this
axis -- 一个在世界空间中的标准化向量。
angle -- 角度,以弧度来表示。
在世界空间中绕着该物体的轴来旋转一个物体,假设这个轴已被标准化。 方法假设该物体没有旋转过的父级。 - .rotateX ( rad : Float ) : this
rad - 将要旋转的角度(以弧度来表示)。
绕局部空间的X轴旋转这个物体。 - .rotateY ( rad : Float ) : this
rad - 将要旋转的角度(以弧度来表示)。
绕局部空间的Y轴旋转这个物体。 - .rotateZ ( rad : Float ) : this
rad - 将要旋转的角度(以弧度来表示)。
绕局部空间的Z轴旋转这个物体。 - .setRotationFromAxisAngle ( axis : Vector3, angle : Float ) : undefined
axis -- 一个在局部空间中的标准化向量。
angle -- 角度(以弧度来表示)。
调用.quaternion中的setFromAxisAngle( axis, angle )。 - .setRotationFromEuler ( euler : Euler ) : undefined
euler -- 指定了旋转量的欧拉角。
调用.quaternion中的setRotationFromEuler( euler)。 - .setRotationFromMatrix ( m : Matrix4 ) : undefined
m -- 通过该矩阵中的旋转分量来旋转四元数。
调用.quaternion中的setFromRotationMatrix( m)。
请注意,这里假设m上的3x3矩阵是一个纯旋转矩阵(即未缩放的矩阵)。 - .setRotationFromQuaternion ( q : Quaternion ) : undefined
q -- 标准化的四元数。
将所给的四元数复制到.quaternion中。 - .toJSON ( meta : Object ) : Object
meta -- 包含有元数据的对象,例如该对象的材质、纹理或图片。 将对象转换为 three.js JSON Object/Scene format(three.js JSON 物体/场景格式)。 - .translateOnAxis ( axis : Vector3, distance : Float ) : this
axis -- 一个在局部空间中的标准化向量。
distance -- 将要平移的距离。
在局部空间中沿着一条轴来平移物体,假设轴已被标准化。 - .translateX ( distance : Float ) : this
沿着X轴将平移distance个单位。 - .translateY ( distance : Float ) : this
沿着Y轴将平移distance个单位。 - .translateZ ( distance : Float ) : this
沿着Z轴将平移distance个单位。 - .traverse ( callback : Function ) : undefined
callback - 以一个object3D对象作为第一个参数的函数。
在对象以及后代中执行的回调函数。 - .traverseVisible ( callback : Function ) : undefined
callback - 以一个object3D对象作为第一个参数的函数。
类似traverse函数,但在这里,回调函数仅对可见的对象执行,不可见对象的后代将不遍历。 - .traverseAncestors ( callback : Function ) : undefined
callback - 以一个object3D对象作为第一个参数的函数。
在所有的祖先中执行回调函数。 - .updateMatrix () : undefined
更新局部变换。 - .updateMatrixWorld ( force : Boolean ) : undefined
更新物体及其后代的全局变换。 - .updateWorldMatrix ( updateParents : Boolean, updateChildren : Boolean ) : undefined
updateParents - 递归更新物体的所有祖先的全局变换.
updateChildren - 递归更新物体的所有后代的全局变换.
更新物体的全局变换。 - .worldToLocal ( vector : Vector3 ) : Vector3
vector - 一个表示在世界空间中位置的向量。
将该向量从世界空间转换到物体的局部空间。
3.13 光线投射Raycaster
这个类用于进行raycasting(光线投射)。 光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)。
构造器
Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
- origin ------ 光线投射的原点向量。
- direction ------ 向射线提供方向的方向向量,应当被标准化。
- near ------ 返回的所有结果比near远。near不能为负值,其默认值为0。
- far ------ 返回的所有结果都比far近。far不能小于near,其默认值为Infinity(正无穷。)
这将创建一个新的raycaster对象。
属性
- .far : Float
raycaster的远距离因数(投射远点)。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负,并且应当比near属性大。 - .near : Float
raycaster的近距离因数(投射近点)。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。 这个值不应当为负,并且应当比far属性小。 - .camera : Camera
The camera to use when raycasting against view-dependent objects such as billboarded objects like Sprites. This field can be set manually or is set when calling "setFromCamera". Defaults to null. - .layers : Layers
Used by Raycaster to selectively ignore 3D objects when performing intersection tests. The following code example ensures that only 3D objects on layer 1 will be honored by the instance of Raycaster.
raycaster.layers.set( 1 );
object.layers.enable( 1 ); - .params : Object
具有以下属性的对象:
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}Where threshold is the precision of the raycaster when intersecting objects, in world units. - .ray : Ray
用于进行光线投射的Ray(射线)。
方法
- .set ( origin : Vector3, direction : Vector3 ) : undefined
origin ------ 光线投射的原点向量。
direction ------ 为光线提供方向的标准化方向向量。
使用一个新的原点和方向来更新射线。 - .setFromCamera ( coords : Vector2, camera : Camera ) : undefined
coords ------ 在标准化设备坐标中鼠标的二维坐标 ------ X分量与Y分量应当在-1到1之间。
camera ------ 射线所来源的摄像机。
使用一个新的原点和方向来更新射线。 - .intersectObject ( object : Object3D, recursive : Boolean, optionalTarget : Array ) : Array
object ------ 检查与射线相交的物体。
recursive ------ 若为true,则同时也会检查所有的后代。否则将只会检查对象本身。默认值为true。
optionalTarget --- (可选)设置结果的目标数组。如果不设置这个值,则一个新的Array会被实例化;如果设置了这个值,则在每次调用之前必须清空这个数组(例如:array.length = 0;)。
检测所有在射线与物体之间,包括或不包括后代的相交部分。返回结果时,相交部分将按距离进行排序,最近的位于第一个。
该方法返回一个包含有交叉部分的数组:{ distance, point, face, faceIndex, object }, ...
distance ------ 射线投射原点和相交部分之间的距离。
point ------ 相交部分的点(世界坐标)
face ------ 相交的面
faceIndex ------ 相交的面的索引
object ------ 相交的物体
uv ------ 相交部分的点的UV坐标。
uv1 ------ Second set of U,V coordinates at point of intersection
normal - 交点处的内插法向量
instanceId -- The index number of the instance where the ray intersects the InstancedMesh
当计算这条射线是否和物体相交的时候,Raycaster将传入的对象委托给raycast方法。 这将可以让mesh对于光线投射的响应不同于lines和pointclouds。
请注意:对于网格来说,面必须朝向射线的原点,以便其能够被检测到。 用于交互的射线穿过面的背侧时,将不会被检测到。如果需要对物体中面的两侧进行光线投射, 你需要将material中的side属性设置为THREE.DoubleSide。 - .intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array
objects ------ 检测和射线相交的一组物体。
recursive ------ 若为true,则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为true。
optionalTarget ------ (可选)设置结果的目标数组。如果不设置这个值,则一个新的Array会被实例化;如果设置了这个值,则在每次调用之前必须清空这个数组(例如:array.length = 0;)。
检测所有在射线与这些物体之间,包括或不包括后代的相交部分。返回结果时,相交部分将按距离进行排序,最近的位于第一个),相交部分和.intersectObject所返回的格式是相同的。
3.14 Uniform
Uniforms 是 GLSL 着色器中的全局变量。
构造函数
Uniform( value : Object )
value -- 包含需要设置 Uniform 数据的对象。 数据类型必须是上述类型中的一种。
属性
- .value : Object
当前 uniform 的值。
方法
- .clone () : Uniform
返回该 Uniform 的克隆。
如果 Uniform 的 value 属性是一个带 clone() 方法的 Object,则克隆该对象时,value 的 clone() 方法也会被调用,否则克隆时只会使用赋值语句。 队列中的值会在该 Uniform 和 被克隆对象间共享。
3.15 BufferAttribute Types
在 three.js 中一共有 9 种 BufferAttribute。每种和 JavaScript 中的类型相对应。 Typed Arrays.
- THREE.Float64BufferAttribute
- THREE.Float32BufferAttribute
- THREE.Float16BufferAttribute
- THREE.Uint32BufferAttribute
- THREE.Int32BufferAttribute
- THREE.Uint16BufferAttribute
- THREE.Int16BufferAttribute
- THREE.Uint8ClampedBufferAttribute
- THREE.Uint8BufferAttribute
- THREE.Int8BufferAttribute
构造函数
所有上述内容都以相同的方式调用。
TypedBufferAttribute( array : Array, itemSize : Integer, normalized : Boolean )
- array -- 该值可以是类型化或非类型化的(普通)数组。 它将被转换为指定的类型。 If a length is given a new TypedArray will created, initialized with all elements set to zero.
- itemSize -- 应与特定顶点关联的数组值的数量。
- normalized -- (可选)表示缓冲区中的基础数据如何映射到GLSL代码中的值。
四. 特殊技巧
五、
4.1 按需渲染
有些场景连续渲染是有意义的, 但是有些情况下不需要一直动呢? 这种情况下不断地渲染会浪费电, 对于移动设备来说属实不能接受。
显而易见的解决方法是一开始的时候渲染一次, 只有当什么东西改变了以后再次渲染. 这种改变包括纹理的变化, 或者再入了模型, 其他源传来了什么数据, 用户调整了设置或者是动了摄像机。
4.2 调试 JavaScript
4.3 canvas截图
取决于你的浏览器与系统的不同这个例子也有可能会正常生效,但是一般情况下这个例子是无法正常生效的。
这个问题的出现是因为基于性能和兼容性的考量,默认情况下浏览器会在绘制完成后清除WebGL canvas的缓存。
解决方案是在你捕获截图前调用一次渲染代码。
4.4 防止canvas被清空
如果你想要让用户使用动画对象进行绘图。你需要在创建 WebGLRenderer 的时候传入 preserveDrawingBuffer: true。这将阻止浏览器清理canvas。类似的,你也需要告诉three.js不要自动清理canvas。
4.5 获取键盘输入
为了获取键盘事件,我们将canvas的 tabindex 属性设置为0或更高。
4.6 透明化canvas
默认情况下THREE.js让canvas显示为不透明。如果你需要让canvas变得透明可以在创建 WebGLRenderer 的时候传入 alpha:true
Three.js 使用 premultipliedAlpha: true 作为canvas的缺省值,但使用 premultipliedAlpha: false 作为材质的缺省值。
注意 pointer-events: none 使得canvas不响应鼠标与触摸事件,以至于你能够选中下面的文字。
4.7 使用three.js动画作为背景
五. 优化
5.1 大量对象的优化
three.js的优化有很多种方式. 常见的一种叫做合并几何体. 每一个你创建的Mesh代表一个(或多个)请求系统渲染的命令. 即便是画出来的结果一样, 画两个几何体总是比画一个要费时费力. 所以最好的方式就是将这些mesh合并起来.
5.2 优化对象的同时保持动画效果
在上一章中, 我们合并了19000个对象到一个几何体中. 这带来的好处是优化掉19000次绘制操作但是缺点是没有办法再单独操作某一个了.
根据我们想达成的目标的不同, 有不同的解决方案可选. 本例中我们绘制大量的数据, 然后还能在这些数据集间设置动画
第一件事是获取数据集. 理想中我们可能需要预处理这些数据, 但是我们现在只需要载入两个数据集然后产生更多的.
5.3 离屏渲染
OffscreenCanvas 是一个相对较新的浏览器功能,目前仅在Chrome可用,但显然未来会适用到别的浏览器上。 OffscreenCanvas 允许使用Web Worker去渲染画布,这是一种减轻繁重复杂工作的方法,比如把渲染一个复杂的3D场景交给一个Web Worker,避免减慢浏览器的响应速度。它也意味着数据在Worker中加载和解析,因此可能会减少页面加载时的卡顿。