@types/three

Version 0.182.0
Published 1 month ago
1.67 MB
7 dependencies
MIT license

Install

npm i @types/three

yarn add @types/three

pnpm add @types/three

Overview

TypeScript definitions for three

Index

Variables

variable ACESFilmicToneMapping

const ACESFilmicToneMapping: number;

variable AddEquation

const AddEquation: number;

variable AdditiveAnimationBlendMode

const AdditiveAnimationBlendMode: number;

variable AdditiveBlending

const AdditiveBlending: number;

variable AddOperation

const AddOperation: number;

variable AgXToneMapping

const AgXToneMapping: number;

variable AlphaFormat

const AlphaFormat: number;

AlphaFormat discards the red, green and blue components and reads just the alpha component.

variable AlwaysCompare

const AlwaysCompare: number;

variable AlwaysDepth

const AlwaysDepth: number;

variable AlwaysStencilFunc

const AlwaysStencilFunc: number;

variable AttachedBindMode

const AttachedBindMode: string;

variable BackSide

const BackSide: number;

variable BasicDepthPacking

const BasicDepthPacking: number;

variable BasicShadowMap

const BasicShadowMap: number;

variable ByteType

const ByteType: number;

variable Cache

const Cache: {
    enabled: boolean;
    files: any;
    add(key: string, file: any): void;
    get(key: string): any;
    remove(key: string): void;
    clear(): void;
};

variable CineonToneMapping

const CineonToneMapping: number;

variable ClampToEdgeWrapping

const ClampToEdgeWrapping: number;

With ClampToEdgeWrapping the last pixel of the texture stretches to the edge of the mesh.
Remarks
This is the _default_ value and behaver for Wrapping Mapping.

variable ColorManagement

const ColorManagement: ColorManagement;

variable ConstantAlphaFactor

const ConstantAlphaFactor: number;

variable ConstantColorFactor

const ConstantColorFactor: number;

variable CubeReflectionMapping

const CubeReflectionMapping: number;

Remarks
This is the _default_ value and behaver for Cube Texture Mapping.

variable CubeRefractionMapping

const CubeRefractionMapping: number;

variable CubeUVReflectionMapping

const CubeUVReflectionMapping: number;

variable CullFaceBack

const CullFaceBack: number;

variable CullFaceFront

const CullFaceFront: number;

variable CullFaceFrontBack

const CullFaceFrontBack: number;

variable CullFaceNone

const CullFaceNone: number;

variable CustomBlending

const CustomBlending: number;

variable CustomToneMapping

const CustomToneMapping: number;

variable DecrementStencilOp

const DecrementStencilOp: number;

variable DecrementWrapStencilOp

const DecrementWrapStencilOp: number;

variable DefaultLoadingManager

const DefaultLoadingManager: LoadingManager;

variable DepthFormat

const DepthFormat: number;

DepthFormat reads each element as a single depth value, converts it to floating point, and clamps to the range [0,1].
Remarks
This is the default for THREE.DepthTexture.

variable DepthStencilFormat

const DepthStencilFormat: number;

DepthStencilFormat reads each element is a pair of depth and stencil values. The depth component of the pair is interpreted as in DepthFormat. The stencil component is interpreted based on the depth + stencil internal format.

variable DetachedBindMode

const DetachedBindMode: string;

variable DoubleSide

const DoubleSide: number;

variable DstAlphaFactor

const DstAlphaFactor: number;

variable DstColorFactor

const DstColorFactor: number;

variable DynamicCopyUsage

const DynamicCopyUsage: number;

variable DynamicDrawUsage

const DynamicDrawUsage: number;

variable DynamicReadUsage

const DynamicReadUsage: number;

variable EqualCompare

const EqualCompare: number;

variable EqualDepth

const EqualDepth: number;

variable EqualStencilFunc

const EqualStencilFunc: number;

variable EquirectangularReflectionMapping

const EquirectangularReflectionMapping: number;

variable EquirectangularRefractionMapping

const EquirectangularRefractionMapping: number;

variable FloatType

const FloatType: number;

variable FrontSide

const FrontSide: number;

variable GLSL1

const GLSL1: string;

variable GLSL3

const GLSL3: string;

variable GreaterCompare

const GreaterCompare: number;

variable GreaterDepth

const GreaterDepth: number;

variable GreaterEqualCompare

const GreaterEqualCompare: number;

variable GreaterEqualDepth

const GreaterEqualDepth: number;

variable GreaterEqualStencilFunc

const GreaterEqualStencilFunc: number;

variable GreaterStencilFunc

const GreaterStencilFunc: number;

variable HalfFloatType

const HalfFloatType: number;

variable IncrementStencilOp

const IncrementStencilOp: number;

variable IncrementWrapStencilOp

const IncrementWrapStencilOp: number;

variable InterpolateDiscrete

const InterpolateDiscrete: number;

variable InterpolateLinear

const InterpolateLinear: number;

variable InterpolateSmooth

const InterpolateSmooth: number;

variable InterpolationSamplingMode

const InterpolationSamplingMode: {
    NORMAL: 'normal';
    CENTROID: 'centroid';
    SAMPLE: 'sample';
    FIRST: 'first';
    EITHER: 'either';
};

variable InterpolationSamplingType

const InterpolationSamplingType: {
    PERSPECTIVE: 'perspective';
    LINEAR: 'linear';
    FLAT: 'flat';
};

variable IntType

const IntType: number;

variable InvertStencilOp

const InvertStencilOp: number;

variable KeepStencilOp

const KeepStencilOp: number;

variable LessCompare

const LessCompare: number;

variable LessDepth

const LessDepth: number;

variable LessEqualCompare

const LessEqualCompare: number;

variable LessEqualDepth

const LessEqualDepth: number;

variable LessEqualStencilFunc

const LessEqualStencilFunc: number;

variable LessStencilFunc

const LessStencilFunc: number;

variable LinearFilter

const LinearFilter: number;

LinearFilter returns the weighted average of the four texture elements that are closest to the specified texture coordinates, and can include items wrapped or repeated from other parts of a texture, depending on the values of wrapS and wrapT, and on the exact mapping.

variable LinearMipmapLinearFilter

const LinearMipmapLinearFilter: number;

LinearMipmapLinearFilter is the default and chooses the two mipmaps that most closely match the size of the pixel being textured and uses the LinearFilter criterion to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.

variable LinearMipMapLinearFilter

const LinearMipMapLinearFilter: number;

LinearMipMapLinearFilter is the default and chooses the two mipmaps that most closely match the size of the pixel being textured and uses the LinearFilter criterion to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.

variable LinearMipmapNearestFilter

const LinearMipmapNearestFilter: number;

LinearMipmapNearestFilter chooses the mipmap that most closely matches the size of the pixel being textured and uses the LinearFilter criterion (a weighted average of the four texels that are closest to the center of the pixel) to produce a texture value.

variable LinearMipMapNearestFilter

const LinearMipMapNearestFilter: number;

LinearMipMapNearestFilter chooses the mipmap that most closely matches the size of the pixel being textured and uses the LinearFilter criterion (a weighted average of the four texels that are closest to the center of the pixel) to produce a texture value.

variable LinearSRGBColorSpace

const LinearSRGBColorSpace: string;

variable LinearToneMapping

const LinearToneMapping: number;

variable LinearTransfer

const LinearTransfer: string;

variable LoopOnce

const LoopOnce: number;

variable LoopPingPong

const LoopPingPong: number;

variable LoopRepeat

const LoopRepeat: number;

variable MathUtils

const MathUtils: {
    DEG2RAD: typeof DEG2RAD;
    RAD2DEG: typeof RAD2DEG;
    generateUUID: typeof generateUUID;
    clamp: typeof clamp;
    euclideanModulo: typeof euclideanModulo;
    mapLinear: typeof mapLinear;
    inverseLerp: typeof inverseLerp;
    lerp: typeof lerp;
    damp: typeof damp;
    pingpong: typeof pingpong;
    smoothstep: typeof smoothstep;
    smootherstep: typeof smootherstep;
    randInt: typeof randInt;
    randFloat: typeof randFloat;
    randFloatSpread: typeof randFloatSpread;
    seededRandom: typeof seededRandom;
    degToRad: typeof degToRad;
    radToDeg: typeof radToDeg;
    isPowerOfTwo: typeof isPowerOfTwo;
    ceilPowerOfTwo: typeof ceilPowerOfTwo;
    floorPowerOfTwo: typeof floorPowerOfTwo;
    setQuaternionFromProperEuler: typeof setQuaternionFromProperEuler;
    normalize: typeof normalize;
    denormalize: typeof denormalize;
};

variable MaxEquation

const MaxEquation: number;

variable MinEquation

const MinEquation: number;

variable MirroredRepeatWrapping

const MirroredRepeatWrapping: number;

With MirroredRepeatWrapping the texture will repeats to infinity, mirroring on each repeat.

variable MixOperation

const MixOperation: number;

variable MultiplyBlending

const MultiplyBlending: number;

variable MultiplyOperation

const MultiplyOperation: number;

variable NearestFilter

const NearestFilter: number;

NearestFilter returns the value of the texture element that is nearest (in Manhattan distance) to the specified texture coordinates.

variable NearestMipmapLinearFilter

const NearestMipmapLinearFilter: number;

NearestMipmapLinearFilter chooses the two mipmaps that most closely match the size of the pixel being textured and uses the NearestFilter criterion to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.

variable NearestMipMapLinearFilter

const NearestMipMapLinearFilter: number;

NearestMipMapLinearFilter chooses the two mipmaps that most closely match the size of the pixel being textured and uses the NearestFilter criterion to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.

variable NearestMipmapNearestFilter

const NearestMipmapNearestFilter: number;

NearestMipmapNearestFilter chooses the mipmap that most closely matches the size of the pixel being textured and uses the NearestFilter criterion (the texel nearest to the center of the pixel) to produce a texture value.

variable NearestMipMapNearestFilter

const NearestMipMapNearestFilter: number;

NearestMipmapNearestFilter chooses the mipmap that most closely matches the size of the pixel being textured and uses the NearestFilter criterion (the texel nearest to the center of the pixel) to produce a texture value.

variable NeutralToneMapping

const NeutralToneMapping: number;

variable NeverCompare

const NeverCompare: number;

variable NeverDepth

const NeverDepth: number;

variable NeverStencilFunc

const NeverStencilFunc: number;

variable NoBlending

const NoBlending: number;

variable NoColorSpace

const NoColorSpace: string;

variable NoNormalPacking

const NoNormalPacking: string;

variable NormalAnimationBlendMode

const NormalAnimationBlendMode: number;

variable NormalBlending

const NormalBlending: number;

variable NormalGAPacking

const NormalGAPacking: string;

variable NormalRGPacking

const NormalRGPacking: string;

variable NotEqualCompare

const NotEqualCompare: number;

variable NotEqualDepth

const NotEqualDepth: number;

variable NotEqualStencilFunc

const NotEqualStencilFunc: number;

variable NoToneMapping

const NoToneMapping: number;

variable ObjectSpaceNormalMap

const ObjectSpaceNormalMap: number;

variable OneFactor

const OneFactor: number;

variable OneMinusConstantAlphaFactor

const OneMinusConstantAlphaFactor: number;

variable OneMinusConstantColorFactor

const OneMinusConstantColorFactor: number;

variable OneMinusDstAlphaFactor

const OneMinusDstAlphaFactor: number;

variable OneMinusDstColorFactor

const OneMinusDstColorFactor: number;

variable OneMinusSrcAlphaFactor

const OneMinusSrcAlphaFactor: number;

variable OneMinusSrcColorFactor

const OneMinusSrcColorFactor: number;

variable PCFShadowMap

const PCFShadowMap: number;

variable PCFSoftShadowMap

const PCFSoftShadowMap: number;

variable R11_EAC_Format

const R11_EAC_Format: number;

variable RED_GREEN_RGTC2_Format

const RED_GREEN_RGTC2_Format: number;

variable RED_RGTC1_Format

const RED_RGTC1_Format: number;

variable RedFormat

const RedFormat: number;

RedFormat discards the green and blue components and reads just the red component.

variable RedIntegerFormat

const RedIntegerFormat: number;

RedIntegerFormat discards the green and blue components and reads just the red component. The texels are read as integers instead of floating point.

variable ReinhardToneMapping

const ReinhardToneMapping: number;

variable RepeatWrapping

const RepeatWrapping: number;

With RepeatWrapping the texture will simply repeat to infinity.

variable ReplaceStencilOp

const ReplaceStencilOp: number;

variable ReverseSubtractEquation

const ReverseSubtractEquation: number;

variable REVISION

const REVISION: string;

variable RG11_EAC_Format

const RG11_EAC_Format: number;

variable RGB_BPTC_SIGNED_Format

const RGB_BPTC_SIGNED_Format: number;

variable RGB_BPTC_UNSIGNED_Format

const RGB_BPTC_UNSIGNED_Format: number;

variable RGB_ETC1_Format

const RGB_ETC1_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_etc1_ (ETC1) or _WEBGL_compressed_texture_etc_ (ETC2) WebGL extension.

variable RGB_ETC2_Format

const RGB_ETC2_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_etc1_ (ETC1) or _WEBGL_compressed_texture_etc_ (ETC2) WebGL extension.

variable RGB_PVRTC_2BPPV1_Format

const RGB_PVRTC_2BPPV1_Format: number;

RGB compression in 2-bit mode. One block for each 8×4 pixels.
Remarks
Require support for the _WEBGL_compressed_texture_pvrtc_ WebGL extension.

variable RGB_PVRTC_4BPPV1_Format

const RGB_PVRTC_4BPPV1_Format: number;

RGB compression in 4-bit mode. One block for each 4×4 pixels.
Remarks
Require support for the _WEBGL_compressed_texture_pvrtc_ WebGL extension.

variable RGB_S3TC_DXT1_Format

const RGB_S3TC_DXT1_Format: number;

A DXT1-compressed image in an RGB image format.
Remarks
Require support for the _WEBGL_compressed_texture_s3tc_ WebGL extension.

variable RGBA_ASTC_10x10_Format

const RGBA_ASTC_10x10_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_10x5_Format

const RGBA_ASTC_10x5_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_10x6_Format

const RGBA_ASTC_10x6_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_10x8_Format

const RGBA_ASTC_10x8_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_12x10_Format

const RGBA_ASTC_12x10_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_12x12_Format

const RGBA_ASTC_12x12_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_4x4_Format

const RGBA_ASTC_4x4_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_5x4_Format

const RGBA_ASTC_5x4_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_5x5_Format

const RGBA_ASTC_5x5_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_6x5_Format

const RGBA_ASTC_6x5_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_6x6_Format

const RGBA_ASTC_6x6_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_8x5_Format

const RGBA_ASTC_8x5_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_8x6_Format

const RGBA_ASTC_8x6_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_ASTC_8x8_Format

const RGBA_ASTC_8x8_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_astc_ WebGL extension.

variable RGBA_BPTC_Format

const RGBA_BPTC_Format: number;

Remarks
Require support for the _EXT_texture_compression_bptc_ WebGL extension.

variable RGBA_ETC2_EAC_Format

const RGBA_ETC2_EAC_Format: number;

Remarks
Require support for the _WEBGL_compressed_texture_etc1_ (ETC1) or _WEBGL_compressed_texture_etc_ (ETC2) WebGL extension.

variable RGBA_PVRTC_2BPPV1_Format

const RGBA_PVRTC_2BPPV1_Format: number;

RGBA compression in 2-bit mode. One block for each 8×4 pixels.
Remarks
Require support for the _WEBGL_compressed_texture_pvrtc_ WebGL extension.

variable RGBA_PVRTC_4BPPV1_Format

const RGBA_PVRTC_4BPPV1_Format: number;

RGBA compression in 4-bit mode. One block for each 4×4 pixels.
Remarks
Require support for the _WEBGL_compressed_texture_pvrtc_ WebGL extension.

variable RGBA_S3TC_DXT1_Format

const RGBA_S3TC_DXT1_Format: number;

A DXT1-compressed image in an RGB image format with a simple on/off alpha value.
Remarks
Require support for the _WEBGL_compressed_texture_s3tc_ WebGL extension.

variable RGBA_S3TC_DXT3_Format

const RGBA_S3TC_DXT3_Format: number;

A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression.
Remarks
Require support for the _WEBGL_compressed_texture_s3tc_ WebGL extension.

variable RGBA_S3TC_DXT5_Format

const RGBA_S3TC_DXT5_Format: number;

A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs from the DXT3 compression in how the alpha compression is done.
Remarks
Require support for the _WEBGL_compressed_texture_s3tc_ WebGL extension.

variable RGBADepthPacking

const RGBADepthPacking: number;

variable RGBAFormat

const RGBAFormat: number;

RGBAFormat is the default and reads the red, green, blue and alpha components.

variable RGBAIntegerFormat

const RGBAIntegerFormat: number;

RGBAIntegerFormat reads the red, green, blue and alpha component
Remarks
This is the default for THREE.Texture.

variable RGBDepthPacking

const RGBDepthPacking: number;

variable RGBFormat

const RGBFormat: number;

variable RGBIntegerFormat

const RGBIntegerFormat: number;

RGBIntegerFormat discards the alpha components and reads the red, green, and blue components.

variable RGDepthPacking

const RGDepthPacking: number;

variable RGFormat

const RGFormat: number;

RGFormat discards the alpha, and blue components and reads the red, and green components.

variable RGIntegerFormat

const RGIntegerFormat: number;

RGIntegerFormat discards the alpha, and blue components and reads the red, and green components. The texels are read as integers instead of floating point.

variable ShaderChunk

const ShaderChunk: {
    alphahash_fragment: string;
    alphahash_pars_fragment: string;
    alphamap_fragment: string;
    alphamap_pars_fragment: string;
    alphatest_fragment: string;
    alphatest_pars_fragment: string;
    aomap_fragment: string;
    aomap_pars_fragment: string;
    batching_pars_vertex: string;
    begin_vertex: string;
    beginnormal_vertex: string;
    bsdfs: string;
    iridescence_fragment: string;
    bumpmap_pars_fragment: string;
    clipping_planes_fragment: string;
    clipping_planes_pars_fragment: string;
    clipping_planes_pars_vertex: string;
    clipping_planes_vertex: string;
    color_fragment: string;
    color_pars_fragment: string;
    color_pars_vertex: string;
    color_vertex: string;
    common: string;
    cube_uv_reflection_fragment: string;
    defaultnormal_vertex: string;
    displacementmap_pars_vertex: string;
    displacementmap_vertex: string;
    emissivemap_fragment: string;
    emissivemap_pars_fragment: string;
    colorspace_fragment: string;
    colorspace_pars_fragment: string;
    envmap_fragment: string;
    envmap_common_pars_fragment: string;
    envmap_pars_fragment: string;
    envmap_pars_vertex: string;
    envmap_physical_pars_fragment: string;
    envmap_vertex: string;
    fog_vertex: string;
    fog_pars_vertex: string;
    fog_fragment: string;
    fog_pars_fragment: string;
    gradientmap_pars_fragment: string;
    lightmap_pars_fragment: string;
    lights_lambert_fragment: string;
    lights_lambert_pars_fragment: string;
    lights_pars_begin: string;
    lights_toon_fragment: string;
    lights_toon_pars_fragment: string;
    lights_phong_fragment: string;
    lights_phong_pars_fragment: string;
    lights_physical_fragment: string;
    lights_physical_pars_fragment: string;
    lights_fragment_begin: string;
    lights_fragment_maps: string;
    lights_fragment_end: string;
    logdepthbuf_fragment: string;
    logdepthbuf_pars_fragment: string;
    logdepthbuf_pars_vertex: string;
    logdepthbuf_vertex: string;
    map_fragment: string;
    map_pars_fragment: string;
    map_particle_fragment: string;
    map_particle_pars_fragment: string;
    metalnessmap_fragment: string;
    metalnessmap_pars_fragment: string;
    morphcolor_vertex: string;
    morphnormal_vertex: string;
    morphtarget_pars_vertex: string;
    morphtarget_vertex: string;
    normal_fragment_begin: string;
    normal_fragment_maps: string;
    normal_pars_fragment: string;
    normal_pars_vertex: string;
    normal_vertex: string;
    normalmap_pars_fragment: string;
    clearcoat_normal_fragment_begin: string;
    clearcoat_normal_fragment_maps: string;
    clearcoat_pars_fragment: string;
    iridescence_pars_fragment: string;
    opaque_fragment: string;
    packing: string;
    premultiplied_alpha_fragment: string;
    project_vertex: string;
    dithering_fragment: string;
    dithering_pars_fragment: string;
    roughnessmap_fragment: string;
    roughnessmap_pars_fragment: string;
    shadowmap_pars_fragment: string;
    shadowmap_pars_vertex: string;
    shadowmap_vertex: string;
    shadowmask_pars_fragment: string;
    skinbase_vertex: string;
    skinning_pars_vertex: string;
    skinning_vertex: string;
    skinnormal_vertex: string;
    specularmap_fragment: string;
    specularmap_pars_fragment: string;
    tonemapping_fragment: string;
    tonemapping_pars_fragment: string;
    transmission_fragment: string;
    transmission_pars_fragment: string;
    uv_pars_fragment: string;
    uv_pars_vertex: string;
    uv_vertex: string;
    worldpos_vertex: string;
    background_vert: string;
    background_frag: string;
    backgroundCube_vert: string;
    backgroundCube_frag: string;
    cube_vert: string;
    cube_frag: string;
    depth_vert: string;
    depth_frag: string;
    distanceRGBA_vert: string;
    distanceRGBA_frag: string;
    equirect_vert: string;
    equirect_frag: string;
    linedashed_vert: string;
    linedashed_frag: string;
    meshbasic_vert: string;
    meshbasic_frag: string;
    meshlambert_vert: string;
    meshlambert_frag: string;
    meshmatcap_vert: string;
    meshmatcap_frag: string;
    meshnormal_vert: string;
    meshnormal_frag: string;
    meshphong_vert: string;
    meshphong_frag: string;
    meshphysical_vert: string;
    meshphysical_frag: string;
    meshtoon_vert: string;
    meshtoon_frag: string;
    points_vert: string;
    points_frag: string;
    shadow_vert: string;
    shadow_frag: string;
    sprite_vert: string;
    sprite_frag: string;
};

variable ShaderLib

const ShaderLib: {
    [name: string]: ShaderLibShader;
    basic: ShaderLibShader;
    lambert: ShaderLibShader;
    phong: ShaderLibShader;
    standard: ShaderLibShader;
    matcap: ShaderLibShader;
    points: ShaderLibShader;
    dashed: ShaderLibShader;
    depth: ShaderLibShader;
    normal: ShaderLibShader;
    sprite: ShaderLibShader;
    background: ShaderLibShader;
    cube: ShaderLibShader;
    equirect: ShaderLibShader;
    distance: ShaderLibShader;
    shadow: ShaderLibShader;
    physical: ShaderLibShader;
};

variable ShortType

const ShortType: number;

variable SIGNED_R11_EAC_Format

const SIGNED_R11_EAC_Format: number;

variable SIGNED_RED_GREEN_RGTC2_Format

const SIGNED_RED_GREEN_RGTC2_Format: number;

variable SIGNED_RED_RGTC1_Format

const SIGNED_RED_RGTC1_Format: number;

variable SIGNED_RG11_EAC_Format

const SIGNED_RG11_EAC_Format: number;

variable SrcAlphaFactor

const SrcAlphaFactor: number;

variable SrcAlphaSaturateFactor

const SrcAlphaSaturateFactor: number;

variable SrcColorFactor

const SrcColorFactor: number;

variable SRGBColorSpace

const SRGBColorSpace: string;

variable SRGBTransfer

const SRGBTransfer: string;

variable StaticCopyUsage

const StaticCopyUsage: number;

variable StaticDrawUsage

const StaticDrawUsage: number;

variable StaticReadUsage

const StaticReadUsage: number;

variable StreamCopyUsage

const StreamCopyUsage: number;

variable StreamDrawUsage

const StreamDrawUsage: number;

variable StreamReadUsage

const StreamReadUsage: number;

variable SubtractEquation

const SubtractEquation: number;

variable SubtractiveBlending

const SubtractiveBlending: number;

variable TangentSpaceNormalMap

const TangentSpaceNormalMap: number;

variable TextureUtils

const TextureUtils: {
    contain: typeof contain;
    cover: typeof cover;
    fill: typeof fill;
    getByteLength: typeof getByteLength;
};

A class containing utility functions for textures.

variable TimestampQuery

const TimestampQuery: { COMPUTE: 'compute'; RENDER: 'render' };

variable TriangleFanDrawMode

const TriangleFanDrawMode: number;

variable TrianglesDrawMode

const TrianglesDrawMode: number;

variable TriangleStripDrawMode

const TriangleStripDrawMode: number;

variable UniformsLib

const UniformsLib: {
    common: {
        diffuse: IUniform<Color>;
        opacity: IUniform<number>;
        map: IUniform<unknown>;
        mapTransform: IUniform<Matrix3>;
        alphaMap: IUniform<unknown>;
        alphaMapTransform: IUniform<Matrix3>;
        alphaTest: IUniform<number>;
    };
    specularmap: {
        specularMap: IUniform<unknown>;
        specularMapTransform: IUniform<Matrix3>;
    };
    envmap: {
        envMap: IUniform<unknown>;
        envMapRotation: IUniform<Matrix3>;
        flipEnvMap: IUniform<number>;
        reflectivity: IUniform<number>;
        ior: IUniform<number>;
        refractRatio: IUniform<number>;
    };
    aomap: {
        aoMap: IUniform<unknown>;
        aoMapIntensity: IUniform<number>;
        aoMapTransform: IUniform<Matrix3>;
    };
    lightmap: {
        lightMap: IUniform<number>;
        lightMapIntensity: IUniform<number>;
        lightMapTransform: IUniform<Matrix3>;
    };
    bumpmap: {
        bumpMap: IUniform<unknown>;
        bumpMapTransform: IUniform<Matrix3>;
        bumpScale: IUniform<number>;
    };
    normalmap: {
        normalMap: IUniform<unknown>;
        normalMapTransform: IUniform<Matrix3>;
        normalScale: IUniform<Vector2>;
    };
    displacementmap: {
        displacementMap: IUniform<unknown>;
        displacementMapTransform: IUniform<Matrix3>;
        displacementScale: IUniform<number>;
        displacementBias: IUniform<number>;
    };
    emissivemap: {
        emissiveMap: IUniform<unknown>;
        emissiveMapTransform: IUniform<Matrix3>;
    };
    metalnessmap: {
        metalnessMap: IUniform<unknown>;
        metalnessMapTransform: IUniform<Matrix3>;
    };
    roughnessmap: {
        roughnessMap: IUniform<unknown>;
        roughnessMapTransform: IUniform<Matrix3>;
    };
    gradientmap: { gradientMap: IUniform<unknown> };
    fog: {
        fogDensity: IUniform<number>;
        fogNear: IUniform<number>;
        fogFar: IUniform<number>;
        fogColor: IUniform<Color>;
    };
    lights: {
        ambientLightColor: IUniform<unknown[]>;
        lightProbe: IUniform<unknown[]>;
        directionalLights: {
            value: unknown[];
            properties: { direction: {}; color: {} };
        };
        directionalLightShadows: {
            value: unknown[];
            properties: {
                shadowIntensity: number;
                shadowBias: {};
                shadowNormalBias: {};
                shadowRadius: {};
                shadowMapSize: {};
            };
        };
        directionalShadowMap: IUniform<unknown[]>;
        directionalShadowMatrix: IUniform<unknown[]>;
        spotLights: {
            value: unknown[];
            properties: {
                color: {};
                position: {};
                direction: {};
                distance: {};
                coneCos: {};
                penumbraCos: {};
                decay: {};
            };
        };
        spotLightShadows: {
            value: unknown[];
            properties: {
                shadowIntensity: number;
                shadowBias: {};
                shadowNormalBias: {};
                shadowRadius: {};
                shadowMapSize: {};
            };
        };
        spotLightMap: IUniform<unknown[]>;
        spotShadowMap: IUniform<unknown[]>;
        spotLightMatrix: IUniform<unknown[]>;
        pointLights: {
            value: unknown[];
            properties: { color: {}; position: {}; decay: {}; distance: {} };
        };
        pointLightShadows: {
            value: unknown[];
            properties: {
                shadowIntensity: number;
                shadowBias: {};
                shadowNormalBias: {};
                shadowRadius: {};
                shadowMapSize: {};
                shadowCameraNear: {};
                shadowCameraFar: {};
            };
        };
        pointShadowMap: IUniform<unknown[]>;
        pointShadowMatrix: IUniform<unknown[]>;
        hemisphereLights: {
            value: unknown[];
            properties: { direction: {}; skycolor: {}; groundColor: {} };
        };
        rectAreaLights: {
            value: unknown[];
            properties: { color: {}; position: {}; width: {}; height: {} };
        };
        ltc_1: IUniform<unknown>;
        ltc_2: IUniform<unknown>;
    };
    points: {
        diffuse: IUniform<Color>;
        opacity: IUniform<number>;
        size: IUniform<number>;
        scale: IUniform<number>;
        map: IUniform<unknown>;
        alphaMap: IUniform<unknown>;
        alphaTest: IUniform<number>;
        uvTransform: IUniform<Matrix3>;
    };
    sprite: {
        diffuse: IUniform<Color>;
        opacity: IUniform<number>;
        center: IUniform<Vector2>;
        rotation: IUniform<number>;
        map: IUniform<unknown>;
        mapTransform: IUniform<Matrix3>;
        alphaMap: IUniform<unknown>;
        alphaTest: IUniform<number>;
    };
};

variable UniformsUtils

const UniformsUtils: { clone: typeof cloneUniforms; merge: typeof mergeUniforms };

variable UnsignedByteType

const UnsignedByteType: number;

variable UnsignedInt101111Type

const UnsignedInt101111Type: number;

variable UnsignedInt248Type

const UnsignedInt248Type: number;

variable UnsignedInt5999Type

const UnsignedInt5999Type: number;

variable UnsignedIntType

const UnsignedIntType: number;

variable UnsignedShort4444Type

const UnsignedShort4444Type: number;

variable UnsignedShort5551Type

const UnsignedShort5551Type: number;

variable UnsignedShortType

const UnsignedShortType: number;

variable UVMapping

const UVMapping: number;

Maps the texture using the mesh's UV coordinates.
Remarks
This is the _default_ value and behaver for Texture Mapping.

variable VSMShadowMap

const VSMShadowMap: number;

variable WebGLCoordinateSystem

const WebGLCoordinateSystem: number;

variable WebGPUCoordinateSystem

const WebGPUCoordinateSystem: number;

variable WrapAroundEnding

const WrapAroundEnding: number;

variable ZeroCurvatureEnding

const ZeroCurvatureEnding: number;

variable ZeroFactor

const ZeroFactor: number;

variable ZeroSlopeEnding

const ZeroSlopeEnding: number;

variable ZeroStencilOp

const ZeroStencilOp: number;

Functions

function createCanvasElement

createCanvasElement: () => HTMLCanvasElement;

function error

error: (...params: unknown[]) => void;

function getConsoleFunction

getConsoleFunction: () => (
    type: 'log' | 'warn' | 'error',
    message: string,
    ...params: unknown[]
) => void;

function log

log: (...params: unknown[]) => void;

function setConsoleFunction

setConsoleFunction: (
    fn: (
        type: 'log' | 'warn' | 'error',
        message: string,
        ...params: unknown[]
    ) => void
) => void;

function SRGBToLinear

SRGBToLinear: (c: number) => number;

function warn

warn: (...params: unknown[]) => void;

function warnOnce

warnOnce: (...params: unknown[]) => void;

function WebGLShader

WebGLShader: (
    gl: WebGLRenderingContext,
    type: string,
    string: string
) => WebGLShader;

Classes

class AmbientLight

class AmbientLight extends Light<undefined> {}

This light globally illuminates all objects in the scene equally.
Remarks
This light cannot be used to cast shadows as it does not have a direction.
Example 1
const light = new THREE.AmbientLight(0x404040); // soft white light scene.add(light);
See Also
- Official Documentation
- Source

constructor

constructor(color?: ColorRepresentation, intensity?: number);

Creates a new AmbientLight.
Parameter color
Numeric value of the RGB component of the color. Default 0xffffff
Parameter intensity
Numeric value of the light's strength/intensity. Expects a Float. Default 1

property isAmbientLight

readonly isAmbientLight: boolean;

Read-only flag to check if a given object is of type AmbientLight.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class AnimationAction

class AnimationAction {}

An instance of AnimationAction schedules the playback of an animation which is stored in AnimationClip.

constructor

constructor(
    mixer: AnimationMixer,
    clip: AnimationClip,
    localRoot?: Object3D<Object3DEventMap>,
    blendMode?: AnimationBlendMode
);

Constructs a new animation action.
Parameter mixer
The mixer that is controlled by this action.
Parameter clip
The animation clip that holds the actual keyframes.
Parameter localRoot
The root object on which this action is performed.
Parameter blendMode
The blend mode.

property blendMode

blendMode: AnimationBlendMode;

Defines how the animation is blended/combined when two or more animations are simultaneously played.

property clampWhenFinished

clampWhenFinished: boolean;

If set to true the animation will automatically be paused on its last frame.
If set to false, AnimationAction#enabled will automatically be switched to false when the last loop of the action has finished, so that this action has no further impact.
Note: This member has no impact if the action is interrupted (it has only an effect if its last loop has really finished).
false

property enabled

enabled: boolean;

If set to false, the action is disabled so it has no impact.
When the action is re-enabled, the animation continues from its current time (setting enabled to false doesn't reset the action).
true

property loop

loop: AnimationActionLoopStyles;

The loop mode, set via AnimationAction#setLoop.
LoopRepeat

property paused

paused: boolean;

If set to true, the playback of the action is paused.
false

property repetitions

repetitions: number;

The number of repetitions of the performed clip over the course of this action. Can be set via AnimationAction#setLoop.
Setting this number has no effect if AnimationAction#loop is set to THREE:LoopOnce.
Infinity

property time

time: number;

The local time of this action (in seconds, starting with 0).
The value gets clamped or wrapped to [0,clip.duration] (according to the loop state).
Infinity

property timeScale

timeScale: number;

Scaling factor for the AnimationAction#time. A value of 0 causes the animation to pause. Negative values cause the animation to play backwards.
1

property weight

weight: number;

The degree of influence of this action (in the interval [0, 1]). Values between 0 (no impact) and 1 (full impact) can be used to blend between several actions.
1

property zeroSlopeAtEnd

zeroSlopeAtEnd: boolean;

Enables smooth interpolation without separate clips for start, loop and end.
true

property zeroSlopeAtStart

zeroSlopeAtStart: boolean;

Enables smooth interpolation without separate clips for start, loop and end.
true

method crossFadeFrom

crossFadeFrom: (
    fadeOutAction: AnimationAction,
    duration: number,
    warp?: boolean
) => AnimationAction;

Causes this action to fade in and the given action to fade out, within the passed time interval.
Parameter fadeOutAction
The animation action to fade out.
Parameter duration
The duration of the fade.
Parameter warp
Whether warping should be used or not. {AnimationAction} A reference to this animation action.

method crossFadeTo

crossFadeTo: (
    fadeInAction: AnimationAction,
    duration: number,
    warp?: boolean
) => AnimationAction;

Causes this action to fade out and the given action to fade in, within the passed time interval.
Parameter fadeInAction
The animation action to fade in.
Parameter duration
The duration of the fade.
Parameter warp
Whether warping should be used or not. {AnimationAction} A reference to this animation action.

method fadeIn

fadeIn: (duration: number) => AnimationAction;

Fades the animation in by increasing its weight gradually from 0 to 1, within the passed time interval.
Parameter duration
The duration of the fade. {AnimationAction} A reference to this animation action.

method fadeOut

fadeOut: (duration: number) => AnimationAction;

Fades the animation out by decreasing its weight gradually from 1 to 0, within the passed time interval.
Parameter duration
The duration of the fade. {AnimationAction} A reference to this animation action.

method getClip

getClip: () => AnimationClip;

Returns the animation clip of this animation action.
{AnimationClip} The animation clip.

method getEffectiveTimeScale

getEffectiveTimeScale: () => number;

Returns the effective time scale of this action.
{number} The effective time scale.

method getEffectiveWeight

getEffectiveWeight: () => number;

Returns the effective weight of this action.
{number} The effective weight.

method getMixer

getMixer: () => AnimationMixer;

Returns the animation mixer of this animation action.
{AnimationMixer} The animation mixer.

method getRoot

getRoot: () => Object3D;

Returns the root object of this animation action.
{Object3D} The root object.

method halt

halt: (duration: number) => AnimationAction;

Decelerates this animation's speed to 0 within the passed time interval.
Parameter duration
The duration. {AnimationAction} A reference to this animation action.

method isRunning

isRunning: () => boolean;

Returns true if the animation is running.
{boolean} Whether the animation is running or not.

method isScheduled

isScheduled: () => boolean;

Returns true when AnimationAction#play has been called.
{boolean} Whether the animation is scheduled or not.

method play

play: () => AnimationAction;

Starts the playback of the animation.
{AnimationAction} A reference to this animation action.

method reset

reset: () => AnimationAction;

Resets the playback of the animation.
{AnimationAction} A reference to this animation action.

method setDuration

setDuration: (duration: number) => AnimationAction;

Sets the duration for a single loop of this action.
Parameter duration
The duration to set. {AnimationAction} A reference to this animation action.

method setEffectiveTimeScale

setEffectiveTimeScale: (timeScale: number) => AnimationAction;

Sets the effective time scale of this action.
An action has no effect and thus an effective time scale of zero when the action is paused.
Parameter timeScale
The time scale to set. {AnimationAction} A reference to this animation action.

method setEffectiveWeight

setEffectiveWeight: (weight: number) => AnimationAction;

Sets the effective weight of this action.
An action has no effect and thus an effective weight of zero when the action is disabled.
Parameter weight
The weight to set. {AnimationAction} A reference to this animation action.

method setLoop

setLoop: (
    mode: AnimationActionLoopStyles,
    repetitions: number
) => AnimationAction;

Configures the loop settings for this action.
Parameter mode
The loop mode.
Parameter repetitions
The number of repetitions. {AnimationAction} A reference to this animation action.

method startAt

startAt: (time: number) => AnimationAction;

Defines the time when the animation should start.
Parameter time
The start time in seconds. {AnimationAction} A reference to this animation action.

method stop

stop: () => AnimationAction;

Stops the playback of the animation.
{AnimationAction} A reference to this animation action.

method stopFading

stopFading: () => AnimationAction;

Stops any fading which is applied to this action.
{AnimationAction} A reference to this animation action.

method stopWarping

stopWarping: () => AnimationAction;

Stops any scheduled warping which is applied to this action.
{AnimationAction} A reference to this animation action.

method syncWith

syncWith: (action: AnimationAction) => AnimationAction;

Synchronizes this action with the passed other action.
Parameter action
The action to sync with. {AnimationAction} A reference to this animation action.

method warp

warp: (
    startTimeScale: number,
    endTimeScale: number,
    duration: number
) => AnimationAction;

Changes the playback speed, within the passed time interval, by modifying AnimationAction#timeScale gradually from startTimeScale to endTimeScale.
Parameter startTimeScale
The start time scale.
Parameter endTimeScale
The end time scale.
Parameter duration
The duration. {AnimationAction} A reference to this animation action.

class AnimationClip

class AnimationClip {}

A reusable set of keyframe tracks which represent an animation.

constructor

constructor(
    name?: string,
    duration?: number,
    tracks?: KeyframeTrack[],
    blendMode?: AnimationBlendMode
);

Constructs a new animation clip.
Note: Instead of instantiating an AnimationClip directly with the constructor, you can use the static interface of this class for creating clips. In most cases though, animation clips will automatically be created by loaders when importing animated 3D assets.
Parameter name
The clip's name.
Parameter duration
The clip's duration in seconds. If a negative value is passed, the duration will be calculated from the passed keyframes.
Parameter tracks
An array of keyframe tracks.
Parameter blendMode
Defines how the animation is blended/combined when two or more animations are simultaneously played.

property blendMode

blendMode: AnimationBlendMode;

Defines how the animation is blended/combined when two or more animations are simultaneously played.

property duration

duration: number;

The clip's duration in seconds.

property name

name: string;

The clip's name.

property tracks

tracks: KeyframeTrack[];

An array of keyframe tracks.

property userData

userData: Record<string, unknown>;

An object that can be used to store custom data about the animation clip. It should not hold references to functions as these will not be cloned.

property uuid

readonly uuid: string;

The UUID of the animation clip.

method clone

clone: () => this;

Returns a new animation clip with copied values from this instance.
{AnimationClip} A clone of this instance.

method CreateClipsFromMorphTargetSequences

static CreateClipsFromMorphTargetSequences: (
    morphTargets: Array<MorphTarget>,
    fps: number,
    noLoop: boolean
) => Array<AnimationClip>;

Returns an array of new AnimationClips created from the morph target sequences of a geometry, trying to sort morph target names into animation-group-based patterns like "Walk_001, Walk_002, Run_001, Run_002...".
See MD2Loader#parse as an example for how the method should be used.
Parameter morphTargets
A sequence of morph targets.
Parameter fps
The Frames-Per-Second value.
Parameter noLoop
Whether the clip should be no loop or not. {Array} An array of new animation clips.

method CreateFromMorphTargetSequence

static CreateFromMorphTargetSequence: (
    name: string,
    morphTargetSequence: Array<MorphTarget>,
    fps: number,
    noLoop: boolean
) => AnimationClip;

Returns a new animation clip from the passed morph targets array of a geometry, taking a name and the number of frames per second.
Note: The fps parameter is required, but the animation speed can be overridden via AnimationAction#setDuration.
Parameter name
The name of the animation clip.
Parameter morphTargetSequence
A sequence of morph targets.
Parameter fps
The Frames-Per-Second value.
Parameter noLoop
Whether the clip should be no loop or not. {AnimationClip} The new animation clip.

method findByName

static findByName: (
    objectOrClipArray: Array<AnimationClip> | Object3D,
    name: string
) => AnimationClip | null;

Searches for an animation clip by name, taking as its first parameter either an array of clips, or a mesh or geometry that contains an array named "animations" property.
Parameter objectOrClipArray
The array or object to search through.
Parameter name
The name to search for. {?AnimationClip} The found animation clip. Returns null if no clip has been found.

method optimize

optimize: () => AnimationClip;

Optimizes each track by removing equivalent sequential keys (which are common in morph target sequences).
{AnimationClip} A reference to this animation clip.

method parse

static parse: (json: AnimationClipJSON) => AnimationClip;

Factory method for creating an animation clip from the given JSON.
Parameter json
The serialized animation clip. {AnimationClip} The new animation clip.

method parseAnimation

static parseAnimation: (
    animation: AnimationClipJSON,
    bones: Array<Bone>
) => AnimationClip | null;

Parses the animation.hierarchy format and returns a new animation clip.
Parameter animation
A serialized animation clip as JSON.
Parameter bones
An array of bones. {?AnimationClip} The new animation clip.
Deprecated
since r175.

method resetDuration

resetDuration: () => AnimationClip;

Sets the duration of this clip to the duration of its longest keyframe track.
{AnimationClip} A reference to this animation clip.

method toJSON

static toJSON: (clip: AnimationClip) => AnimationClipJSON;

Serializes the given animation clip into JSON.
Parameter clip
The animation clip to serialize. {Object} The JSON object.
Serializes this animation clip into JSON.
{Object} The JSON object.

method trim

trim: () => AnimationClip;

Trims all tracks to the clip's duration.
{AnimationClip} A reference to this animation clip.

method validate

validate: () => boolean;

Performs minimal validation on each track in the clip. Returns true if all tracks are valid.
{boolean} Whether the clip's keyframes are valid or not.

class AnimationLoader

class AnimationLoader extends Loader<AnimationClip[]> {}

constructor

constructor(manager?: LoadingManager);

method parse

parse: (json: readonly unknown[]) => AnimationClip[];

class AnimationMixer

class AnimationMixer extends EventDispatcher<AnimationMixerEventMap> {}

AnimationMixer is a player for animations on a particular object in the scene. When multiple objects in the scene are animated independently, one AnimationMixer may be used for each object.

constructor

constructor(root: Object3D<Object3DEventMap> | AnimationObjectGroup);

Constructs a new animation mixer.
Parameter root
The object whose animations shall be played by this mixer.

property stats

stats: AnimationMixerStats;

The AnimationMixer stats track the actions of the mixer.

property time

time: number;

The global mixer time (in seconds; starting with 0 on the mixer's creation).
0

property timeScale

timeScale: number;

A scaling factor for the global time.
Note: Setting this member to 0 and later back to 1 is a possibility to pause/unpause all actions that are controlled by this mixer.
1

method clipAction

clipAction: {
    (
        clip: AnimationClip,
        optionalRoot?: Object3D | AnimationObjectGroup,
        blendMode?: AnimationBlendMode
    ): AnimationAction;
    (
        clip: string | AnimationClip,
        optionalRoot?: Object3D<Object3DEventMap> | AnimationObjectGroup,
        blendMode?: AnimationBlendMode
    ): AnimationAction;
};

Returns an instance of AnimationAction for the passed clip.
If an action fitting the clip and root parameters doesn't yet exist, it will be created by this method. Calling this method several times with the same clip and root parameters always returns the same action.
Parameter clip
An animation clip or alternatively the name of the animation clip.
Parameter optionalRoot
An alternative root object.
Parameter blendMode
The blend mode. {?AnimationAction} The animation action.

method existingAction

existingAction: (
    clip: AnimationClip | string,
    optionalRoot?: Object3D | AnimationObjectGroup
) => AnimationAction | null;

Returns an existing animation action for the passed clip.
Parameter clip
An animation clip or alternatively the name of the animation clip.
Parameter optionalRoot
An alternative root object. {?AnimationAction} The animation action. Returns null if no action was found.

method getRoot

getRoot: () => Object3D | AnimationObjectGroup;

Returns this mixer's root object.
{Object3D} The mixer's root object.

method setTime

setTime: (time: number) => AnimationMixer;

Sets the global mixer to a specific time and updates the animation accordingly.
This is useful when you need to jump to an exact time in an animation. The input parameter will be scaled by AnimationMixer#timeScale
Parameter time
The time to set in seconds. {AnimationMixer} A reference to this animation mixer.

method stopAllAction

stopAllAction: () => AnimationMixer;

Deactivates all previously scheduled actions on this mixer.
{AnimationMixer} A reference to this animation mixer.

method uncacheAction

uncacheAction: (
    clip: AnimationClip | string,
    optionalRoot?: Object3D | AnimationObjectGroup
) => void;

Deallocates all memory resources for an action. The action is identified by the given clip and an optional root object. Before using this method make sure to call AnimationAction#stop to deactivate the action.
Parameter clip
An animation clip or alternatively the name of the animation clip.
Parameter optionalRoot
An alternative root object.

method uncacheClip

uncacheClip: (clip: AnimationClip) => void;

Deallocates all memory resources for a clip. Before using this method make sure to call AnimationAction#stop for all related actions.
Parameter clip
The clip to uncache.

method uncacheRoot

uncacheRoot: (root: Object3D | AnimationObjectGroup) => void;

Deallocates all memory resources for a root object. Before using this method make sure to call AnimationAction#stop for all related actions or alternatively AnimationMixer#stopAllAction when the mixer operates on a single root.
Parameter root
The root object to uncache.

method update

update: (deltaTime: number) => AnimationMixer;

Advances the global mixer time and updates the animation.
This is usually done in the render loop by passing the delta time from Clock or Timer.
Parameter deltaTime
The delta time in seconds. {AnimationMixer} A reference to this animation mixer.

class AnimationObjectGroup

class AnimationObjectGroup {}

A group of objects that receives a shared animation state.
Usage:
- Add objects you would otherwise pass as 'root' to the constructor or the .clipAction method of AnimationMixer. - Instead pass this object as 'root'. - You can also add and remove objects later when the mixer is running.
Note:
- Objects of this class appear as one object to the mixer, so cache control of the individual objects must be done on the group.
Limitation:
- The animated properties must be compatible among the all objects in the group. - A single property can either be controlled through a target group or directly, but not both.

constructor

constructor(...args: Object3D<Object3DEventMap>[]);

Constructs a new animation group.
Parameter arguments
An arbitrary number of 3D objects that share the same animation state.

property isAnimationObjectGroup

readonly isAnimationObjectGroup: boolean;

This flag can be used for type testing.
true

property uuid

readonly uuid: string;

The UUID of the 3D object.

method add

add: (...args: Object3D[]) => void;

Adds an arbitrary number of objects to this animation group.
Parameter arguments
The 3D objects to add.

method remove

remove: (...args: Object3D[]) => void;

Removes an arbitrary number of objects to this animation group
Parameter arguments
The 3D objects to remove.

method uncache

uncache: (...args: Object3D[]) => void;

Deallocates all memory resources for the passed 3D objects of this animation group.
Parameter arguments
The 3D objects to uncache.

class AnimationUtils

class AnimationUtils {}

A class with various methods to assist with animations.

method convertArray

static convertArray: (
    array: TypedArray | number[],
    type: TypedArrayConstructor
) => TypedArray | number[];

Converts an array to a specific type
Parameter array
The array to convert.
Parameter type
The constructor of a type array. {TypedArray} The converted array

method flattenJSON

static flattenJSON: (
    jsonKeys: Array<number>,
    times: Array<number>,
    values: Array<number>,
    valuePropertyName: string
) => void;

Used for parsing AOS keyframe formats.
Parameter jsonKeys
A list of JSON keyframes.
Parameter times
This array will be filled with keyframe times by this method.
Parameter values
This array will be filled with keyframe values by this method.
Parameter valuePropertyName
The name of the property to use.

method getKeyframeOrder

static getKeyframeOrder: (times: Array<number>) => Array<number>;

Returns an array by which times and values can be sorted.
Parameter times
The keyframe time values. {Array} The array.

method isTypedArray

static isTypedArray: (object: unknown) => boolean;

Returns true if the given object is a typed array.
Parameter object
The object to check. {boolean} Whether the given object is a typed array.

method makeClipAdditive

static makeClipAdditive: (
    targetClip: AnimationClip,
    referenceFrame?: number,
    referenceClip?: AnimationClip,
    fps?: number
) => AnimationClip;

Converts the keyframes of the given animation clip to an additive format.
Parameter targetClip
The clip to make additive.
Parameter referenceFrame
The reference frame.
Parameter referenceClip
The reference clip.
Parameter fps
The FPS. {AnimationClip} The updated clip which is now additive.

method sortedArray

static sortedArray: (
    values: Array<number>,
    stride: number,
    order: Array<number>
) => Array<number>;

Sorts the given array by the previously computed order via getKeyframeOrder().
Parameter values
The values to sort.
Parameter stride
The stride.
Parameter order
The sort order. {Array} The sorted values.

method subclip

static subclip: (
    sourceClip: AnimationClip,
    name: string,
    startFrame: number,
    endFrame: number,
    fps?: number
) => AnimationClip;

Creates a new clip, containing only the segment of the original clip between the given frames.
Parameter sourceClip
The values to sort.
Parameter name
The name of the clip.
Parameter startFrame
The start frame.
Parameter endFrame
The end frame.
Parameter fps
The FPS. {AnimationClip} The new sub clip.

class ArcCurve

class ArcCurve extends EllipseCurve {}

Alias for EllipseCurve.
See Also
- Official Documentation
- Source

constructor

constructor(
    aX?: number,
    aY?: number,
    aRadius?: number,
    aStartAngle?: number,
    aEndAngle?: number,
    aClockwise?: boolean
);

This constructor creates a new ArcCurve.
Parameter aX
The X center of the ellipse. Expects a Float. Default is 0.
Parameter aY
The Y center of the ellipse. Expects a Float. Default is 0.
Parameter xRadius
The radius of the ellipse in the x direction. Expects a Float. Default is 1.
Parameter yRadius
The radius of the ellipse in the y direction. Expects a Float. Default is 1.
Parameter aStartAngle
The start angle of the curve in radians starting from the positive X axis. Default is 0.
Parameter aEndAngle
The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.
Parameter aClockwise
Whether the ellipse is drawn clockwise. Default is false.

property isArcCurve

readonly isArcCurve: boolean;

Read-only flag to check if a given object is of type ArcCurve.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class ArrayCamera

class ArrayCamera extends PerspectiveCamera {}

ArrayCamera can be used in order to efficiently render a scene with a predefined set of cameras
Remarks
This is an important performance aspect for rendering VR scenes. An instance of ArrayCamera always has an array of sub cameras It's mandatory to define for each sub camera the viewport property which determines the part of the viewport that is rendered with this camera.
See Also
- Example: camera / array
- Official Documentation
- Source

property cameras

cameras: PerspectiveCamera[];

An array of cameras.

property index

index: number;

property isArrayCamera

readonly isArrayCamera: boolean;

Read-only flag to check if a given object is of type ArrayCamera.
Remarks
This is a _constant_ value

property isMultiViewCamera

isMultiViewCamera: boolean;

Whether this camera is used with multiview rendering or not.

class ArrowHelper

class ArrowHelper extends Object3D {}

An 3D arrow object for visualizing directions.

Example 1

const dir = new THREE.Vector3(1, 2, 0);
//normalize the direction vector (convert to vector of length 1)
dir.normalize();
const origin = new THREE.Vector3(0, 0, 0);
const length = 1;
const hex = 0xffff00;
const {@link ArrowHelper} = new THREE.ArrowHelper(dir, origin, length, hex);
scene.add(arrowHelper);

constructor

constructor(
    dir?: Vector3,
    origin?: Vector3,
    length?: number,
    color?: ColorRepresentation,
    headLength?: number,
    headWidth?: number
);

Create a new instance of ArrowHelper
Parameter dir
Direction from origin. Must be a unit vector. Default new THREE.Vector3(0, 0, 1)
Parameter origin
Point at which the arrow starts. Default new THREE.Vector3(0, 0, 0)
Parameter length
Length of the arrow. Default 1
Parameter hex
Hexadecimal value to define color. Default 0xffff00
Parameter headLength
The length of the head of the arrow. Default 0.2 * length
Parameter headWidth
The width of the head of the arrow. Default 0.2 * headLength

property cone

cone: Mesh<
    BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    Material | Material[],
    Object3DEventMap
>;

Contains the cone part of the arrowHelper.

property line

line: Line<
    BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    Material | Material[],
    Object3DEventMap
>;

Contains the line part of the arrowHelper.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method copy

override copy: (source: this) => this;

Copy the given object into this object
Parameter source
Remarks
Note: event listeners and user-defined callbacks (.onAfterRender and .onBeforeRender) are not copied.

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method setColor

setColor: (color: ColorRepresentation) => void;

Sets the color of the arrowHelper.
Parameter color
The desired color.

method setDirection

setDirection: (dir: Vector3) => void;

Parameter dir
The desired direction. Must be a unit vector.

method setLength

setLength: (length: number, headLength?: number, headWidth?: number) => void;

Sets the length of the arrowhelper.
Parameter length
The desired length.
Parameter headLength
The length of the head of the arrow. Default 0.2 * length
Parameter headWidth
The width of the head of the arrow. Default 0.2 * headLength

class Audio

class Audio<NodeType extends AudioNode = GainNode> extends Object3D {}

Create a non-positional ( global ) Audio object. This uses the {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API | Web Audio API}.

Example 1

// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add(listener);
// create a global {@link Audio} source
const sound = new THREE.Audio(listener);
// load a sound and set it as the {@link Audio} object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load('sounds/ambient.ogg', function (buffer) {
    sound.setBuffer(buffer);
    sound.setLoop(true);
    sound.setVolume(0.5);
    sound.play();
});

constructor

constructor(listener: AudioListener);

Create a new instance of Audio
Parameter listener
(required) AudioListener instance.

property autoplay

autoplay: boolean;

Whether to start playback automatically.

property buffer

buffer: AudioBuffer;

property context

context: AudioContext;

The AudioContext of the listener given in the constructor.

property detune

detune: number;

Modify pitch, measured in cents. +/- 100 is a semitone. +/- 1200 is an octave.

property duration

duration: number;

Overrides the duration of the audio. Same as the duration parameter of AudioBufferSourceNode.start().

property filters

filters: AudioNode[];

Represents an array of AudioNodes. Can be used to apply a variety of low-order filters to create more complex sound effects. In most cases, the array contains instances of BiquadFilterNodes. Filters are set via Audio.setFilter or Audio.setFilters.

property gain

gain: GainNode;

A GainNode created using AudioContext.createGain().

property hasPlaybackControl

hasPlaybackControl: boolean;

Whether playback can be controlled using the play(), pause() etc. methods.

property listener

listener: AudioListener;

A reference to the listener object of this audio.

property loop

loop: boolean;

false

property loopEnd

loopEnd: number;

property loopStart

loopStart: number;

property offset

offset: number;

An offset to the time within the Audio buffer that playback should begin. Same as the offset parameter of AudioBufferSourceNode.start().

property source

source: AudioScheduledSourceNode;

An AudioBufferSourceNode created using AudioContext.createBufferSource().

property type

readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method connect

connect: () => this;

Connect to the Audio.source
Remarks
This is used internally on initialisation and when setting / removing filters.

method disconnect

disconnect: () => this;

Disconnect from the Audio.source
Remarks
This is used internally when setting / removing filters.

method getDetune

getDetune: () => number;

Returns the detuning of oscillation in cents.

method getFilter

getFilter: () => AudioNode;

Returns the first element of the filters array.

method getLoop

getLoop: () => boolean;

Return the value of source.loop (whether playback should loop).

method onEnded

onEnded: () => void;

Called automatically when playback finished.

method pause

pause: () => this;

If hasPlaybackControl is true, pauses playback.

method play

play: (delay?: number) => this;

If hasPlaybackControl is true, starts playback.

method setBuffer

setBuffer: (audioBuffer: AudioBuffer) => this;

Setup the source to the audioBuffer, and sets sourceType to 'buffer'.
Remarks
If autoplay, also starts playback.

method setDetune

setDetune: (value: number) => this;

Defines the detuning of oscillation in cents.
Parameter value
Expects a Float

method setFilter

setFilter: (filter: AudioNode) => this;

Applies a single filter node to the audio.

method setFilters

setFilters: (value: AudioNode[]) => this;

Applies an array of filter nodes to the audio.
Parameter value
Arrays of filters.

method setLoop

setLoop: (value: boolean) => this;

Set source.loop to value (whether playback should loop).
Parameter value

method setLoopEnd

setLoopEnd: (value: number) => this;

Set source.loopEnd to value.
Parameter value
Expects a Float

method setLoopStart

setLoopStart: (value: number) => this;

Set source.loopStart to value.
Parameter value
Expects a Float

method setMediaElementSource

setMediaElementSource: (mediaElement: HTMLMediaElement) => this;

Applies the given object of type HTMLMediaElement as the source of this audio.
Remarks
Also sets hasPlaybackControl to false.

method setMediaStreamSource

setMediaStreamSource: (mediaStream: MediaStream) => this;

Applies the given object of type MediaStream as the source of this audio.
Remarks
Also sets hasPlaybackControl to false.

method setNodeSource

setNodeSource: (audioNode: AudioScheduledSourceNode) => this;

Setup the source to the audioBuffer, and sets sourceType to 'audioNode'.
Remarks
Also sets hasPlaybackControl to false.

method setPlaybackRate

setPlaybackRate: (value: number) => this;

If hasPlaybackControl is enabled, set the playbackRate to value.
Parameter value
Expects a Float

method setVolume

setVolume: (value: number) => this;

Set the volume.
Parameter value
Expects a Float

method stop

stop: (delay?: number) => this;

If hasPlaybackControl is enabled, stops playback.
Parameter delay
(optional) - The delay, in seconds, at which the audio should start playing.

class AudioAnalyser

class AudioAnalyser {}

Create a AudioAnalyser object, which uses an AnalyserNode to analyse audio data. This uses the Web Audio API.

Example 1

// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add(listener);
// create an Audio source
const sound = new THREE.Audio(listener);
// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load('sounds/ambient.ogg', function (buffer) {
    sound.setBuffer(buffer);
    sound.setLoop(true);
    sound.setVolume(0.5);
    sound.play();
});
// create an AudioAnalyser, passing in the sound and desired fftSize
const analyser = new THREE.AudioAnalyser(sound, 32);
// get the average frequency of the sound
const data = analyser.getAverageFrequency();

constructor

constructor(audio: Audio<AudioNode>, fftSize?: number);

Create a new {@link AudioAnalyser | AudioAnalyser}.
Parameter audio
Parameter fftSize
See AnalyserNode.fftSize. Expects a unsigned integer. Default 2048.

property analyser

analyser: AnalyserNode;

An AnalyserNode used to analyze audio.

property data

data: Uint8Array;

A Uint8Array with size determined by analyser.frequencyBinCount used to hold analysis data.

method getAverageFrequency

getAverageFrequency: () => number;

Get the average of the frequencies returned by the getFrequencyData method.

method getFrequencyData

getFrequencyData: () => Uint8Array;

Uses the Web Audio's getByteFrequencyData method

class AudioListener

class AudioListener extends Object3D {}

The AudioListener represents a virtual listener of the all positional and non-positional audio effects in the scene. A three.js application usually creates a single instance of AudioListener *
Remarks
It is a mandatory constructor parameter for audios entities like Audio and PositionalAudio. In most cases, the listener object is a child of the camera So the 3D transformation of the camera represents the 3D transformation of the listener.
Example 1
// create an {@link AudioListener} and add it to the camera const listener = new THREE.AudioListener(); camera.add(listener); // create a global audio source const sound = new THREE.Audio(listener); // load a sound and set it as the Audio object's buffer const audioLoader = new THREE.AudioLoader(); audioLoader.load('sounds/ambient.ogg', function (buffer) { sound.setBuffer(buffer); sound.setLoop(true); sound.setVolume(0.5); sound.play(); });
See Also
- Example: webaudio / sandbox
- Example: webaudio / timing
- Example: webaudio / visualizer
- Official Documentation
- Source

property context

context: AudioContext;

The AudioContext of the {@link AudioListener | listener} given in the constructor.

property filter

filter: AudioNode;

property gain

gain: GainNode;

A GainNode created using AudioContext.createGain().

property timeDelta

timeDelta: number;

Time delta value for audio entities. Use in context of AudioParam.linearRampToValueAtTimeDefault().

property type

readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method getFilter

getFilter: () => AudioNode;

Returns the value of the filter property.

method setFilter

setFilter: (value: AudioNode) => this;

Set the filter property to value.
Parameter value

class AudioLoader

class AudioLoader extends Loader<AudioBuffer> {}

constructor

constructor(manager?: LoadingManager);

class AxesHelper

class AxesHelper extends LineSegments<BufferGeometry, LineBasicMaterial> {}

An axis object to visualize the 3 axes in a simple way.
Remarks
The X axis is red The Y axis is green The Z axis is blue.
Example 1
const {@link AxesHelper} = new THREE.AxesHelper(5); scene.add(axesHelper);
See Also
- Example: WebGL / buffergeometry / compression
- Example: WebGL / geometry / convex
- Example: WebGL / loader / nrrd
- Official Documentation
- Source

constructor

constructor(size?: number);

Create a new instance of AxesHelper
Parameter size
Size of the lines representing the axes. Default 1

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method setColors

setColors: (
    xAxisColor: ColorRepresentation,
    yAxisColor: ColorRepresentation,
    zAxisColor: ColorRepresentation
) => this;

Sets the axes colors to xAxisColor, yAxisColor, zAxisColor.
Parameter xAxisColor
Parameter yAxisColor
Parameter zAxisColor

class BatchedMesh

class BatchedMesh extends Mesh<BufferGeometry, Material> {}

A special version of Mesh with multi draw batch rendering support. Use BatchedMesh if you have to render a large number of objects with the same material but with different geometries or world transformations. The usage of BatchedMesh will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
If the is not supported then a less performant fallback is used.
Example 1
const box = new THREE.BoxGeometry( 1, 1, 1 ); const sphere = new THREE.SphereGeometry( 1, 12, 12 ); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// initialize and add geometries into the batched mesh const batchedMesh = new BatchedMesh( 10, 5000, 10000, material ); const boxGeometryId = batchedMesh.addGeometry( box ); const sphereGeometryId = batchedMesh.addGeometry( sphere );
// create instances of those geometries const boxInstancedId1 = batchedMesh.addInstance( boxGeometryId ); const boxInstancedId2 = batchedMesh.addInstance( boxGeometryId );
const sphereInstancedId1 = batchedMesh.addInstance( sphereGeometryId ); const sphereInstancedId2 = batchedMesh.addInstance( sphereGeometryId );
// position the geometries batchedMesh.setMatrixAt( boxInstancedId1, boxMatrix1 ); batchedMesh.setMatrixAt( boxInstancedId2, boxMatrix2 );
batchedMesh.setMatrixAt( sphereInstancedId1, sphereMatrix1 ); batchedMesh.setMatrixAt( sphereInstancedId2, sphereMatrix2 );
scene.add( batchedMesh );
Example:

constructor

constructor(
    maxInstanceCount: number,
    maxVertexCount: number,
    maxIndexCount?: number,
    material?: Material
);

Parameter maxInstanceCount
the max number of individual geometries planned to be added.
Parameter maxVertexCount
the max number of vertices to be used by all geometries.
Parameter maxIndexCount
the max number of indices to be used by all geometries.
Parameter material
an instance of Material. Default is a new MeshBasicMaterial.

property boundingBox

boundingBox: Box3;

This bounding box encloses all instances of the BatchedMesh. Can be calculated with . null

property boundingSphere

boundingSphere: Sphere;

This bounding sphere encloses all instances of the BatchedMesh. Can be calculated with . null

property customSort

customSort: (
    this: this,
    list: Array<{ start: number; count: number; z: number }>,
    camera: Camera
) => void;

property instanceCount

readonly instanceCount: number;

property isBatchedMesh

readonly isBatchedMesh: boolean;

Read-only flag to check if a given object is of type BatchedMesh.

property maxInstanceCount

readonly maxInstanceCount: number;

The maximum number of individual geometries that can be stored in the BatchedMesh. Read only.

property perObjectFrustumCulled

perObjectFrustumCulled: boolean;

If true then the individual objects within the BatchedMesh are frustum culled. true

property sortObjects

sortObjects: boolean;

If true then the individual objects within the BatchedMesh are sorted to improve overdraw-related artifacts. If the material is marked as "transparent" objects are rendered back to front and if not then they are rendered front to back. true

property unusedIndexCount

readonly unusedIndexCount: number;

property unusedVertexCount

readonly unusedVertexCount: number;

method addGeometry

addGeometry: (
    geometry: BufferGeometry,
    reservedVertexRange?: number,
    reservedIndexRange?: number
) => number;

Adds the given geometry to the BatchedMesh and returns the associated index referring to it.
Parameter geometry
The geometry to add into the BatchedMesh.
Parameter reservedVertexRange
Optional parameter specifying the amount of vertex buffer space to reserve for the added geometry. This is necessary if it is planned to set a new geometry at this index at a later time that is larger than the original geometry. Defaults to the length of the given geometry vertex buffer.
Parameter reservedIndexRange
Optional parameter specifying the amount of index buffer space to reserve for the added geometry. This is necessary if it is planned to set a new geometry at this index at a later time that is larger than the original geometry. Defaults to the length of the given geometry index buffer.

method addInstance

addInstance: (geometryId: number) => number;

Adds a new instance to the BatchedMesh using the geometry of the given geometryId and returns a new id referring to the new instance to be used by other functions.
Parameter geometryId
The id of a previously added geometry via "addGeometry" to add into the BatchedMesh to render.

method computeBoundingBox

computeBoundingBox: () => void;

Computes the bounding box, updating attribute. Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are null.

method computeBoundingSphere

computeBoundingSphere: () => void;

Computes the bounding sphere, updating attribute. Bounding spheres aren't computed by default. They need to be explicitly computed, otherwise they are null.

method deleteGeometry

deleteGeometry: (geometryId: number) => this;

Parameter geometryId
The id of a geometry to remove from the [name] that was previously added via "addGeometry". Any instances referencing this geometry will also be removed as a side effect.

method deleteInstance

deleteInstance: (instanceId: number) => this;

Removes an existing instance from the BatchedMesh using the given instanceId.
Parameter instanceId
The id of an instance to remove from the BatchedMesh that was previously added via "addInstance".

method dispose

dispose: () => this;

Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.

method getBoundingBoxAt

getBoundingBoxAt: (geometryId: number, target: Box3) => Box3 | null;

method getBoundingSphereAt

getBoundingSphereAt: (geometryId: number, target: Sphere) => Sphere | null;

method getColorAt

getColorAt: (instanceId: number, target: Color) => void;

Get the color of the defined geometry.
Parameter instanceId
The id of an instance to get the color of.
Parameter target
The target object to copy the color in to.

method getGeometryIdAt

getGeometryIdAt: (instanceId: number) => number;

Get the geometryIndex of the defined instance.
Parameter instanceId
The id of an instance to get the geometryIndex of.

method getGeometryRangeAt

getGeometryRangeAt: (
    geometryId: number,
    target?: BatchedMeshGeometryRange
) => BatchedMeshGeometryRange | null;

Get the range representing the subset of triangles related to the attached geometry, indicating the starting offset and count, or null if invalid.
Return an object of the form: { start: Integer, count: Integer }
Parameter geometryId
The id of the geometry to get the range of.
Parameter target
Optional target object to copy the range in to.

method getMatrixAt

getMatrixAt: (instanceId: number, target: Matrix4) => Matrix4;

Get the local transformation matrix of the defined instance.
Parameter instanceId
The id of an instance to get the matrix of.
Parameter target
This 4x4 matrix will be set to the local transformation matrix of the defined instance.

method getVisibleAt

getVisibleAt: (instanceId: number) => boolean;

Get whether the given instance is marked as "visible" or not.
Parameter instanceId
The id of an instance to get the visibility state of.

method optimize

optimize: () => this;

Repacks the sub geometries in [name] to remove any unused space remaining from previously deleted geometry, freeing up space to add new geometry.

method setColorAt

setColorAt: (instanceId: number, color: Color) => void;

Sets the given color to the defined geometry instance.
Parameter instanceId
The id of the instance to set the color of.
Parameter color
The color to set the instance to.

method setCustomSort

setCustomSort: (
    sortFunction: (
        this: this,
        list: Array<{ start: number; count: number; z: number }>,
        camera: Camera
    ) => void
) => this;

Takes a sort a function that is run before render. The function takes a list of instances to sort and a camera. The objects in the list include a "z" field to perform a depth-ordered sort with.

method setGeometryAt

setGeometryAt: (geometryId: number, geometry: BufferGeometry) => number;

Replaces the geometry at geometryId with the provided geometry. Throws an error if there is not enough space reserved for geometry. Calling this will change all instances that are rendering that geometry.
Parameter geometryId
Which geometry id to replace with this geometry.
Parameter geometry
The geometry to substitute at the given geometry id.

method setGeometryIdAt

setGeometryIdAt: (instanceId: number, geometryId: number) => this;

Sets the geometryIndex of the instance at the given index.
Parameter instanceId
The id of the instance to set the geometryIndex of.
Parameter geometryId
The geometryIndex to be use by the instance.

method setGeometrySize

setGeometrySize: (maxVertexCount: number, maxIndexCount: number) => void;

Resizes the available space in BatchedMesh's vertex and index buffer attributes to the provided sizes. If the provided arguments shrink the geometry buffers but there is not enough unused space at the end of the geometry attributes then an error is thrown.
Parameter maxVertexCount
the max number of vertices to be used by all unique geometries to resize to.
Parameter maxIndexCount
the max number of indices to be used by all unique geometries to resize to.

method setInstanceCount

setInstanceCount: (maxInstanceCount: number) => void;

Resizes the necessary buffers to support the provided number of instances. If the provided arguments shrink the number of instances but there are not enough unused ids at the end of the list then an error is thrown.
Parameter maxInstanceCount
the max number of individual instances that can be added and rendered by the BatchedMesh.

method setMatrixAt

setMatrixAt: (instanceId: number, matrix: Matrix4) => this;

Sets the given local transformation matrix to the defined instance. Negatively scaled matrices are not supported.
Parameter instanceId
The id of an instance to set the matrix of.
Parameter matrix
A 4x4 matrix representing the local transformation of a single instance.

method setVisibleAt

setVisibleAt: (instanceId: number, visible: boolean) => this;

Sets the visibility of the instance at the given index.
Parameter instanceId
The id of the instance to set the visibility of.
Parameter visible
A boolean value indicating the visibility state.

class Bone

class Bone<
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

A Bone which is part of a Skeleton
Remarks
The skeleton in turn is used by the SkinnedMesh Bones are almost identical to a blank Object3D.
Example 1
const root = new THREE.Bone(); const child = new THREE.Bone(); root.add(child); child.position.y = 5;
See Also
- Official Documentation
- Source

property isBone

readonly isBone: boolean;

Read-only flag to check if a given object is of type Bone.
Remarks
This is a _constant_ value

property type

override readonly type: string;

Modifiers
- @override

constructor

constructor(name: string, times: ArrayLike<number>, values: ArrayLike<boolean>);

Constructs a new boolean keyframe track.
This keyframe track type has no interpolation parameter because the interpolation is always discrete.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.

class Box2

class Box2 {}

constructor

constructor(min?: Vector2, max?: Vector2);

property max

max: Vector2;

new THREE.Vector2( - Infinity, - Infinity )

property min

min: Vector2;

new THREE.Vector2( + Infinity, + Infinity )

method clampPoint

clampPoint: (point: Vector2, target: Vector2) => Vector2;

method clone

clone: () => this;

method containsBox

containsBox: (box: Box2) => boolean;

method containsPoint

containsPoint: (point: Vector2) => boolean;

method copy

copy: (box: Box2) => this;

method distanceToPoint

distanceToPoint: (point: Vector2) => number;

method empty

empty: () => any;

Deprecated
Use instead.

method equals

equals: (box: Box2) => boolean;

method expandByPoint

expandByPoint: (point: Vector2) => Box2;

method expandByScalar

expandByScalar: (scalar: number) => Box2;

method expandByVector

expandByVector: (vector: Vector2) => Box2;

method getCenter

getCenter: (target: Vector2) => Vector2;

method getParameter

getParameter: (point: Vector2, target: Vector2) => Vector2;

method getSize

getSize: (target: Vector2) => Vector2;

method intersect

intersect: (box: Box2) => Box2;

method intersectsBox

intersectsBox: (box: Box2) => boolean;

method isEmpty

isEmpty: () => boolean;

method makeEmpty

makeEmpty: () => Box2;

method set

set: (min: Vector2, max: Vector2) => Box2;

method setFromCenterAndSize

setFromCenterAndSize: (center: Vector2, size: Vector2) => Box2;

method setFromPoints

setFromPoints: (points: Vector2[]) => Box2;

method translate

translate: (offset: Vector2) => Box2;

method union

union: (box: Box2) => Box2;

class Box3

class Box3 {}

constructor

constructor(min?: Vector3, max?: Vector3);

property isBox3

readonly isBox3: boolean;

property max

max: Vector3;

new THREE.Vector3( - Infinity, - Infinity, - Infinity )

property min

min: Vector3;

new THREE.Vector3( + Infinity, + Infinity, + Infinity )

method applyMatrix4

applyMatrix4: (matrix: Matrix4) => this;

method clampPoint

clampPoint: (point: Vector3, target: Vector3) => Vector3;

method clone

clone: () => this;

method containsBox

containsBox: (box: Box3) => boolean;

method containsPoint

containsPoint: (point: Vector3) => boolean;

method copy

copy: (box: Box3) => this;

method distanceToPoint

distanceToPoint: (point: Vector3) => number;

method empty

empty: () => any;

Deprecated
Use instead.

method equals

equals: (box: Box3) => boolean;

method expandByObject

expandByObject: (object: Object3D, precise?: boolean) => this;

method expandByPoint

expandByPoint: (point: Vector3) => this;

method expandByScalar

expandByScalar: (scalar: number) => this;

method expandByVector

expandByVector: (vector: Vector3) => this;

method fromJSON

fromJSON: (json: Box3JSON) => this;

method getBoundingSphere

getBoundingSphere: (target: Sphere) => Sphere;

method getCenter

getCenter: (target: Vector3) => Vector3;

method getParameter

getParameter: (point: Vector3, target: Vector3) => Vector3;

method getSize

getSize: (target: Vector3) => Vector3;

method intersect

intersect: (box: Box3) => this;

method intersectsBox

intersectsBox: (box: Box3) => boolean;

method intersectsPlane

intersectsPlane: (plane: Plane) => boolean;

method intersectsSphere

intersectsSphere: (sphere: Sphere) => boolean;

method intersectsTriangle

intersectsTriangle: (triangle: Triangle) => boolean;

method isEmpty

isEmpty: () => boolean;

method makeEmpty

makeEmpty: () => this;

method set

set: (min: Vector3, max: Vector3) => this;

method setFromArray

setFromArray: (array: ArrayLike<number>) => this;

method setFromBufferAttribute

setFromBufferAttribute: (bufferAttribute: BufferAttribute) => this;

method setFromCenterAndSize

setFromCenterAndSize: (center: Vector3, size: Vector3) => this;

method setFromObject

setFromObject: (object: Object3D, precise?: boolean) => this;

method setFromPoints

setFromPoints: (points: Vector3[]) => this;

method toJSON

toJSON: () => Box3JSON;

method translate

translate: (offset: Vector3) => this;

method union

union: (box: Box3) => this;

class Box3Helper

class Box3Helper extends LineSegments {}

Helper object to visualize a Box3.

Example 1

const box = new THREE.Box3();
box.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 1, 3));
const helper = new THREE.Box3Helper(box, 0xffff00);
scene.add(helper);

constructor

constructor(box: Box3, color?: ColorRepresentation);

Creates a new wireframe box that represents the passed Box3.
Parameter box
The Box3 to show.
Parameter color
The box's color. Default 0xffff00

property box

box: Box3;

The Box3 being visualized.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

class BoxGeometry

class BoxGeometry extends BufferGeometry {}

BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'
Remarks
On creation, the cuboid is centred on the origin, with each edge parallel to one of the axes.
Example 1
const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube);
See Also
- Official Documentation
- Source

constructor

constructor(
    width?: number,
    height?: number,
    depth?: number,
    widthSegments?: number,
    heightSegments?: number,
    depthSegments?: number
);

Create a new instance of BoxGeometry
Parameter width
Width; that is, the length of the edges parallel to the X axis. Optional; Expects a Float. Default 1
Parameter height
Height; that is, the length of the edges parallel to the Y axis. Optional; Expects a Float. Default 1
Parameter depth
Depth; that is, the length of the edges parallel to the Z axis. Optional; Expects a Float. Default 1
Parameter widthSegments
Number of segmented rectangular faces along the width of the sides. Optional; Expects a Integer. Default 1
Parameter heightSegments
Number of segmented rectangular faces along the height of the sides. Optional; Expects a Integer. Default 1
Parameter depthSegments
Number of segmented rectangular faces along the depth of the sides. Optional; Expects a Integer. Default 1

property parameters

readonly parameters: {
    readonly width: number;
    readonly height: number;
    readonly depth: number;
    readonly widthSegments: number;
    readonly heightSegments: number;
    readonly depthSegments: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class BoxHelper

class BoxHelper extends LineSegments<BufferGeometry, LineBasicMaterial> {}

Helper object to graphically show the world-axis-aligned bounding box around an object
Remarks
The actual bounding box is handled with Box3, this is just a visual helper for debugging It can be automatically resized with the BoxHelper.update method when the object it's created from is transformed Note that the object must have a BufferGeometry for this to work, so it won't work with Sprites.
Example 1
const sphere = new THREE.SphereGeometry(); const object = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial(0xff0000)); const box = new THREE.BoxHelper(object, 0xffff00); scene.add(box);
See Also
- Example: WebGL / helpers
- Example: WebGL / loader / nrrd
- Example: WebGL / buffergeometry / drawrange
- Official Documentation
- Source

constructor

constructor(object: Object3D<Object3DEventMap>, color?: ColorRepresentation);

Creates a new wireframe box that bounds the passed object
Parameter object
The object3D to show the world-axis-aligned bounding box.
Parameter color
Hexadecimal value that defines the box's color. Default 0xffff00
Remarks
Internally this uses Box3.setFromObject to calculate the dimensions Note that this includes any children.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method setFromObject

setFromObject: (object: Object3D) => this;

Updates the wireframe box for the passed object.
Parameter object
Object3D to create the helper of.

method update

update: (object?: Object3D) => void;

Updates the helper's geometry to match the dimensions of the object, including any children
Remarks
See Box3.setFromObject.

class BufferAttribute

class BufferAttribute {}

This class stores data for an attribute (such as vertex positions, face indices, normals, colors, UVs, and any custom attributes ) associated with a BufferGeometry, which allows for more efficient passing of data to the GPU
Remarks
When working with _vector-like_ data, the _.fromBufferAttribute( attribute, index )_ helper methods on Vector2, Vector3, Vector4, and Color classes may be helpful.
See Also
- BufferGeometry for details and a usage examples.
- Example: WebGL / BufferGeometry - Clean up Memory
- Official Documentation
- Source

constructor

constructor(array: TypedArray, itemSize: number, normalized?: boolean);

This creates a new GLBufferAttribute object.
Parameter array
Must be a TypedArray. Used to instantiate the buffer. This array should have itemSize * numVertices elements, where numVertices is the number of vertices in the associated BufferGeometry.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
Throws
TypeError When the array is not a TypedArray;

property array

array: TypedArray;

The TypedArray holding data stored in the buffer.
Returns
TypedArray

property count

readonly count: number;

Represents the number of items this buffer attribute stores. It is internally computed by dividing the array's length by the itemSize. Read-only property.

property gpuType

gpuType: AttributeGPUType;

Configures the bound GPU type for use in shaders. Either FloatType or IntType, default is FloatType.
Note: this only has an effect for integer arrays and is not configurable for float arrays. For lower precision float types, see https://threejs.org/docs/#api/en/core/bufferAttributeTypes/BufferAttributeTypes.

property id

readonly id: number;

Unique number for this attribute instance.

property isBufferAttribute

readonly isBufferAttribute: boolean;

Read-only flag to check if a given object is of type BufferAttribute.
Remarks
This is a _constant_ value

property itemSize

itemSize: number;

The length of vectors that are being stored in the array.
Remarks
Expects a Integer

property name

name: string;

Optional name for this attribute instance.

property normalized

normalized: boolean;

Indicates how the underlying data in the buffer maps to the values in the GLSL shader code.
See Also
- constructor above for details.

property onUploadCallback

onUploadCallback: () => void;

A callback function that is executed after the Renderer has transferred the attribute array data to the GPU.

property updateRanges

updateRanges: { start: number; count: number }[];

This can be used to only update some components of stored vectors (for example, just the component related to color). Use the function to add ranges to this array.

property usage

usage: Usage;

Defines the intended usage pattern of the data store for optimization purposes. Corresponds to the usage parameter of WebGLRenderingContext.bufferData.
Remarks
After the initial use of a buffer, its usage cannot be changed. Instead, instantiate a new one and set the desired usage before the next render.
See Also
- Buffer Attribute Usage Constants for all possible values.
- setUsage

property version

version: number;

A version number, incremented every time the needsUpdate property is set to true.
Remarks
Expects a Integer

method addUpdateRange

addUpdateRange: (start: number, count: number) => void;

Adds a range of data in the data array to be updated on the GPU. Adds an object describing the range to the array.

method applyMatrix3

applyMatrix3: (m: Matrix3) => this;

Applies matrix m to every Vector3 element of this BufferAttribute.
Parameter m

method applyMatrix4

applyMatrix4: (m: Matrix4) => this;

Applies matrix m to every Vector3 element of this BufferAttribute.
Parameter m

method applyNormalMatrix

applyNormalMatrix: (m: Matrix3) => this;

Applies normal matrix m to every Vector3 element of this BufferAttribute.
Parameter m

method clone

clone: () => BufferAttribute;

Returns
a copy of this BufferAttribute.

method copy

copy: (source: BufferAttribute) => this;

Copies another BufferAttribute to this BufferAttribute.
Parameter bufferAttribute

method copyArray

copyArray: (array: ArrayLike<number>) => this;

Copy the array given here (which can be a normal array or TypedArray) into array.
See Also
- TypedArray.set for notes on requirements if copying a TypedArray.

method copyAt

copyAt: (index1: number, attribute: BufferAttribute, index2: number) => this;

Copy a vector from bufferAttribute[index2] to array[index1].
Parameter index1
Parameter bufferAttribute
Parameter index2

method getComponent

getComponent: (index: number, component: number) => number;

Returns the given component of the vector at the given index.

method getW

getW: (index: number) => number;

Returns the w component of the vector at the given index.
Parameter index
Expects a Integer

method getX

getX: (index: number) => number;

Returns the x component of the vector at the given index.
Parameter index
Expects a Integer

method getY

getY: (index: number) => number;

Returns the y component of the vector at the given index.
Parameter index
Expects a Integer

method getZ

getZ: (index: number) => number;

Returns the z component of the vector at the given index.
Parameter index
Expects a Integer

method onUpload

onUpload: (callback: () => void) => this;

Sets the value of the onUploadCallback property.
Parameter callback
function that is executed after the Renderer has transferred the attribute array data to the GPU.
See Also
- Example: WebGL / BufferGeometry this is used to free memory after the buffer has been transferred to the GPU.
- onUploadCallback

method set

set: (value: ArrayLike<number> | ArrayBufferView, offset?: number) => this;

Calls TypedArray.set( value, offset ) on the array.
Parameter value
Array or TypedArray from which to copy values.
Parameter offset
index of the array at which to start copying. Expects a Integer. Default 0.
Throws
RangeError When offset is negative or is too large.

method setComponent

setComponent: (index: number, component: number, value: number) => void;

Sets the given component of the vector at the given index.

method setUsage

setUsage: (usage: Usage) => this;

Set usage
Parameter value
Corresponds to the usage parameter of WebGLRenderingContext.bufferData.
Remarks
After the initial use of a buffer, its usage cannot be changed. Instead, instantiate a new one and set the desired usage before the next render.
See Also
- Buffer Attribute Usage Constants for all possible values.
- usage

method setW

setW: (index: number, z: number) => this;

Sets the w component of the vector at the given index.
Parameter index
Expects a Integer
Parameter w

method setX

setX: (index: number, x: number) => this;

Sets the x component of the vector at the given index.
Parameter index
Expects a Integer
Parameter x

method setXY

setXY: (index: number, x: number, y: number) => this;

Sets the x and y components of the vector at the given index.
Parameter index
Expects a Integer
Parameter x
Parameter y

method setXYZ

setXYZ: (index: number, x: number, y: number, z: number) => this;

Sets the x, y and z components of the vector at the given index.
Parameter index
Expects a Integer
Parameter x
Parameter y
Parameter z

method setXYZW

setXYZW: (index: number, x: number, y: number, z: number, w: number) => this;

Sets the x, y, z and w components of the vector at the given index.
Parameter index
Expects a Integer
Parameter x
Parameter y
Parameter z
Parameter w

method setY

setY: (index: number, y: number) => this;

Sets the y component of the vector at the given index.
Parameter index
Expects a Integer
Parameter y

method setZ

setZ: (index: number, z: number) => this;

Sets the z component of the vector at the given index.
Parameter index
Expects a Integer
Parameter z

method toJSON

toJSON: () => BufferAttributeJSON;

Convert this object to three.js to the data.attributes part of JSON Geometry format v4,

method transformDirection

transformDirection: (m: Matrix4) => this;

Applies matrix m to every Vector3 element of this BufferAttribute, interpreting the elements as a direction vectors.
Parameter m

class BufferGeometry

class BufferGeometry<
    Attributes extends NormalOrGLBufferAttributes = NormalBufferAttributes,
    TEventMap extends BufferGeometryEventMap = BufferGeometryEventMap
> extends EventDispatcher<TEventMap> {}

A representation of mesh, line, or point geometry Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU.

Remarks

To read and edit data in BufferGeometry attributes, see BufferAttribute documentation.

Example 1

const geometry = new THREE.BufferGeometry();

// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array( [
  -1.0, -1.0,  1.0, // v0
   1.0, -1.0,  1.0, // v1
   1.0,  1.0,  1.0, // v2

   1.0,  1.0,  1.0, // v3
  -1.0,  1.0,  1.0, // v4
  -1.0, -1.0,  1.0  // v5
] );

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );

Example 2

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array( [
  -1.0, -1.0,  1.0, // v0
   1.0, -1.0,  1.0, // v1
   1.0,  1.0,  1.0, // v2
  -1.0,  1.0,  1.0, // v3
] );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

const indices = [
  0, 1, 2,
  2, 3, 0,
];

geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );

const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );

constructor

constructor();

This creates a new BufferGeometry object.

property attributes

attributes: NormalOrGLBufferAttributes;

This hashmap has as id the name of the attribute to be set and as value the buffer to set it to. Rather than accessing this property directly, use .setAttribute and .getAttribute to access attributes of this geometry.

property boundingBox

boundingBox: Box3;

Bounding box for the BufferGeometry, which can be calculated with .computeBoundingBox().
Remarks
Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are null.

property boundingSphere

boundingSphere: Sphere;

Bounding sphere for the BufferGeometry, which can be calculated with .computeBoundingSphere().
Remarks
bounding spheres aren't computed by default. They need to be explicitly computed, otherwise they are null.

property drawRange

drawRange: { start: number; count: number };

Determines the part of the geometry to render. This should not be set directly, instead use .setDrawRange(...).
Remarks
For indexed BufferGeometry, count is the number of indices to render.

property groups

groups: GeometryGroup[];

Split the geometry into groups, each of which will be rendered in a separate WebGL draw call. This allows an array of materials to be used with the geometry.
Remarks
Use .addGroup to add groups, rather than modifying this array directly.

property id

id: number;

Unique number for this BufferGeometry instance.
Remarks
Expects a Integer

property index

index: BufferAttribute;

Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles". Each triangle is associated with the indices of three vertices. This attribute therefore stores the index of each vertex for each triangular face. If this attribute is not set, the renderer assumes that each three contiguous positions represent a single triangle.

property indirect

indirect: IndirectStorageBufferAttribute;

property indirectOffset

indirectOffset: number | number[];

property isBufferGeometry

readonly isBufferGeometry: boolean;

Read-only flag to check if a given object is of type BufferGeometry.
Remarks
This is a _constant_ value

property morphAttributes

morphAttributes: {
    position?: Array<BufferAttribute | InterleavedBufferAttribute> | undefined;
    normal?: Array<BufferAttribute | InterleavedBufferAttribute> | undefined;
    color?: Array<BufferAttribute | InterleavedBufferAttribute> | undefined;
};

Hashmap of BufferAttributes holding details of the geometry's morph targets.
Remarks
Once the geometry has been rendered, the morph attribute data cannot be changed. You will have to call .dispose(), and create a new instance of BufferGeometry.

property morphTargetsRelative

morphTargetsRelative: boolean;

Used to control the morph target behavior; when set to true, the morph target data is treated as relative offsets, rather than as absolute positions/normals.

property name

name: string;

Optional name for this BufferGeometry instance.

property type

readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property userData

userData: Record<string, any>;

An object that can be used to store custom data about the BufferGeometry. It should not hold references to functions as these will not be cloned.

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

method addGroup

addGroup: (start: number, count: number, materialIndex?: number) => void;

Adds a group to this geometry
Parameter start
Parameter count
Parameter materialIndex
See Also
- the groups property for details.

method applyMatrix4

applyMatrix4: (matrix: Matrix4) => this;

Applies the matrix transform to the geometry.
Parameter matrix

method applyQuaternion

applyQuaternion: (quaternion: Quaternion) => this;

Applies the rotation represented by the quaternion to the geometry.
Parameter quaternion

method center

center: () => this;

Center the geometry based on the bounding box.

method clearGroups

clearGroups: () => void;

Clears all groups.

method clone

clone: () => this;

Creates a clone of this BufferGeometry

method computeBoundingBox

computeBoundingBox: () => void;

Computes the bounding box of the geometry, and updates the attribute. The bounding box is not computed by the engine; it must be computed by your app. You may need to recompute the bounding box if the geometry vertices are modified.

method computeBoundingSphere

computeBoundingSphere: () => void;

Computes the bounding sphere of the geometry, and updates the attribute. The engine automatically computes the bounding sphere when it is needed, e.g., for ray casting or view frustum culling. You may need to recompute the bounding sphere if the geometry vertices are modified.

method computeTangents

computeTangents: () => void;

Calculates and adds a tangent attribute to this geometry. The computation is only supported for indexed geometries and if position, normal, and uv attributes are defined
Remarks
When using a tangent space normal map, prefer the MikkTSpace algorithm provided by BufferGeometryUtils.computeMikkTSpaceTangents instead.

method computeVertexNormals

computeVertexNormals: () => void;

Computes vertex normals for the given vertex data. For indexed geometries, the method sets each vertex normal to be the average of the face normals of the faces that share that vertex. For non-indexed geometries, vertices are not shared, and the method sets each vertex normal to be the same as the face normal.

method copy

copy: (source: BufferGeometry) => this;

Copies another BufferGeometry to this BufferGeometry.
Parameter source

method deleteAttribute

deleteAttribute: (name: keyof Attributes) => this;

Deletes the attribute with the specified name.
Parameter name

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance.
Remarks
Call this method whenever this instance is no longer used in your app.

method getAttribute

getAttribute: <K extends keyof Attributes>(name: K) => Attributes[K];

Returns the attribute with the specified name.
Parameter name

method getIndex

getIndex: () => BufferAttribute | null;

Return the .index buffer.

method getIndirect

getIndirect: () => IndirectStorageBufferAttribute | null;

method hasAttribute

hasAttribute: (name: keyof Attributes) => boolean;

Returns true if the attribute with the specified name exists.
Parameter name

method lookAt

lookAt: (vector: Vector3) => this;

Rotates the geometry to face a point in space.
Parameter vector
A world vector to look at.
Remarks
Use Object3D.lookAt for typical real-time mesh usage.

method normalizeNormals

normalizeNormals: () => void;

Every normal vector in a geometry will have a magnitude of 1
Remarks
This will correct lighting on the geometry surfaces.

method rotateX

rotateX: (angle: number) => this;

Rotate the geometry about the X axis. This is typically done as a one time operation, and not during a loop.
Parameter angle
radians. Expects a Float
Remarks
Use Object3D.rotation for typical real-time mesh rotation.

method rotateY

rotateY: (angle: number) => this;

Rotate the geometry about the Y axis.
Parameter angle
radians. Expects a Float
Remarks
Use Object3D.rotation for typical real-time mesh rotation.

method rotateZ

rotateZ: (angle: number) => this;

Rotate the geometry about the Z axis.
Parameter angle
radians. Expects a Float
Remarks
Use Object3D.rotation for typical real-time mesh rotation.

method scale

scale: (x: number, y: number, z: number) => this;

Scale the geometry data.
Parameter x
Expects a Float
Parameter y
Expects a Float
Parameter z
Expects a Float
Remarks
Use Object3D.scale for typical real-time mesh scaling.

method setAttribute

setAttribute: <K extends keyof Attributes>(
    name: K,
    attribute: Attributes[K]
) => this;

Sets an attribute to this geometry with the specified name.
Parameter name
Parameter attribute
Remarks
Use this rather than the attributes property, because an internal hashmap of .attributes is maintained to speed up iterating over attributes.

method setDrawRange

setDrawRange: (start: number, count: number) => void;

Set the .drawRange property
Parameter start
Parameter count
is the number of vertices or indices to render. Expects a Integer
Remarks
For indexed BufferGeometry, count is the number of indices to render.

method setFromPoints

setFromPoints: (points: Vector3[] | Vector2[]) => this;

Defines a geometry by creating a position attribute based on the given array of points. The array can hold instances of Vector2 or Vector3. When using two-dimensional data, the z coordinate for all vertices is set to 0.
If the method is used with an existing position attribute, the vertex data are overwritten with the data from the array. The length of the array must match the vertex count.

method setIndex

setIndex: (index: BufferAttribute | number[] | null) => this;

Set the .index buffer.
Parameter index

method setIndirect

setIndirect: (
    indirect: IndirectStorageBufferAttribute | null,
    indirectOffset?: number | number[]
) => this;

method toJSON

toJSON: () => BufferGeometryJSON;

Convert the buffer geometry to three.js JSON Object/Scene format.

method toNonIndexed

toNonIndexed: () => BufferGeometry;

Return a non-index version of an indexed BufferGeometry.

method translate

translate: (x: number, y: number, z: number) => this;

Translate the geometry.
Parameter x
Expects a Float
Parameter y
Expects a Float
Parameter z
Expects a Float
Remarks
Use Object3D.position for typical real-time mesh rotation.

class BufferGeometryLoader

class BufferGeometryLoader extends Loader<
    InstancedBufferGeometry | BufferGeometry
> {}

constructor

constructor(manager?: LoadingManager);

method parse

parse: (json: unknown) => InstancedBufferGeometry | BufferGeometry;

class Camera

class Camera extends Object3D {}

Abstract base class for cameras
Remarks
This class should always be inherited when you build a new camera.
See Also
- Official Documentation
- Source

constructor

constructor();

Remarks
Note that this class is not intended to be called directly; you probably want a PerspectiveCamera or OrthographicCamera instead.

property coordinateSystem

coordinateSystem: CoordinateSystem;

property isCamera

readonly isCamera: boolean;

Read-only flag to check if a given object is of type Camera.
Remarks
This is a _constant_ value

property layers

override layers: Layers;

The layers that the Camera is a member of.
Remarks
Objects must share at least one layer with the Camera to be n when the camera's viewpoint is rendered.
Modifiers
- @override

property matrixWorldInverse

matrixWorldInverse: Matrix4;

This is the inverse of matrixWorld.
Remarks
MatrixWorld contains the Matrix which has the world transform of the Camera .

property projectionMatrix

projectionMatrix: Matrix4;

This is the matrix which contains the projection.

property projectionMatrixInverse

projectionMatrixInverse: Matrix4;

This is the inverse of projectionMatrix.

property reversedDepth

readonly reversedDepth: boolean;

The flag that indicates whether the camera uses a reversed depth buffer.
false

property type

override readonly type: string;

Modifiers
- @override

property viewport

viewport?: Vector4;

method getWorldDirection

getWorldDirection: (target: Vector3) => Vector3;

Returns a Vector3 representing the world space direction in which the Camera is looking.
Parameter target
The result will be copied into this Vector3.
Remarks
Note: A Camera looks down its local, negative z-axis.

class CameraHelper

class CameraHelper extends LineSegments {}

This helps with visualizing what a camera contains in its frustum
Remarks
CameraHelper must be a child of the scene.
Example 1
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const helper = new THREE.CameraHelper(camera); scene.add(helper);
See Also
- Example: WebGL / camera
- Example: WebGL / extrude / splines
- Official Documentation
- Source

constructor

constructor(camera: Camera);

This create a new CameraHelper for the specified camera.
Parameter camera
The camera to visualize.

property camera

camera: Camera;

The camera being visualized.

property matrix

matrix: Matrix4;

Reference to the camera.matrixWorld.

property matrixAutoUpdate

override matrixAutoUpdate: boolean;

Is set to false, as the helper is using the camera.matrixWorld.
See Also
- Object3D.matrixAutoUpdate.

property pointMap

pointMap: { [id: string]: number[] };

This contains the points used to visualize the camera.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method setColors

setColors: (
    frustum: Color,
    cone: Color,
    up: Color,
    target: Color,
    cross: Color
) => this;

Defines the colors of the helper.
Parameter frustum
Parameter cone
Parameter up
Parameter target
Parameter cross

method update

update: () => void;

Updates the helper based on the projectionMatrix of the camera.

class CanvasTexture

class CanvasTexture<TCanvas = HTMLCanvasElement> extends Texture<TCanvas> {}

Creates a texture from a canvas element.
Remarks
This is almost the same as the base Texture class, except that it sets needsUpdate to true immediately.
See Also

constructor

constructor(
    canvas?: {},
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    format?: PixelFormat,
    type?: TextureDataType,
    anisotropy?: number
);

This creates a new CanvasTexture object.
Parameter canvas
The HTML canvas element from which to load the texture.
Parameter mapping
See .mapping. Default THREE.Texture.DEFAULT_MAPPING
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.LinearFilter
Parameter minFilter
See .minFilter. Default THREE.LinearMipmapLinearFilter
Parameter format
See .format. Default THREE.RGBAFormat
Parameter type
See . Default THREE.UnsignedByteType
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY

property isCanvasTexture

readonly isCanvasTexture: boolean;

Read-only flag to check if a given object is of type CanvasTexture.
Remarks
This is a _constant_ value

class CapsuleGeometry

class CapsuleGeometry extends BufferGeometry {}

CapsuleGeometry is a geometry class for a capsule with given radii and height

Remarks

It is constructed using a lathe.

Example 1

const geometry = new THREE.CapsuleGeometry(1, 1, 4, 8);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const capsule = new THREE.Mesh(geometry, material);
scene.add(capsule);

constructor

constructor(
    radius?: number,
    height?: number,
    capSegments?: number,
    radialSegments?: number,
    heightSegments?: number
);

Create a new instance of CapsuleGeometry
Parameter radius
Radius of the capsule. Expects a Float. Default 1
Parameter height
Height of the middle section. Expects a Float. Default 1
Parameter capSegments
Number of curve segments used to build the caps. Expects a Integer. Default 4
Parameter radialSegments
Number of segmented faces around the circumference of the capsule. Expects a Integer. Default 8
Parameter heightSegments
Number of rows of faces along the height of the capsule. Optional; defaults to 1.

property parameters

readonly parameters: {
    readonly radius: number;
    readonly height: number;
    readonly capSegments: number;
    readonly radialSegments: number;
    readonly heightSegments: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class CatmullRomCurve3

class CatmullRomCurve3 extends Curve<Vector3> {}

Create a smooth **3D** spline curve from a series of points using the Catmull-Rom algorithm.

Example 1

//Create a closed wavey loop
const curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-10, 0, 10),
new THREE.Vector3(-5, 5, 5),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, -5, 5),
new THREE.Vector3(10, 0, 10)]);
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometry, material);

constructor

constructor(
    points?: Vector3[],
    closed?: boolean,
    curveType?: CurveType,
    tension?: number
);

This constructor creates a new CatmullRomCurve3.
Parameter points
An array of Vector3 points
Parameter closed
Whether the curve is closed. Default false
Parameter curveType
Type of the curve. Default centripetal
Parameter tension
Tension of the curve. Expects a Float. Default 0.5

property closed

closed: boolean;

The curve will loop back onto itself when this is true.

property curveType

curveType: CurveType;

Possible values are centripetal, chordal and catmullrom.

property isCatmullRomCurve3

readonly isCatmullRomCurve3: boolean;

Read-only flag to check if a given object is of type CatmullRomCurve3.
Remarks
This is a _constant_ value

property points

points: Vector3[];

The array of Vector3 points that define the curve.
Remarks
It needs at least two entries.

property tension

tension: number;

When is catmullrom, defines catmullrom's tension.
Remarks
Expects a Float

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class CircleGeometry

class CircleGeometry extends BufferGeometry {}

CircleGeometry is a simple shape of Euclidean geometry
Remarks
It is constructed from a number of triangular segments that are oriented around a central point and extend as far out as a given radius It is built counter-clockwise from a start angle and a given central angle It can also be used to create regular polygons, where the number of segments determines the number of sides.
Example 1
const geometry = new THREE.CircleGeometry(5, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const circle = new THREE.Mesh(geometry, material); scene.add(circle);
See Also
- Official Documentation
- Source

constructor

constructor(
    radius?: number,
    segments?: number,
    thetaStart?: number,
    thetaLength?: number
);

Create a new instance of CircleGeometry
Parameter radius
Radius of the circle. Expects a Float. Default 1
Parameter segments
Number of segments (triangles). Expects a Integer. Minimum 3. Default 32
Parameter thetaStart
Start angle for first segment. Expects a Float. Default 0, _(three o'clock position)_.
Parameter thetaLength
The central angle, often called theta, of the circular sector. Expects a Float. Default Math.PI * 2, _which makes for a complete circle_.

property parameters

readonly parameters: {
    readonly radius: number;
    readonly segments: number;
    readonly thetaStart: number;
    readonly thetaLength: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Clock

class Clock {}

Object for keeping track of time. This uses [performance.now]https://developer.mozilla.org/en-US/docs/Web/API/Performance/now.
See Also
- [Official Documentation]https://threejs.org/docs/index.html#api/en/core/Clock
- [Source]https://github.com/mrdoob/three.js/blob/master/src/core/Clock.js

constructor

constructor(autoStart?: boolean);

Create a new instance of Clock
Parameter autoStart
Whether to automatically start the clock when .getDelta() is called for the first time. Default true

property autoStart

autoStart: boolean;

If set, starts the clock automatically when .getDelta() is called for the first time.

property elapsedTime

elapsedTime: number;

Keeps track of the total time that the clock has been running.

property oldTime

oldTime: number;

Holds the time at which the clock's .start(), .getElapsedTime() or .getDelta() methods were last called.

property running

running: boolean;

Whether the clock is running or not.

property startTime

startTime: number;

Holds the time at which the clock's .start() method was last called.

method getDelta

getDelta: () => number;

Get the seconds passed since the time .oldTime was set and sets .oldTime to the current time.
Remarks
If .autoStart is true and the clock is not running, also starts the clock.

method getElapsedTime

getElapsedTime: () => number;

Get the seconds passed since the clock started and sets .oldTime to the current time.
Remarks
If .autoStart is true and the clock is not running, also starts the clock.

method start

start: () => void;

Starts clock.
Remarks
Also sets the .startTime and .oldTime to the current time, sets .elapsedTime to 0 and .running to true.

method stop

stop: () => void;

Stops clock and sets oldTime to the current time.

class Color

class Color {}

Class representing a color.
A Color instance is represented by RGB components in the linear working color space, which defaults to LinearSRGBColorSpace. Inputs conventionally using SRGBColorSpace (such as hexadecimals and CSS strings) are converted to the working color space automatically.
// converted automatically from SRGBColorSpace to LinearSRGBColorSpace const color = new THREE.Color().setHex( 0x112233 );
Source color spaces may be specified explicitly, to ensure correct conversions.
// assumed already LinearSRGBColorSpace; no conversion const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5 ); // converted explicitly from SRGBColorSpace to LinearSRGBColorSpace const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5, SRGBColorSpace );
If THREE.ColorManagement is disabled, no conversions occur. For details, see Color management.
Iterating through a Color instance will yield its components (r, g, b) in the corresponding order.

constructor

constructor(color?: ColorRepresentation);

constructor

constructor(r: number, g: number, b: number);

property b

b: number;

Blue channel value between 0.0 and 1.0. Default is 1. 1

property g

g: number;

Green channel value between 0.0 and 1.0. Default is 1. 1

property isColor

readonly isColor: boolean;

property NAMES

static NAMES: {
    aliceblue: 15792383;
    antiquewhite: 16444375;
    aqua: 65535;
    aquamarine: 8388564;
    azure: 15794175;
    beige: 16119260;
    bisque: 16770244;
    black: 0;
    blanchedalmond: 16772045;
    blue: 255;
    blueviolet: 9055202;
    brown: 10824234;
    burlywood: 14596231;
    cadetblue: 6266528;
    chartreuse: 8388352;
    chocolate: 13789470;
    coral: 16744272;
    cornflowerblue: 6591981;
    cornsilk: 16775388;
    crimson: 14423100;
    cyan: 65535;
    darkblue: 139;
    darkcyan: 35723;
    darkgoldenrod: 12092939;
    darkgray: 11119017;
    darkgreen: 25600;
    darkgrey: 11119017;
    darkkhaki: 12433259;
    darkmagenta: 9109643;
    darkolivegreen: 5597999;
    darkorange: 16747520;
    darkorchid: 10040012;
    darkred: 9109504;
    darksalmon: 15308410;
    darkseagreen: 9419919;
    darkslateblue: 4734347;
    darkslategray: 3100495;
    darkslategrey: 3100495;
    darkturquoise: 52945;
    darkviolet: 9699539;
    deeppink: 16716947;
    deepskyblue: 49151;
    dimgray: 6908265;
    dimgrey: 6908265;
    dodgerblue: 2003199;
    firebrick: 11674146;
    floralwhite: 16775920;
    forestgreen: 2263842;
    fuchsia: 16711935;
    gainsboro: 14474460;
    ghostwhite: 16316671;
    gold: 16766720;
    goldenrod: 14329120;
    gray: 8421504;
    green: 32768;
    greenyellow: 11403055;
    grey: 8421504;
    honeydew: 15794160;
    hotpink: 16738740;
    indianred: 13458524;
    indigo: 4915330;
    ivory: 16777200;
    khaki: 15787660;
    lavender: 15132410;
    lavenderblush: 16773365;
    lawngreen: 8190976;
    lemonchiffon: 16775885;
    lightblue: 11393254;
    lightcoral: 15761536;
    lightcyan: 14745599;
    lightgoldenrodyellow: 16448210;
    lightgray: 13882323;
    lightgreen: 9498256;
    lightgrey: 13882323;
    lightpink: 16758465;
    lightsalmon: 16752762;
    lightseagreen: 2142890;
    lightskyblue: 8900346;
    lightslategray: 7833753;
    lightslategrey: 7833753;
    lightsteelblue: 11584734;
    lightyellow: 16777184;
    lime: 65280;
    limegreen: 3329330;
    linen: 16445670;
    magenta: 16711935;
    maroon: 8388608;
    mediumaquamarine: 6737322;
    mediumblue: 205;
    mediumorchid: 12211667;
    mediumpurple: 9662683;
    mediumseagreen: 3978097;
    mediumslateblue: 8087790;
    mediumspringgreen: 64154;
    mediumturquoise: 4772300;
    mediumvioletred: 13047173;
    midnightblue: 1644912;
    mintcream: 16121850;
    mistyrose: 16770273;
    moccasin: 16770229;
    navajowhite: 16768685;
    navy: 128;
    oldlace: 16643558;
    olive: 8421376;
    olivedrab: 7048739;
    orange: 16753920;
    orangered: 16729344;
    orchid: 14315734;
    palegoldenrod: 15657130;
    palegreen: 10025880;
    paleturquoise: 11529966;
    palevioletred: 14381203;
    papayawhip: 16773077;
    peachpuff: 16767673;
    peru: 13468991;
    pink: 16761035;
    plum: 14524637;
    powderblue: 11591910;
    purple: 8388736;
    rebeccapurple: 6697881;
    red: 16711680;
    rosybrown: 12357519;
    royalblue: 4286945;
    saddlebrown: 9127187;
    salmon: 16416882;
    sandybrown: 16032864;
    seagreen: 3050327;
    seashell: 16774638;
    sienna: 10506797;
    silver: 12632256;
    skyblue: 8900331;
    slateblue: 6970061;
    slategray: 7372944;
    slategrey: 7372944;
    snow: 16775930;
    springgreen: 65407;
    steelblue: 4620980;
    tan: 13808780;
    teal: 32896;
    thistle: 14204888;
    tomato: 16737095;
    turquoise: 4251856;
    violet: 15631086;
    wheat: 16113331;
    white: 16777215;
    whitesmoke: 16119285;
    yellow: 16776960;
    yellowgreen: 10145074;
};

List of X11 color names.

property r

r: number;

Red channel value between 0.0 and 1.0. Default is 1. 1

method [Symbol.iterator]

[Symbol.iterator]: () => Generator<number, void>;

method add

add: (color: Color) => this;

method addColors

addColors: (color1: Color, color2: Color) => this;

method addScalar

addScalar: (s: number) => this;

method applyMatrix3

applyMatrix3: (m: Matrix3) => this;

Applies the transform m to this color's RGB components.

method clone

clone: () => this;

Clones this color.

method convertLinearToSRGB

convertLinearToSRGB: () => Color;

Converts this color from LinearSRGBColorSpace to SRGBColorSpace.

method convertSRGBToLinear

convertSRGBToLinear: () => Color;

Converts this color from SRGBColorSpace to LinearSRGBColorSpace.

method copy

copy: (color: Color) => this;

Copies given color.
Parameter color
Color to copy.

method copyLinearToSRGB

copyLinearToSRGB: (color: Color) => Color;

Copies given color making conversion from LinearSRGBColorSpace to SRGBColorSpace.
Parameter color
Color to copy.

method copySRGBToLinear

copySRGBToLinear: (color: Color) => Color;

Copies given color making conversion from SRGBColorSpace to LinearSRGBColorSpace.
Parameter color
Color to copy.

method equals

equals: (color: Color) => boolean;

method fromArray

fromArray: (array: number[] | ArrayLike<number>, offset?: number) => this;

Sets this color's red, green and blue value from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array-like. Default is 0.

method fromBufferAttribute

fromBufferAttribute: (
    attribute: BufferAttribute | InterleavedBufferAttribute,
    index: number
) => this;

method getHex

getHex: (colorSpace?: string) => number;

Returns the hexadecimal value of this color.

method getHexString

getHexString: (colorSpace?: string) => string;

Returns the string formatted hexadecimal value of this color.

method getHSL

getHSL: (target: HSL, colorSpace?: string) => HSL;

method getRGB

getRGB: (target: RGB, colorSpace?: string) => RGB;

method getStyle

getStyle: (colorSpace?: string) => string;

Returns the value of this color in CSS context style. Example: rgb(r, g, b)

method lerp

lerp: (color: Color, alpha: number) => this;

method lerpColors

lerpColors: (color1: Color, color2: Color, alpha: number) => this;

method lerpHSL

lerpHSL: (color: Color, alpha: number) => this;

method multiply

multiply: (color: Color) => this;

method multiplyScalar

multiplyScalar: (s: number) => this;

method offsetHSL

offsetHSL: (h: number, s: number, l: number) => this;

method set

set: (
    ...args: [color: ColorRepresentation] | [r: number, g: number, b: number]
) => this;

method setColorName

setColorName: (style: string, colorSpace?: string) => Color;

Sets this color from a color name. Faster than method if you don't need the other CSS-style formats.
Parameter style
Color name in X11 format.

method setFromVector3

setFromVector3: (vector: Vector3) => this;

Sets this color's r, g and b components from the x, y, and z components of the specified vector.

method setHex

setHex: (hex: number, colorSpace?: string) => Color;

method setHSL

setHSL: (h: number, s: number, l: number, colorSpace?: string) => Color;

Sets this color from HSL values. Based on MochiKit implementation by Bob Ippolito.
Parameter h
Hue channel value between 0 and 1.
Parameter s
Saturation value channel between 0 and 1.
Parameter l
Value channel value between 0 and 1.

method setRGB

setRGB: (r: number, g: number, b: number, colorSpace?: string) => Color;

Sets this color from RGB values.
Parameter r
Red channel value between 0 and 1.
Parameter g
Green channel value between 0 and 1.
Parameter b
Blue channel value between 0 and 1.

method setScalar

setScalar: (scalar: number) => Color;

method setStyle

setStyle: (style: string, colorSpace?: string) => Color;

Sets this color from a CSS context style string.
Parameter contextStyle
Color in CSS context style format.

method sub

sub: (color: Color) => this;

method toArray

toArray: {
    (array?: number[], offset?: number): number[];
    (xyz: ArrayLike<number>, offset?: number): ArrayLike<number>;
};

Returns an array [red, green, blue], or copies red, green and blue into the provided array.
Parameter array
(optional) array to store the color to. If this is not provided, a new array will be created.
Parameter offset
(optional) optional offset into the array. The created or provided array.
Copies red, green and blue into the provided array-like.
Parameter array
array-like to store the color to.
Parameter offset
(optional) optional offset into the array-like. The provided array-like.

method toJSON

toJSON: () => number;

This method defines the serialization result of Color. The color as a hexadecimal value.

class ColorKeyframeTrack

class ColorKeyframeTrack extends KeyframeTrack {}

A track for color keyframe values.

constructor

constructor(
    name: string,
    times: ArrayLike<number>,
    values: ArrayLike<number>,
    interpolation?: InterpolationModes
);

Constructs a new color keyframe track.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.
Parameter interpolation
The interpolation type.

class CompressedArrayTexture

class CompressedArrayTexture extends CompressedTexture<CompressedArrayTextureImageData> {}

Creates an texture 2D array based on data in compressed form, for example from a DDS file.
Remarks
For use with the CompressedTextureLoader.
See Also
- Official Documentation
- Source

constructor

constructor(
    mipmaps: CompressedTextureMipmap[],
    width: number,
    height: number,
    depth: number,
    format: CompressedPixelFormat,
    type?: TextureDataType
);

Create a new instance of CompressedArrayTexture
Parameter mipmaps
The mipmaps array should contain objects with data, width and height. The mipmaps should be of the correct format and type.
Parameter width
The width of the biggest mipmap.
Parameter height
The height of the biggest mipmap.
Parameter depth
The number of layers of the 2D array texture
Parameter format
The format used in the mipmaps. See THREE.CompressedPixelFormat.
Parameter type
See . Default THREE.UnsignedByteType

property isCompressedArrayTexture

readonly isCompressedArrayTexture: boolean;

Read-only flag to check if a given object is of type CompressedArrayTexture.
Remarks
This is a _constant_ value

property layerUpdates

layerUpdates: Set<number>;

A set of all layers which need to be updated in the texture. See CompressedArrayTexture.addLayerUpdate.

property wrapR

wrapR: Wrapping;

This defines how the texture is wrapped in the depth direction.
See Also
- Texture Constants

method addLayerUpdate

addLayerUpdate: (layerIndex: number) => void;

Describes that a specific layer of the texture needs to be updated. Normally when Texture.needsUpdate is set to true, the entire compressed texture array is sent to the GPU. Marking specific layers will only transmit subsets of all mipmaps associated with a specific depth in the array which is often much more performant.

method clearLayoutUpdates

clearLayoutUpdates: () => void;

Resets the layer updates registry. See CompressedArrayTexture.addLayerUpdate.

class CompressedCubeTexture

class CompressedCubeTexture extends CompressedTexture<
    CompressedTextureImageData[]
> {}

constructor

constructor(
    images: CompressedTextureImageData[],
    format?: CompressedPixelFormat,
    type?: TextureDataType
);

property isCompressedCubeTexture

readonly isCompressedCubeTexture: boolean;

property isCubeTexture

readonly isCubeTexture: boolean;

class CompressedTexture

class CompressedTexture<
    TImageData = CompressedTextureImageData
> extends Texture<TImageData> {}

Creates a texture based on data in compressed form, for example from a DDS file.
Remarks
For use with the CompressedTextureLoader.
See Also
- Official Documentation
- Source

constructor

constructor(
    mipmaps: CompressedTextureMipmap[],
    width: number,
    height: number,
    format?: CompressedPixelFormat,
    type?: TextureDataType,
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    anisotropy?: number,
    colorSpace?: string
);

This creates a new CompressedTexture object.
Parameter mipmaps
The mipmaps array should contain objects with data, width and height. The mipmaps should be of the correct format and type.
Parameter width
The width of the biggest mipmap.
Parameter height
The height of the biggest mipmap.
Parameter format
The format used in the mipmaps. See THREE.CompressedPixelFormat.
Parameter type
See . Default THREE.UnsignedByteType
Parameter mapping
See .mapping. Default THREE.Texture.DEFAULT_MAPPING
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.LinearFilter
Parameter minFilter
See .minFilter. Default THREE.LinearMipmapLinearFilter
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY
Parameter colorSpace
See Texture.colorSpace.colorSpace. Default NoColorSpace

property flipY

flipY: boolean;

No flipping for cube textures. (also flipping doesn't work for compressed textures)
Modifiers
- @override

property format

format: CompressedPixelFormat;

See Also
- Texture Constants
- THREE.CompressedPixelFormat
Modifiers
- @override

property generateMipmaps

generateMipmaps: boolean;

Can't generate mipmaps for compressed textures. mips must be embedded in DDS files
Modifiers
- @override

property isCompressedTexture

readonly isCompressedTexture: boolean;

Read-only flag to check if a given object is of type CompressedTexture.
Remarks
This is a _constant_ value

property mipmaps

mipmaps: CompressedTextureMipmap[];

The mipmaps array should contain objects with data, width and height. The mipmaps should be of the correct format and type.

class CompressedTextureLoader

class CompressedTextureLoader extends Loader<CompressedTexture> {}

constructor

constructor(manager?: LoadingManager);

method load

load: (
    url: string,
    onLoad?: (data: CompressedTexture) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => CompressedTexture;

class ConeGeometry

class ConeGeometry extends CylinderGeometry {}

A class for generating cone geometries.

Example 1

const geometry = new THREE.ConeGeometry(5, 20, 32);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const cone = new THREE.Mesh(geometry, material);
scene.add(cone);

constructor

constructor(
    radius?: number,
    height?: number,
    radialSegments?: number,
    heightSegments?: number,
    openEnded?: boolean,
    thetaStart?: number,
    thetaLength?: number
);

Create a new instance of ConeGeometry
Parameter radius
Radius of the cone base. Expects a Float. Default 1
Parameter height
Height of the cone. Expects a Float. Default 1
Parameter radialSegments
Number of segmented faces around the circumference of the cone. Expects a Integer. Default 32
Parameter heightSegments
Number of rows of faces along the height of the cone. Expects a Integer. Default 1
Parameter openEnded
A Boolean indicating whether the base of the cone is open or capped. Default false, _meaning capped_.
Parameter thetaStart
Start angle for first segment. Expects a Float. Default 0, _(three o'clock position)_.
Parameter thetaLength
The central angle, often called theta, of the circular sector. Expects a Float. Default Math.PI * 2, _which makes for a complete cone_.

property parameters

override readonly parameters: {
    readonly radius: number;
    readonly radiusTop: number;
    readonly radiusBottom: number;
    readonly height: number;
    readonly radialSegments: number;
    readonly heightSegments: number;
    readonly openEnded: boolean;
    readonly thetaStart: number;
    readonly thetaLength: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Controls

abstract class Controls<TEventMap extends {}> extends EventDispatcher<TEventMap> {}

Abstract base class for controls.

constructor

constructor(
    object: Object3D<Object3DEventMap>,
    domElement?: HTMLElement | SVGElement
);

Creates a new instance of Controls.
Parameter object
The object the controls should manage (usually the camera).
Parameter domElement
The HTML element used for event listeners. (optional)

property domElement

domElement: HTMLElement | SVGElement;

The HTML element used for event listeners. If not provided via the constructor, must be called after domElement has been set.

property enabled

enabled: boolean;

When set to false, the controls will not respond to user input. Default is true.

property object

object: Object3D<Object3DEventMap>;

The 3D object that is managed by the controls.

method connect

connect: (element: HTMLElement | SVGElement) => void;

Connects the controls to the DOM. This method has so called "side effects" since it adds the module's event listeners to the DOM.

method disconnect

disconnect: () => void;

Disconnects the controls from the DOM.

method dispose

dispose: () => void;

Call this method if you no longer want use to the controls. It frees all internal resources and removes all event listeners.

method update

update: (delta: number) => void;

Controls should implement this method if they have to update their internal state per simulation step.

class CubeCamera

class CubeCamera extends Object3D {}

Creates **6** cameras that render to a WebGLCubeRenderTarget.

Remarks

The cameras are added to the children array.

Example 1

// Create cube render target
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );

// Create cube camera
const cubeCamera = new THREE.CubeCamera( 1, 100000, cubeRenderTarget );
scene.add( cubeCamera );

// Create car
const chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeRenderTarget.texture } );
const car = new THREE.Mesh( carGeometry, chromeMaterial );
scene.add( car );

// Update the render target cube
car.visible = false;
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );

// Render the scene
car.visible = true;
renderer.render( scene, camera );

constructor

constructor(near: number, far: number, renderTarget: WebGLCubeRenderTarget);

Constructs a CubeCamera that contains 6 PerspectiveCameras that render to a WebGLCubeRenderTarget.
Parameter near
The near clipping distance.
Parameter far
The far clipping distance.
Parameter renderTarget
The destination cube render target.

property activeMipmapLevel

activeMipmapLevel: number;

property coordinateSystem

coordinateSystem: CoordinateSystem;

property renderTarget

renderTarget: WebGLCubeRenderTarget;

The destination cube render target.

property type

override readonly type: string;

Modifiers
- @override

method update

update: (renderer: CubeCameraRenderer, scene: Object3D) => void;

Call this to update the renderTarget.
Parameter renderer
The current WebGL renderer
Parameter scene
The current scene

method updateCoordinateSystem

updateCoordinateSystem: () => void;

class CubeTexture

class CubeTexture<TImage = unknown> extends Texture<TImage[]> {}

Creates a cube texture made up of six images.
Remarks
CubeTexture is almost equivalent in functionality and usage to Texture. The only differences are that the images are an array of _6_ images as opposed to a single image, and the mapping options are THREE.CubeReflectionMapping (default) or THREE.CubeRefractionMapping
Example 1
const loader = new THREE.CubeTextureLoader(); loader.setPath('textures/cube/pisa/'); const textureCube = loader.load(['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']); const material = new THREE.MeshBasicMaterial({ color: 0xffffff, envMap: textureCube });
See Also
- Official Documentation
- Source

constructor

constructor(
    images?: TImage[],
    mapping?: CubeTextureMapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    format?: PixelFormat,
    type?: TextureDataType,
    anisotropy?: number,
    colorSpace?: string
);

This creates a new CubeTexture object.
Parameter images
Parameter mapping
See .mapping. Default THREE.CubeReflectionMapping
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.LinearFilter
Parameter minFilter
See .minFilter. Default THREE.LinearMipmapLinearFilter
Parameter format
See .format. Default THREE.RGBAFormat
Parameter type
See . Default THREE.UnsignedByteType
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY
Parameter colorSpace
See .colorSpace. Default NoColorSpace

property flipY

flipY: boolean;

property images

images: TImage[];

An image object, typically created using the CubeTextureLoader.load() method.
See Also
- Texture.image

property isCubeTexture

readonly isCubeTexture: boolean;

Read-only flag to check if a given object is of type CubeTexture.
Remarks
This is a _constant_ value

property mapping

mapping: CubeTextureMapping;

class CubeTextureLoader

class CubeTextureLoader extends Loader<CubeTexture, readonly string[]> {}

constructor

constructor(manager?: LoadingManager);

method load

load: (
    url: readonly string[],
    onLoad?: (data: CubeTexture) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => CubeTexture;

class CubicBezierCurve

class CubicBezierCurve extends Curve<Vector2> {}

Create a smooth **2D** cubic bezier curve, defined by a start point, endpoint and two control points.

Example 1

const curve = new THREE.CubicBezierCurve(
new THREE.Vector2(-10, 0),
new THREE.Vector2(-5, 15),
new THREE.Vector2(20, 15),
new THREE.Vector2(10, 0));
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometry, material);

constructor

constructor(v0?: Vector2, v1?: Vector2, v2?: Vector2, v3?: Vector2);

This constructor creates a new CubicBezierCurve.
Parameter v0
The starting point. Default is new THREE.Vector2().
Parameter v1
The first control point. Default is new THREE.Vector2().
Parameter v2
The second control point. Default is new THREE.Vector2().
Parameter v3
The ending point. Default is new THREE.Vector2().

property isCubicBezierCurve

readonly isCubicBezierCurve: boolean;

Read-only flag to check if a given object is of type CubicBezierCurve.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property v0

v0: Vector2;

The starting point.

property v1

v1: Vector2;

The first control point.

property v2

v2: Vector2;

The second control point.

property v3

v3: Vector2;

The ending point.

class CubicBezierCurve3

class CubicBezierCurve3 extends Curve<Vector3> {}

Create a smooth **3D** cubic bezier curve, defined by a start point, endpoint and two control points.

Example 1

const curve = new THREE.CubicBezierCurve(
new THREE.Vector2(-10, 0),
new THREE.Vector2(-5, 15),
new THREE.Vector2(20, 15),
new THREE.Vector2(10, 0));
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometry, material);

constructor

constructor(v0?: Vector3, v1?: Vector3, v2?: Vector3, v3?: Vector3);

This constructor creates a new CubicBezierCurve3.
Parameter v0
The starting point. Default is new THREE.Vector3().
Parameter v1
The first control point. Default is new THREE.Vector3().
Parameter v2
The second control point. Default is new THREE.Vector3().
Parameter v3
The ending point. Default is new THREE.Vector3().

property isCubicBezierCurve3

readonly isCubicBezierCurve3: boolean;

Read-only flag to check if a given object is of type CubicBezierCurve3.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property v0

v0: Vector3;

The starting point.

property v1

v1: Vector3;

The first control point.

property v2

v2: Vector3;

The second control point.

property v3

v3: Vector3;

The ending point.

class CubicInterpolant

class CubicInterpolant extends Interpolant {}

constructor

constructor(
    parameterPositions: any,
    samplesValues: any,
    sampleSize: number,
    resultBuffer?: any
);

method interpolate_

interpolate_: (i1: number, t0: number, t: number, t1: number) => any;

class Curve

abstract class Curve<TVector extends Vector2 | Vector3> {}

An abstract base class for creating a Curve object that contains methods for interpolation
Remarks
This following curves inherit from THREE.Curve:
**2D curves** - THREE.ArcCurve - THREE.CubicBezierCurve - THREE.EllipseCurve - THREE.LineCurve - THREE.QuadraticBezierCurve - THREE.SplineCurve
**3D curves** - THREE.CatmullRomCurve3 - THREE.CubicBezierCurve3 - THREE.LineCurve3 - THREE.QuadraticBezierCurve3
See Also
- Official Documentation
- Source

constructor

protected constructor();

property arcLengthDivisions

arcLengthDivisions: number;

This value determines the amount of divisions when calculating the cumulative segment lengths of a Curve via . To ensure precision when using methods like , it is recommended to increase if the Curve is very large.
Remarks
Expects a Integer

property type

readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method clone

clone: () => this;

Creates a clone of this instance.

method computeFrenetFrames

computeFrenetFrames: (
    segments: number,
    closed?: boolean
) => { tangents: Vector3[]; normals: Vector3[]; binormals: Vector3[] };

Generates the Frenet Frames
Parameter segments
Expects a Integer
Parameter closed
Remarks
Requires a Curve definition in 3D space Used in geometries like TubeGeometry or ExtrudeGeometry.

method copy

copy: (source: Curve<TVector>) => this;

Copies another Curve object to this instance.
Parameter source

method fromJSON

fromJSON: (json: CurveJSON) => this;

Copies the data from the given JSON object to this instance.
Parameter json

method getLength

getLength: () => number;

Get total Curve arc length.

method getLengths

getLengths: (divisions?: number) => number[];

Get list of cumulative segment lengths.
Parameter divisions
Expects a Integer

method getPoint

getPoint: (t: number, optionalTarget?: TVector) => TVector;

Returns a vector for a given position on the curve.
Parameter t
A position on the curve. Must be in the range [ 0, 1 ]. Expects a Float
Parameter optionalTarget
If specified, the result will be copied into this Vector, otherwise a new Vector will be created. Default new T.

method getPointAt

getPointAt: (u: number, optionalTarget?: TVector) => TVector;

Returns a vector for a given position on the Curve according to the arc length.
Parameter u
A position on the Curve according to the arc length. Must be in the range [ 0, 1 ]. Expects a Float
Parameter optionalTarget
If specified, the result will be copied into this Vector, otherwise a new Vector will be created. Default new T.

method getPoints

getPoints: (divisions?: number) => TVector[];

Returns a set of divisions +1 points using .
Parameter divisions
Number of pieces to divide the Curve into. Expects a Integer. Default 5

method getSpacedPoints

getSpacedPoints: (divisions?: number) => TVector[];

Returns a set of divisions +1 equi-spaced points using .
Parameter divisions
Number of pieces to divide the Curve into. Expects a Integer. Default 5

method getTangent

getTangent: (t: number, optionalTarget?: TVector) => TVector;

Returns a unit vector tangent at t
Parameter t
A position on the curve. Must be in the range [ 0, 1 ]. Expects a Float
Parameter optionalTarget
If specified, the result will be copied into this Vector, otherwise a new Vector will be created.
Remarks
If the derived Curve does not implement its tangent derivation, two points a small delta apart will be used to find its gradient which seems to give a reasonable approximation.

method getTangentAt

getTangentAt: (u: number, optionalTarget?: TVector) => TVector;

Returns tangent at a point which is equidistant to the ends of the Curve from the point given in .
Parameter u
A position on the Curve according to the arc length. Must be in the range [ 0, 1 ]. Expects a Float
Parameter optionalTarget
If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

method getUtoTmapping

getUtoTmapping: (u: number, distance: number) => number;

Given u in the range [ 0, 1 ],
Parameter u
Expects a Float
Parameter distance
Expects a Float
Returns
t also in the range [ 0, 1 ]. Expects a Float.
Remarks
u and t can then be used to give you points which are equidistant from the ends of the curve, using .

method toJSON

toJSON: () => CurveJSON;

Returns a JSON object representation of this instance.

method updateArcLengths

updateArcLengths: () => void;

Update the cumulative segment distance cache
Remarks
The method must be called every time Curve parameters are changed If an updated Curve is part of a composed Curve like CurvePath, () must be called on the composed curve, too.

class CurvePath

class CurvePath<TVector extends Vector2 | Vector3> extends Curve<TVector> {}

Curved Path - a curve path is simply a array of connected curves, but retains the api of a curve.
Remarks
A CurvePath is simply an array of connected curves, but retains the api of a curve.
See Also
- Official Documentation
- Source

constructor

constructor();

The constructor take no parameters.

property autoClose

autoClose: boolean;

Whether or not to automatically close the path.

property curves

curves: Curve<TVector>[];

The array of Curves.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method add

add: (curve: Curve<TVector>) => void;

Add a curve to the array.
Parameter curve

method closePath

closePath: () => this;

Adds a lineCurve to close the path.

method fromJSON

fromJSON: (json: CurvePathJSON) => this;

method getCurveLengths

getCurveLengths: () => number[];

Get list of cumulative curve lengths of the curves in the array.

method getPoint

getPoint: (t: number, optionalTarget?: TVector) => TVector;

method getPoints

override getPoints: (divisions?: number) => TVector[];

Returns an array of points representing a sequence of curves
Parameter divisions
Number of pieces to divide the curve into. Expects a Integer. Default 12
Remarks
The division parameter defines the number of pieces each curve is divided into However, for optimization and quality purposes, the actual sampling resolution for each curve depends on its type For example, for a LineCurve, the returned number of points is always just 2.

method getSpacedPoints

override getSpacedPoints: (divisions?: number) => TVector[];

Returns a set of divisions +1 equi-spaced points using .
Parameter divisions
Number of pieces to divide the curve into. Expects a Integer. Default 40

method toJSON

toJSON: () => CurvePathJSON;

class CylinderGeometry

class CylinderGeometry extends BufferGeometry {}

A class for generating cylinder geometries.

Example 1

const geometry = new THREE.CylinderGeometry(5, 5, 20, 32);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

constructor

constructor(
    radiusTop?: number,
    radiusBottom?: number,
    height?: number,
    radialSegments?: number,
    heightSegments?: number,
    openEnded?: boolean,
    thetaStart?: number,
    thetaLength?: number
);

Create a new instance of CylinderGeometry
Parameter radiusTop
Radius of the cylinder at the top. Default 1
Parameter radiusBottom
Radius of the cylinder at the bottom. Default 1
Parameter height
Height of the cylinder. Default 1
Parameter radialSegments
Number of segmented faces around the circumference of the cylinder. Default 32
Parameter heightSegments
Number of rows of faces along the height of the cylinder. Expects a Integer. Default 1
Parameter openEnded
A Boolean indicating whether the ends of the cylinder are open or capped. Default false, _meaning capped_.
Parameter thetaStart
Start angle for first segment. Default 0, _(three o'clock position)_.
Parameter thetaLength
The central angle, often called theta, of the circular sector. Default Math.PI * 2, _which makes for a complete cylinder.

property parameters

readonly parameters: {
    readonly radiusTop: number;
    readonly radiusBottom: number;
    readonly height: number;
    readonly radialSegments: number;
    readonly heightSegments: number;
    readonly openEnded: boolean;
    readonly thetaStart: number;
    readonly thetaLength: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Cylindrical

class Cylindrical {}

constructor

constructor(radius?: number, theta?: number, y?: number);

property radius

radius: number;

property theta

theta: number;

property y

y: number;

method clone

clone: () => this;

method copy

copy: (other: Cylindrical) => this;

method set

set: (radius: number, theta: number, y: number) => this;

method setFromCartesianCoords

setFromCartesianCoords: (x: number, y: number, z: number) => this;

method setFromVector3

setFromVector3: (vec3: Vector3) => this;

class Data3DTexture

class Data3DTexture extends Texture<Data3DTextureImageData> {}

Creates a three-dimensional texture from raw data, with parameters to divide it into width, height, and depth

Example 1

This creates a[name] with repeating data, 0 to 255
// create a buffer with some data
const sizeX = 64;
const sizeY = 64;
const sizeZ = 64;
const data = new Uint8Array(sizeX * sizeY * sizeZ);
let i = 0;
for (let z = 0; z & lt; sizeZ; z++) {
    for (let y = 0; y & lt; sizeY; y++) {
        for (let x = 0; x & lt; sizeX; x++) {
            data[i] = i % 256;
            i++;
        }
    }
}
// use the buffer to create the texture
const texture = new THREE.Data3DTexture(data, sizeX, sizeY, sizeZ);
texture.needsUpdate = true;

constructor

constructor(data?: TypedArray, width?: number, height?: number, depth?: number);

Create a new instance of Data3DTexture
Parameter data
ArrayBufferView of the texture. Default null.
Parameter width
Width of the texture. Default 1.
Parameter height
Height of the texture. Default 1.
Parameter depth
Depth of the texture. Default 1.

property flipY

flipY: boolean;

Modifiers
- @override

property generateMipmaps

generateMipmaps: boolean;

Modifiers
- @override

property isData3DTexture

readonly isData3DTexture: boolean;

Read-only flag to check if a given object is of type Data3DTexture.
Remarks
This is a _constant_ value

property magFilter

magFilter: MagnificationTextureFilter;

Modifiers
- @override

property minFilter

minFilter: MinificationTextureFilter;

Modifiers
- @override

property unpackAlignment

unpackAlignment: number;

Modifiers
- @override

property wrapR

wrapR: Wrapping;

Modifiers
- @override

class DataArrayTexture

class DataArrayTexture extends Texture<DataArrayTextureImageData> {}

Creates an array of textures directly from raw data, width and height and depth

Example 1

This creates a[name] where each texture has a different color.
// create a buffer with color data
const width = 512;
const height = 512;
const depth = 100;
const size = width * height;
const data = new Uint8Array(4 * size * depth);
for (let i = 0; i & lt; depth; i++) {
    const color = new THREE.Color(Math.random(), Math.random(), Math.random());
    const r = Math.floor(color.r * 255);
    const g = Math.floor(color.g * 255);
    const b = Math.floor(color.b * 255);
    for (let j = 0; j & lt; size; j++) {
        const stride = (i * size + j) * 4;
        data[stride] = r;
        data[stride + 1] = g;
        data[stride + 2] = b;
        data[stride + 3] = 255;
    }
}
// used the buffer to create a [name]
const texture = new THREE.DataArrayTexture(data, width, height, depth);
texture.needsUpdate = true;

constructor

constructor(data?: TypedArray, width?: number, height?: number, depth?: number);

This creates a new DataArrayTexture object.
Parameter data
ArrayBufferView of the texture. Default null.
Parameter width
Width of the texture. Default 1.
Parameter height
Height of the texture. Default 1.
Parameter depth
Depth of the texture. Default 1.
Remarks
In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions _OES_texture_float_linear_ or _OES_texture_half_float_linear_ must also be present.

property flipY

flipY: boolean;

Modifiers
- @override

property generateMipmaps

generateMipmaps: boolean;

Modifiers
- @override

property isDataArrayTexture

readonly isDataArrayTexture: boolean;

Read-only flag to check if a given object is of type DataArrayTexture.
Remarks
This is a _constant_ value

property layerUpdates

layerUpdates: Set<number>;

A set of all layers which need to be updated in the texture. See DataArrayTexture.addLayerUpdate.

property magFilter

magFilter: MagnificationTextureFilter;

Modifiers
- @override

property minFilter

minFilter: MinificationTextureFilter;

Modifiers
- @override

property unpackAlignment

unpackAlignment: number;

Modifiers
- @override

property wrapR

wrapR: boolean;

Modifiers
- @override

method addLayerUpdate

addLayerUpdate: (layerIndex: number) => void;

Describes that a specific layer of the texture needs to be updated. Normally when Texture.needsUpdate is set to true, the entire compressed texture array is sent to the GPU. Marking specific layers will only transmit subsets of all mipmaps associated with a specific depth in the array which is often much more performant.

method clearLayoutUpdates

clearLayoutUpdates: () => void;

Resets the layer updates registry. See DataArrayTexture.addLayerUpdate.

class DataTexture

class DataTexture extends Texture<DataTextureImageData> {}

Creates a texture directly from raw data, width and height.

Example 1

// create a buffer with color data
const width = 512;
const height = 512;
const size = width * height;
const data = new Uint8Array(4 * size);
const color = new THREE.Color(0xffffff);
const r = Math.floor(color.r * 255);
const g = Math.floor(color.g * 255);
const b = Math.floor(color.b * 255);
for (let i = 0; i & lt; size; i++) {
    const stride = i * 4;
    data[stride] = r;
    data[stride + 1] = g;
    data[stride + 2] = b;
    data[stride + 3] = 255;
}
// used the buffer to create a [name]
const texture = new THREE.DataTexture(data, width, height);
texture.needsUpdate = true;

constructor

constructor(
    data?: TypedArray,
    width?: number,
    height?: number,
    format?: PixelFormat,
    type?: TextureDataType,
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    anisotropy?: number,
    colorSpace?: string
);

Parameter data
ArrayBufferView of the texture. Default null.
Parameter width
Width of the texture. Default 1.
Parameter height
Height of the texture. Default 1.
Parameter format
See .format. Default THREE.RGBAFormat
Parameter type
See . Default THREE.UnsignedByteType
Parameter mapping
See .mapping. Default THREE.Texture.DEFAULT_MAPPING
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.NearestFilter
Parameter minFilter
See .minFilter. Default THREE.NearestFilter
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY
Parameter colorSpace
See .colorSpace. Default NoColorSpace

property flipY

flipY: boolean;

Modifiers
- @override

property generateMipmaps

generateMipmaps: boolean;

Modifiers
- @override

property isDataTexture

readonly isDataTexture: boolean;

Read-only flag to check if a given object is of type DataTexture.
Remarks
This is a _constant_ value

property magFilter

magFilter: MagnificationTextureFilter;

Modifiers
- @override

property minFilter

minFilter: MinificationTextureFilter;

Modifiers
- @override

property unpackAlignment

unpackAlignment: number;

Modifiers
- @override

class DataTextureLoader

class DataTextureLoader extends Loader<DataTexture> {}

constructor

constructor(manager?: LoadingManager);

method load

load: (
    url: string,
    onLoad?: (data: DataTexture, texData: object) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => DataTexture;

class DataUtils

class DataUtils {}

method fromHalfFloat

static fromHalfFloat: (val: number) => number;

method toHalfFloat

static toHalfFloat: (val: number) => number;

class DepthTexture

class DepthTexture extends Texture<DepthTextureImageData> {}

This class can be used to automatically save the depth information of a rendering into a texture
See Also
- Example: depth / texture
- Official Documentation
- Source

constructor

constructor(
    width: number,
    height: number,
    type?: TextureDataType,
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    anisotropy?: number,
    format?: DepthTexturePixelFormat,
    depth?: number
);

Create a new instance of DepthTexture
Parameter width
Width of the texture.
Parameter height
Height of the texture.
Parameter type
See . Default THREE.UnsignedByteType or THREE.UnsignedInt248Type
Parameter mapping
See .mapping. Default THREE.Texture.DEFAULT_MAPPING
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.NearestFilter
Parameter minFilter
See .minFilter. Default THREE.NearestFilter
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY
Parameter format
See .format. Default THREE.DepthFormat
Parameter depth
The depth of the texture.

property compareFunction

compareFunction: TextureComparisonFunction;

This is used to define the comparison function used when comparing texels in the depth texture to the value in the depth buffer. Default is null which means comparison is disabled.
See THREE.TextureComparisonFunction for functions.

property flipY

flipY: boolean;

Modifiers
- @override

property format

format: DepthTexturePixelFormat;

See Also
- Texture.format
Modifiers
- @override

property generateMipmaps

generateMipmaps: boolean;

Depth textures do not use mipmaps.
Modifiers
- @override

property isDepthTexture

readonly isDepthTexture: boolean;

Read-only flag to check if a given object is of type DepthTexture.
Remarks
This is a _constant_ value

property magFilter

magFilter: MagnificationTextureFilter;

Modifiers
- @override

property minFilter

minFilter: MinificationTextureFilter;

Modifiers
- @override

property type

type: TextureDataType;

Modifiers
- @override

class DirectionalLight

class DirectionalLight extends Light<DirectionalLightShadow> {}

A light that gets emitted in a specific direction
Remarks
This light will behave as though it is infinitely far away and the rays produced from it are all parallel The common use case for this is to simulate daylight; the sun is far enough away that its position can be considered to be infinite, and all light rays coming from it are parallel. A common point of confusion for directional lights is that setting the rotation has no effect This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target Direct Light' in other applications. This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component). See the target property below for details on updating the target.
Example 1
// White directional light at half intensity shining from the top. const {@link DirectionalLight} = new THREE.DirectionalLight(0xffffff, 0.5); scene.add(directionalLight);
See Also
- Example: controls / fly
- Example: effects / parallaxbarrier
- Example: effects / stereo
- Example: geometry / extrude / splines
- Example: materials / bumpmap
- Official Documentation
- Source

constructor

constructor(color?: ColorRepresentation, intensity?: number);

Creates a new DirectionalLight.
Parameter color
Hexadecimal color of the light. Default 0xffffff _(white)_.
Parameter intensity
Numeric value of the light's strength/intensity. Expects a Float. Default 1

property castShadow

override castShadow: boolean;

Whether the object gets rendered into shadow map.
Remarks
If set to true light will cast dynamic shadows. **Warning**: This is expensive and requires tweaking to get shadows looking right.
See Also
- DirectionalLightShadow for details.

property isDirectionalLight

readonly isDirectionalLight: boolean;

Read-only flag to check if a given object is of type DirectionalLight.
Remarks
This is a _constant_ value

property position

override readonly position: Vector3;

This is set equal to THREE.Object3D.DEFAULT_UP, so that the light shines from the top down.

property shadow

shadow: DirectionalLightShadow;

A DirectionalLightShadow used to calculate shadows for this light.

property target

target: Object3D<Object3DEventMap>;

The DirectionalLight points from its position to target.position.
Remarks
**Note**: For the target's position to be changed to anything other than the default, it must be added to the scene using
Scene.add( light.target );
This is so that the target's matrixWorld gets automatically updated each frame.
It is also possible to set the target to be another object in the scene (anything with a position property), like so:
const targetObject = new THREE.Object3D(); scene.add(targetObject); light.target = targetObject;
The DirectionalLight will now track the target object.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method toJSON

toJSON: (meta?: JSONMeta) => DirectionalLightJSON;

class DirectionalLightHelper

class DirectionalLightHelper extends Object3D {}

Helper object to assist with visualizing a DirectionalLight's effect on the scene
Remarks
This consists of plane and a line representing the light's position and direction.
Example 1
const light = new THREE.DirectionalLight(0xFFFFFF); scene.add(light); const helper = new THREE.DirectionalLightHelper(light, 5); scene.add(helper);
See Also
- Official Documentation
- Source

constructor

constructor(light: DirectionalLight, size?: number, color?: ColorRepresentation);

Create a new instance of DirectionalLightHelper
Parameter light
The light to be visualized.
Parameter size
Dimensions of the plane. Default 1
Parameter color
If this is not the set the helper will take the color of the light. Default light.color

property color

color: ColorRepresentation;

The color parameter passed in the constructor.
Remarks
If this is changed, the helper's color will update the next time update is called.

property light

light: DirectionalLight;

Reference to the directionalLight being visualized.

property lightPlane

lightPlane: Line<
    BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    Material | Material[],
    Object3DEventMap
>;

Contains the line mesh showing the location of the directional light.

property matrix

matrix: Matrix4;

Reference to the light.matrixWorld.

property matrixAutoUpdate

override matrixAutoUpdate: boolean;

Is set to false, as the helper is using the light.matrixWorld.
See Also
- Object3D.matrixAutoUpdate.

property targetLine

targetLine: Line<
    BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    Material | Material[],
    Object3DEventMap
>;

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method update

update: () => void;

Updates the helper to match the position and direction of the DirectionalLight being visualized.

class DirectionalLightShadow

class DirectionalLightShadow extends LightShadow<OrthographicCamera> {}

This is used internally by DirectionalLights for calculating shadows. Unlike the other shadow classes, this uses an OrthographicCamera to calculate the shadows, rather than a PerspectiveCamera

Remarks

This is because light rays from a DirectionalLight are parallel.

Example 1

//Create a WebGLRenderer and turn on shadows in the renderer
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a DirectionalLight and turn on shadows for the light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 0); //default; light shining from top
light.castShadow = true; // default false
scene.add(light);
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default
//Create a sphere that cast shadows (but does not receive them)
const sphereGeometry = new THREE.SphereGeometry(5, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0xff0000
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add(sphere);
//Create a plane that receives shadows (but does not cast them)
const planeGeometry = new THREE.PlaneGeometry(20, 20, 32, 32);
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ff00
})
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
scene.add(plane);
//Create a helper for the shadow camera (optional)
const helper = new THREE.CameraHelper(light.shadow.camera);
scene.add(helper);

constructor

constructor();

Create a new instance of DirectionalLightShadow

property camera

camera: OrthographicCamera;

The light's view of the world.
Remarks
This is used to generate a depth map of the scene; objects behind other objects from the light's perspective will be in shadow.

property isDirectionalLightShadow

readonly isDirectionalLightShadow: boolean;

Read-only flag to check if a given object is of type DirectionalLightShadow.
Remarks
This is a _constant_ value

class DiscreteInterpolant

class DiscreteInterpolant extends Interpolant {}

constructor

constructor(
    parameterPositions: any,
    samplesValues: any,
    sampleSize: number,
    resultBuffer?: any
);

method interpolate_

interpolate_: (i1: number, t0: number, t: number, t1: number) => any;

class DodecahedronGeometry

class DodecahedronGeometry extends PolyhedronGeometry {}

A class for generating a dodecahedron geometries.
See Also
- Official Documentation
- Source

constructor

constructor(radius?: number, detail?: number);

Create a new instance of DodecahedronGeometry
Parameter radius
Radius of the dodecahedron. Expects a Float. Default 1
Parameter detail
Setting this to a value greater than 0 adds vertices making it no longer a dodecahedron. Expects a Integer. Default 0

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class EdgesGeometry

class EdgesGeometry<
    TBufferGeometry extends BufferGeometry = BufferGeometry
> extends BufferGeometry {}

This can be used as a helper object to view the edges of a geometry.

Example 1

const geometry = new THREE.BoxGeometry(100, 100, 100);
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
    color: 0xffffff
}));
scene.add(line);

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    thresholdAngle?: number
);

Create a new instance of EdgesGeometry
Parameter geometry
Any geometry object. Default null.
Parameter thresholdAngle
An edge is only rendered if the angle (in degrees) between the face normals of the adjoining faces exceeds this value. Expects a Integer. Default 1 _degree_.

property parameters

readonly parameters: {
    readonly geometry: TBufferGeometry | null;
    readonly thresholdAngle: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class EllipseCurve

class EllipseCurve extends Curve<Vector2> {}

Creates a 2d curve in the shape of an ellipse

Remarks

Setting the xRadius equal to the yRadius will result in a circle.

Example 1

const curve = new THREE.EllipseCurve(
  0,  0,  // ax, aY
  10, 10, // xRadius, yRadius
  0,  2 * Math.PI, // aStartAngle, aEndAngle
  false,  // aClockwise
  0       // aRotation
  );
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
// Create the final object to add to the scene
const ellipse = new THREE.Line(geometry, material);

constructor

constructor(
    aX?: number,
    aY?: number,
    xRadius?: number,
    yRadius?: number,
    aStartAngle?: number,
    aEndAngle?: number,
    aClockwise?: boolean,
    aRotation?: number
);

This constructor creates a new EllipseCurve.
Parameter aX
The X center of the ellipse. Expects a Float. Default is 0.
Parameter aY
The Y center of the ellipse. Expects a Float. Default is 0.
Parameter xRadius
The radius of the ellipse in the x direction. Expects a Float. Default is 1.
Parameter yRadius
The radius of the ellipse in the y direction. Expects a Float. Default is 1.
Parameter aStartAngle
The start angle of the curve in radians starting from the positive X axis. Default is 0.
Parameter aEndAngle
The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.
Parameter aClockwise
Whether the ellipse is drawn clockwise. Default is false.
Parameter aRotation
The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Default is 0.

property aClockwise

aClockwise: boolean;

Whether the ellipse is drawn clockwise.

property aEndAngle

aEndAngle: number;

The end angle of the curve in radians starting from the middle right side.
Remarks
Expects a Float

property aRotation

aRotation: number;

The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional).
Remarks
Expects a Float

property aStartAngle

aStartAngle: number;

The start angle of the curve in radians starting from the middle right side.
Remarks
Expects a Float

property aX

aX: number;

The X center of the ellipse.
Remarks
Expects a Float

property aY

aY: number;

The Y center of the ellipse.
Remarks
Expects a Float

property isEllipseCurve

readonly isEllipseCurve: boolean;

Read-only flag to check if a given object is of type EllipseCurve.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property xRadius

xRadius: number;

The radius of the ellipse in the x direction.

property yRadius

yRadius: number;

The radius of the ellipse in the y direction.

class Euler

class Euler {}

constructor

constructor(x?: number, y?: number, z?: number, order?: EulerOrder);

property DEFAULT_ORDER

static DEFAULT_ORDER: string;

property isEuler

readonly isEuler: boolean;

property order

order: EulerOrder;

THREE.Euler.DEFAULT_ORDER

property x

x: number;

property y

y: number;

property z

z: number;

method [Symbol.iterator]

[Symbol.iterator]: () => Generator<string | number, void>;

method clone

clone: () => this;

method copy

copy: (euler: Euler) => this;

method equals

equals: (euler: Euler) => boolean;

method fromArray

fromArray: (array: EulerTuple) => Euler;

method reorder

reorder: (newOrder: EulerOrder) => Euler;

method set

set: (x: number, y: number, z: number, order?: EulerOrder) => Euler;

method setFromQuaternion

setFromQuaternion: (
    q: Quaternion,
    order?: EulerOrder,
    update?: boolean
) => Euler;

method setFromRotationMatrix

setFromRotationMatrix: (
    m: Matrix4,
    order?: EulerOrder,
    update?: boolean
) => Euler;

method setFromVector3

setFromVector3: (v: Vector3, order?: EulerOrder) => Euler;

method toArray

toArray: (
    array?: [x?: number, y?: number, z?: number, order?: EulerOrder],
    offset?: number
) => EulerTuple;

class EventDispatcher

class EventDispatcher<TEventMap extends {} = {}> {}

JavaScript events for custom objects

Example 1

// Adding events to a custom object
class Car extends EventDispatcher {
  start() {
    this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
  }
};
// Using events with the custom object
const car = new Car();
car.addEventListener( 'start', ( event ) => {
  alert( event.message );
} );
car.start();

constructor

constructor();

Creates EventDispatcher object.

method addEventListener

addEventListener: <T extends Extract<keyof TEventMap, string>>(
    type: T,
    listener: EventListener<TEventMap[T], T, this>
) => void;

Adds a listener to an event type.
Parameter type
The type of event to listen to.
Parameter listener
The function that gets called when the event is fired.

method dispatchEvent

dispatchEvent: <T extends Extract<keyof TEventMap, string>>(
    event: BaseEvent<T> & TEventMap[T]
) => void;

Fire an event type.
Parameter event
The event that gets fired.

method hasEventListener

hasEventListener: <T extends Extract<keyof TEventMap, string>>(
    type: T,
    listener: EventListener<TEventMap[T], T, this>
) => boolean;

Checks if listener is added to an event type.
Parameter type
The type of event to listen to.
Parameter listener
The function that gets called when the event is fired.

method removeEventListener

removeEventListener: <T extends Extract<keyof TEventMap, string>>(
    type: T,
    listener: EventListener<TEventMap[T], T, this>
) => void;

Removes a listener from an event type.
Parameter type
The type of the listener that gets removed.
Parameter listener
The listener function that gets removed.

class ExternalTexture

class ExternalTexture extends Texture<null> {}

constructor

constructor(sourceTexture?: any);

property isExternalTexture

readonly isExternalTexture: boolean;

property sourceTexture

sourceTexture: any;

class ExtrudeGeometry

class ExtrudeGeometry extends BufferGeometry {}

Creates extruded geometry from a path shape.

Remarks

The first material will be applied to the face; the second material will be applied to the sides.

Example 1

const length = 12, width = 8;
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, width);
shape.lineTo(length, width);
shape.lineTo(length, 0);
shape.lineTo(0, 0);
const extrudeSettings = {
    steps: 2,
    depth: 16,
    bevelEnabled: true,
    bevelThickness: 1,
    bevelSize: 1,
    bevelOffset: 0,
    bevelSegments: 1
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

constructor

constructor(shapes?: Shape | Shape[], options?: ExtrudeGeometryOptions);

Create a new instance of ExtrudeGeometry
Parameter shapes
Shape or an array of shapes. Default new Shape([new Vector2(0.5, 0.5), new Vector2(-0.5, 0.5), new Vector2(-0.5, -0.5), new Vector2(0.5, -0.5)]).
Parameter options
Object that can contain the following parameters.
See Also
- ExtrudeGeometryOptions for defaults.

property parameters

readonly parameters: {
    readonly shapes: Shape | Shape[];
    readonly options: ExtrudeGeometryOptions;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method addShape

addShape: (shape: Shape) => void;

class FileLoader

class FileLoader extends Loader<string | ArrayBuffer> {}

constructor

constructor(manager?: LoadingManager);

property mimeType

mimeType: string;

property responseType

responseType: string;

method load

load: (
    url: string,
    onLoad?: (data: string | ArrayBuffer) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => void;

method setMimeType

setMimeType: (value: string) => this;

method setResponseType

setResponseType: (value: string) => this;

class Float16BufferAttribute

class Float16BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Float16BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Uint16Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Float32BufferAttribute

class Float32BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Float32BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Float32Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Fog

class Fog {}

This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance.
Example 1
const scene = new THREE.Scene(); scene.fog = new THREE.Fog(0xcccccc, 10, 15);
See Also
- Official Documentation
- Source

constructor

constructor(color: ColorRepresentation, near?: number, far?: number);

The color parameter is passed to the Color constructor to set the color property
Parameter color
Parameter near
Expects a Float
Parameter far
Expects a Float
Remarks
Color can be a hexadecimal integer or a CSS-style string.

property color

color: Color;

Fog color.
Remarks
If set to black, far away objects will be rendered black.

property far

far: number;

The maximum distance at which fog stops being calculated and applied.
Remarks
Expects a Float

property isFog

readonly isFog: boolean;

Read-only flag to check if a given object is of type Fog.
Remarks
This is a _constant_ value

property name

name: string;

Optional name of the object
Remarks
_(doesn't need to be unique)_.

property near

near: number;

The minimum distance to start applying fog.
Remarks
Expects a Float

method clone

clone: () => Fog;

Returns a new Fog instance with the same parameters as this one.

method toJSON

toJSON: () => FogJSON;

Return Fog data in JSON format.

class FogExp2

class FogExp2 {}

This class contains the parameters that define exponential squared fog, which gives a clear view near the camera and a faster than exponentially densening fog farther from the camera.
Example 1
const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
See Also
- Example: webgl geometry terrain
- Official Documentation
- Source

constructor

constructor(color: ColorRepresentation, density?: number);

The color parameter is passed to the Color constructor to set the color property
Parameter color
Parameter density
Expects a Float
Remarks
Color can be a hexadecimal integer or a CSS-style string.

property color

color: Color;

Fog color.
Remarks
If set to black, far away objects will be rendered black.

property density

density: number;

Defines how fast the fog will grow dense.
Remarks
Expects a Float

property isFogExp2

readonly isFogExp2: boolean;

Read-only flag to check if a given object is of type FogExp2.
Remarks
This is a _constant_ value

property name

name: string;

Optional name of the object
Remarks
_(doesn't need to be unique)_.

method clone

clone: () => FogExp2;

Returns a new FogExp2 instance with the same parameters as this one.

method toJSON

toJSON: () => FogExp2JSON;

Return FogExp2 data in JSON format.

class FramebufferTexture

class FramebufferTexture extends Texture<FramebufferTextureImageData> {}

This class can only be used in combination with WebGLRenderer.copyFramebufferToTexture().

Example 1

const pixelRatio = window.devicePixelRatio;
const textureSize = 128 * pixelRatio;

// instantiate a framebuffer texture
const frameTexture = new FramebufferTexture( textureSize, textureSize, RGBAFormat );

// calculate start position for copying part of the frame data
const vector = new Vector2();
vector.x = ( window.innerWidth * pixelRatio / 2 ) - ( textureSize / 2 );
vector.y = ( window.innerHeight * pixelRatio / 2 ) - ( textureSize / 2 );

// render the scene
renderer.clear();
renderer.render( scene, camera );

// copy part of the rendered frame into the framebuffer texture
renderer.copyFramebufferToTexture( frameTexture, vector );

constructor

constructor(width: number, height: number);

Create a new instance of FramebufferTexture
Parameter width
The width of the texture.
Parameter height
The height of the texture.

property generateMipmaps

generateMipmaps: boolean;

Modifiers
- @override

property isFramebufferTexture

readonly isFramebufferTexture: boolean;

Read-only flag to check if a given object is of type FramebufferTexture.
Remarks
This is a _constant_ value

property magFilter

magFilter: MagnificationTextureFilter;

Modifiers
- @override

property minFilter

minFilter: MinificationTextureFilter;

Modifiers
- @override

class Frustum

class Frustum {}

Frustums are used to determine what is inside the camera's field of view. They help speed up the rendering process.

constructor

constructor(
    p0?: Plane,
    p1?: Plane,
    p2?: Plane,
    p3?: Plane,
    p4?: Plane,
    p5?: Plane
);

property planes

planes: Plane[];

Array of 6 vectors.

method clone

clone: () => this;

method containsPoint

containsPoint: (point: Vector3) => boolean;

method copy

copy: (frustum: Frustum) => this;

method intersectsBox

intersectsBox: (box: Box3) => boolean;

method intersectsObject

intersectsObject: (object: Object3D) => boolean;

method intersectsSphere

intersectsSphere: (sphere: Sphere) => boolean;

method intersectsSprite

intersectsSprite: (sprite: Sprite) => boolean;

method set

set: (
    p0: Plane,
    p1: Plane,
    p2: Plane,
    p3: Plane,
    p4: Plane,
    p5: Plane
) => Frustum;

method setFromProjectionMatrix

setFromProjectionMatrix: (
    m: Matrix4,
    coordinateSystem?: CoordinateSystem,
    reversedDepth?: boolean
) => this;

class FrustumArray

class FrustumArray {}

constructor

constructor();

property coordinateSystem

coordinateSystem: CoordinateSystem;

method clone

clone: () => FrustumArray;

method containsPoint

containsPoint: (point: Vector3, cameraArray: ArrayCamera) => boolean;

method intersectsBox

intersectsBox: (box: Box3, cameraArray: ArrayCamera) => boolean;

method intersectsObject

intersectsObject: (object: Object3D, cameraArray: ArrayCamera) => boolean;

method intersectsSprite

intersectsSprite: {
    (sprite: Sprite, cameraArray: ArrayCamera): boolean;
    (sphere: Sphere, cameraArray: ArrayCamera): boolean;
};

class GLBufferAttribute

class GLBufferAttribute {}

This buffer attribute class does not construct a VBO. Instead, it uses whatever VBO is passed in constructor and can later be altered via the .buffer property.
Remarks
The most common use case for this class is when some kind of GPGPU calculation interferes or even produces the VBOs in question.
See Also

constructor

constructor(
    buffer: WebGLBuffer,
    type: number,
    itemSize: number,
    elementSize: 1 | 2 | 4,
    count: number,
    normalized?: boolean
);

This creates a new GLBufferAttribute object.
Parameter buffer
Must be a WebGLBuffer. See .buffer
Parameter type
One of WebGL Data Types. See
Parameter itemSize
How many values make up each item (vertex). See .itemSize
Parameter elementSize
1, 2 or 4. The corresponding size (in bytes) for the given param. See .elementSize
Parameter count
The expected number of vertices in VBO. See .count
Parameter normalized
Whether the data are normalized or not.

property buffer

buffer: WebGLBuffer;

The current WebGLBuffer instance.

property count

count: number;

The expected number of vertices in VBO.
Remarks
Expects a Integer

property elementSize

elementSize: 1 | 2 | 4;

Stores the corresponding size in bytes for the current property value.
The corresponding size (_in bytes_) for the given "type" param. #### WebGL Data Type (GLenum) - gl.BYTE: 1 - gl.UNSIGNED_BYTE: 1 - gl.SHORT: 2 - gl.UNSIGNED_SHORT: 2 - gl.INT: 4 - gl.UNSIGNED_INT: 4 - gl.FLOAT: 4
Remarks
Expects a 1, 2 or 4
See Also
- constructor` for a list of known type sizes.

property isGLBufferAttribute

readonly isGLBufferAttribute: boolean;

Read-only flag to check if a given object is of type GLBufferAttribute.
Remarks
This is a _constant_ value

property itemSize

itemSize: number;

How many values make up each item (vertex).
Remarks
Expects a Integer

property name

name: string;

Optional name for this attribute instance.

property normalized

normalized: boolean;

Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if buffer contains data of gl.UNSIGNED_SHORT, and normalized is true, the values 0 - +65535 in the buffer data will be mapped to 0.0f - +1.0f in the GLSL attribute. If normalized is false, the values will be converted to floats unmodified, i.e. 65535 becomes 65535.0f.

property type

type: number;

A WebGL Data Type describing the underlying VBO contents.
#### WebGL Data Type (GLenum) - gl.BYTE: 0x1400 - gl.UNSIGNED_BYTE: 0x1401 - gl.SHORT: 0x1402 - gl.UNSIGNED_SHORT: 0x1403 - gl.INT: 0x1404 - gl.UNSIGNED_INT: 0x1405 - gl.FLOAT: 0x1406
Remarks
Expects a DataType GLenum _possible values:_ 0x1400 0x1401 0x1402 0x1403 0x1404 0x1405 0x1406

property version

version: number;

A version number, incremented every time the needsUpdate property is set to true.
Remarks
Expects a Integer

method setBuffer

setBuffer: (buffer: WebGLBuffer) => this;

Sets the .buffer property.

method setCount

setCount: (count: number) => this;

Sets the count property.

method setItemSize

setItemSize: (itemSize: number) => this;

Sets the itemSize property.

method setType

setType: (type: GLenum, elementSize: 1 | 2 | 4) => this;

Sets the both and elementSize properties.

class GridHelper

class GridHelper extends LineSegments<BufferGeometry, LineBasicMaterial> {}

The GridHelper is an object to define grids
Remarks
Grids are two-dimensional arrays of lines.
Example 1
const size = 10; const divisions = 10; const {@link GridHelper} = new THREE.GridHelper(size, divisions); scene.add(gridHelper);
See Also
- Example: WebGL / helpers
- Official Documentation
- Source

constructor

constructor(
    size?: number,
    divisions?: number,
    color1?: ColorRepresentation,
    color2?: ColorRepresentation
);

Creates a new GridHelper of size 'size' and divided into 'divisions' segments per side
Parameter size
The size of the grid. Default 10
Parameter divisions
The number of divisions across the grid. Default 10
Parameter colorCenterLine
The color of the centerline. This can be a Color, a hexadecimal value and an CSS-Color name. Default 0x444444
Parameter colorGrid
The color of the lines of the grid. This can be a Color, a hexadecimal value and an CSS-Color name. Default 0x888888
Remarks
Colors are optional.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

class Group

class Group<
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

Its purpose is to make working with groups of objects syntactically clearer.

Remarks

This is almost identical to an Object3D

Example 1

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const cubeA = new THREE.Mesh(geometry, material);
cubeA.position.set(100, 100, 0);
const cubeB = new THREE.Mesh(geometry, material);
cubeB.position.set(-100, -100, 0);
//create a {@link Group} and add the two cubes
//These cubes can now be rotated / scaled etc as a {@link Group}  * const {@link Group} = new THREE.Group();
group.add(cubeA);
group.add(cubeB);
scene.add(group);

constructor

constructor();

Creates a new Group.

property isGroup

readonly isGroup: boolean;

Read-only flag to check if a given object is of type Group.
Remarks
This is a _constant_ value

class HemisphereLight

class HemisphereLight extends Light<undefined> {}

A light source positioned directly above the scene, with color fading from the sky color to the ground color.
Remarks
This light cannot be used to cast shadows.
Example 1
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); scene.add(light);
See Also
- Example: animation / skinning / blending
- Example: lights / hemisphere
- Example: controls / pointerlock
- Example: loader / collada / kinematics
- Example: loader / stl
- Official Documentation
- Source

constructor

constructor(
    skyColor?: ColorRepresentation,
    groundColor?: ColorRepresentation,
    intensity?: number
);

Creates a new HemisphereLight.
Parameter skyColor
Hexadecimal color of the sky. Expects a Integer. Default 0xffffff _(white)_.
Parameter groundColor
Hexadecimal color of the ground. Expects a Integer. Default 0xffffff _(white)_.
Parameter intensity
Numeric value of the light's strength/intensity. Expects a Float. Default 1.

property color

override color: Color;

The light's sky color, as passed in the constructor.

property groundColor

groundColor: Color;

The light's ground color, as passed in the constructor.

property isHemisphereLight

readonly isHemisphereLight: boolean;

Read-only flag to check if a given object is of type HemisphereLight.
Remarks
This is a _constant_ value

property position

override readonly position: Vector3;

This is set equal to THREE.Object3D.DEFAULT_UP, so that the light shines from the top down.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method toJSON

toJSON: (meta?: JSONMeta) => HemisphereLightJSON;

class HemisphereLightHelper

class HemisphereLightHelper extends Object3D {}

Creates a visual aid consisting of a spherical Mesh for a HemisphereLight.

Example 1

const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
const helper = new THREE.HemisphereLightHelper(light, 5);
scene.add(helper);

constructor

constructor(light: HemisphereLight, size: number, color?: ColorRepresentation);

Create a new instance of HemisphereLightHelper
Parameter light
The light being visualized.
Parameter size
Thr sphere size
Parameter color
If this is not the set the helper will take the color of the light.

property color

color: ColorRepresentation;

The color parameter passed in the constructor.
Remarks
If this is changed, the helper's color will update the next time update is called.

property light

light: HemisphereLight;

Reference to the HemisphereLight being visualized.

property material

material: MeshBasicMaterial;

property matrix

matrix: Matrix4;

Reference to the light.matrixWorld.

property matrixAutoUpdate

override matrixAutoUpdate: boolean;

Is set to false, as the helper is using the light.matrixWorld.
See Also
- Object3D.matrixAutoUpdate.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method update

update: () => void;

Updates the helper to match the position and direction of the .

class IcosahedronGeometry

class IcosahedronGeometry extends PolyhedronGeometry {}

A class for generating an icosahedron geometry.
See Also
- Official Documentation
- Source

constructor

constructor(radius?: number, detail?: number);

Create a new instance of IcosahedronGeometry
Parameter radius
Expects a Float. Default 1
Parameter detail
Setting this to a value greater than 0 adds more vertices making it no longer an icosahedron. When detail is greater than 1, it's effectively a sphere. Expects a Integer. Default 0

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class ImageBitmapLoader

class ImageBitmapLoader extends Loader<ImageBitmap> {}

constructor

constructor(manager?: LoadingManager);

property isImageBitmapLoader

readonly isImageBitmapLoader: boolean;

property options

options: ImageBitmapOptions;

{ premultiplyAlpha: 'none' }

method load

load: (
    url: string,
    onLoad?: (data: ImageBitmap) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => void;

method setOptions

setOptions: (options: ImageBitmapOptions) => this;

class ImageLoader

class ImageLoader extends Loader<HTMLImageElement> {}

A loader for loading an image. Unlike other loaders, this one emits events instead of using predefined callbacks. So if you're interested in getting notified when things happen, you need to add listeners to the object.

constructor

constructor(manager?: LoadingManager);

method load

load: (
    url: string,
    onLoad?: (data: HTMLImageElement) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => HTMLImageElement;

class ImageUtils

class ImageUtils {}

A class containing utility functions for images.
See Also
- Official Documentation
- Source

method getDataURL

static getDataURL: (
    image:
        | HTMLImageElement
        | HTMLCanvasElement
        | CanvasImageSource
        | ImageBitmap
        | ImageData,
    type?: string
) => string;

Returns a data URI containing a representation of the given image.
Parameter image
The image object.

method sRGBToLinear

static sRGBToLinear: {
    (
        image: HTMLImageElement | HTMLCanvasElement | ImageBitmap
    ): HTMLCanvasElement;
    (image: ImageData): {
        data: Uint8ClampedArray;
        width: number;
        height: number;
    };
};

Converts the given sRGB image data to linear color space.
Parameter image

class InstancedBufferAttribute

class InstancedBufferAttribute extends BufferAttribute {}

An instanced version of BufferAttribute.
See Also
- Official Documentation
- Source

constructor

constructor(
    array: TypedArray,
    itemSize: number,
    normalized?: boolean,
    meshPerAttribute?: number
);

Create a new instance of InstancedBufferAttribute
Parameter array
Parameter itemSize
Parameter normalized
Parameter meshPerAttribute

property isInstancedBufferAttribute

readonly isInstancedBufferAttribute: boolean;

Read-only flag to check if a given object is of type InstancedBufferAttribute.
Remarks
This is a _constant_ value

property meshPerAttribute

meshPerAttribute: number;

Defines how often a value of this buffer attribute should be repeated. A value of one means that each value of the instanced attribute is used for a single instance. A value of two means that each value is used for two consecutive instances (and so on).

class InstancedBufferGeometry

class InstancedBufferGeometry extends BufferGeometry {}

An instanced version of BufferGeometry.
See Also
- Official Documentation
- Source

constructor

constructor();

Create a new instance of InstancedBufferGeometry

property instanceCount

instanceCount: number;

property isInstancedBufferGeometry

readonly isInstancedBufferGeometry: boolean;

Read-only flag to check if a given object is of type InstancedBufferGeometry.
Remarks
This is a _constant_ value

property type

type: string;

method copy

copy: (source: InstancedBufferGeometry) => this;

Copies the given InstancedBufferGeometry to this instance.
Parameter source
Modifiers
- @override

class InstancedInterleavedBuffer

class InstancedInterleavedBuffer extends InterleavedBuffer {}

An instanced version of InterleavedBuffer.
See Also
- Official Documentation
- Source

constructor

constructor(array: TypedArray, stride: number, meshPerAttribute?: number);

Create a new instance of InstancedInterleavedBuffer
Parameter array
Parameter itemSize
Parameter meshPerAttribute

property meshPerAttribute

meshPerAttribute: number;

class InstancedMesh

class InstancedMesh<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends InstancedMeshEventMap = InstancedMeshEventMap
> extends Mesh<TGeometry, TMaterial, TEventMap> {}

A special version of Mesh with instanced rendering support
Remarks
Use InstancedMesh if you have to render a large number of objects with the same geometry and material(s) but with different world transformations The usage of InstancedMesh will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
See Also
- Example: WebGL / instancing / dynamic
- Example: WebGL / instancing / performance
- Example: WebGL / instancing / scatter
- Example: WebGL / instancing / raycast
- Official Documentation
- Source

constructor

constructor(
    geometry: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    material: Material | Material[],
    count: number
);

Create a new instance of InstancedMesh
Parameter geometry
An instance of BufferGeometry.
Parameter material
A single or an array of Material. Default is a new MeshBasicMaterial.
Parameter count
The **maximum** number of instances of this Mesh. Expects a Integer

property boundingBox

boundingBox: Box3;

This bounding box encloses all instances of the InstancedMesh,, which can be calculated with .computeBoundingBox().
Remarks
Bounding boxes aren't computed by default. They need to be explicitly computed, otherwise they are null.

property boundingSphere

boundingSphere: Sphere;

This bounding sphere encloses all instances of the InstancedMesh, which can be calculated with .computeBoundingSphere().
Remarks
bounding spheres aren't computed by default. They need to be explicitly computed, otherwise they are null.

property count

count: number;

The number of instances.
Remarks
The count value passed into the constructor represents the **maximum** number of instances of this mesh. You can change the number of instances at runtime to an integer value in the range [0, count]. If you need more instances than the original count value, you have to create a new InstancedMesh. Expects a Integer

property instanceColor

instanceColor: InstancedBufferAttribute;

Represents the colors of all instances. You have to set .instanceColor.needsUpdate() flag to true if you modify instanced data via .setColorAt().

property instanceMatrix

instanceMatrix: InstancedBufferAttribute;

Represents the local transformation of all instances. You have to set .instanceMatrix.needsUpdate() flag to true if you modify instanced data via .setMatrixAt().

property isInstancedMesh

readonly isInstancedMesh: boolean;

Read-only flag to check if a given object is of type InstancedMesh.
Remarks
This is a _constant_ value

property morphTexture

morphTexture: DataTexture;

Represents the morph target weights of all instances. You have to set its flag to true if you modify instanced data via .

method computeBoundingBox

computeBoundingBox: () => void;

Computes the bounding box of the instanced mesh, and updates the attribute. The bounding box is not computed by the engine; it must be computed by your app. You may need to recompute the bounding box if an instance is transformed via .

method computeBoundingSphere

computeBoundingSphere: () => void;

Computes the bounding sphere of the instanced mesh, and updates the attribute. The engine automatically computes the bounding sphere when it is needed, e.g., for ray casting or view frustum culling. You may need to recompute the bounding sphere if an instance is transformed via [page:.setMatrixAt]().

method dispose

dispose: () => this;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method getColorAt

getColorAt: (index: number, color: Color) => void;

Get the color of the defined instance.
Parameter index
The index of an instance. Values have to be in the range [0, count]. Expects a Integer
Parameter color
This color object will be set to the color of the defined instance.

method getMatrixAt

getMatrixAt: (index: number, matrix: Matrix4) => void;

Get the local transformation matrix of the defined instance.
Parameter index
The index of an instance Values have to be in the range [0, count]. Expects a Integer
Parameter matrix
This 4x4 matrix will be set to the local transformation matrix of the defined instance.

method getMorphAt

getMorphAt: (index: number, mesh: Mesh) => void;

Get the morph target weights of the defined instance.
Parameter index
The index of an instance. Values have to be in the range [0, count].
Parameter mesh
The property of this mesh will be filled with the morph target weights of the defined instance.

method setColorAt

setColorAt: (index: number, color: Color) => void;

Sets the given color to the defined instance
Parameter index
The index of an instance. Values have to be in the range [0, count]. Expects a Integer
Parameter color
The color of a single instance.
Remarks
Make sure you set .instanceColor.needsUpdate() to true after updating all the colors.

method setMatrixAt

setMatrixAt: (index: number, matrix: Matrix4) => void;

Sets the given local transformation matrix to the defined instance. Make sure you set .instanceMatrix.needsUpdate() flag to true after updating all the matrices. Negatively scaled matrices are not supported.
Parameter index
The index of an instance. Values have to be in the range [0, count]. Expects a Integer
Parameter matrix
A 4x4 matrix representing the local transformation of a single instance.

method setMorphAt

setMorphAt: (index: number, mesh: Mesh) => void;

Sets the morph target weights to the defined instance. Make sure you set to true after updating all the influences.
Parameter index
The index of an instance. Values have to be in the range [0, count].
Parameter mesh
A mesh with property containing the morph target weights of a single instance.

method toJSON

toJSON: (meta?: JSONMeta) => InstancedMeshJSON;

method updateMorphTargets

override updateMorphTargets: () => void;

No effect in InstancedMesh.

class Int16BufferAttribute

class Int16BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Int16BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Int16Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Int32BufferAttribute

class Int32BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Int32BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Int32Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Int8BufferAttribute

class Int8BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Int8BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Int8Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.

class InterleavedBuffer

class InterleavedBuffer {}

**"Interleaved"** means that multiple attributes, possibly of different types, (e.g., _position, normal, uv, color_) are packed into a single array buffer. An introduction into interleaved arrays can be found here: Interleaved array basics
See Also

constructor

constructor(array: TypedArray, stride: number);

Create a new instance of InterleavedBuffer
Parameter array
A TypedArray with a shared buffer. Stores the geometry data.
Parameter stride
The number of typed-array elements per vertex. Expects a Integer

property array

array: TypedArray;

A TypedArray with a shared buffer. Stores the geometry data.

property count

count: number;

Gives the total number of elements in the array.
Remarks
Expects a Integer

property isInterleavedBuffer

readonly isInterleavedBuffer: boolean;

property onUploadCallback

onUploadCallback: () => void;

A callback function that is executed after the Renderer has transferred the geometry data to the GPU.

property stride

stride: number;

The number of TypedArray elements per vertex.
Remarks
Expects a Integer

property updateRanges

updateRanges: { start: number; count: number }[];

This can be used to only update some components of stored data. Use the function to add ranges to this array.

property usage

usage: Usage;

Defines the intended usage pattern of the data store for optimization purposes. Corresponds to the usage parameter of WebGLRenderingContext.bufferData.
Remarks
After the initial use of a buffer, its usage cannot be changed. Instead, instantiate a new one and set the desired usage before the next render.
See Also
- Buffer Attribute Usage Constants for all possible values.
- setUsage

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

property version

version: number;

A version number, incremented every time the needsUpdate property is set to true.
Remarks
Expects a Integer

method addUpdateRange

addUpdateRange: (start: number, count: number) => void;

Adds a range of data in the data array to be updated on the GPU. Adds an object describing the range to the array.

method clearUpdateRanges

clearUpdateRanges: () => void;

Clears the array.

method clone

clone: (data: {}) => InterleavedBuffer;

Creates a clone of this InterleavedBuffer.
Parameter data
This object holds shared array buffers required for properly cloning geometries with interleaved attributes.

method copy

copy: (source: InterleavedBuffer) => this;

Copies another InterleavedBuffer to this InterleavedBuffer instance.
Parameter source

method copyAt

copyAt: (
    index1: number,
    attribute: InterleavedBufferAttribute,
    index2: number
) => this;

Copies data from attribute[index2] to array[index1].
Parameter index1
Expects a Integer
Parameter attribute
Parameter index2
Expects a Integer

method onUpload

onUpload: (callback: () => void) => this;

Sets the value of the onUploadCallback property.
Parameter callback
function that is executed after the Renderer has transferred the geometry data to the GPU.
See Also
- onUploadCallback

method set

set: (value: ArrayLike<number>, offset: number) => this;

Calls TypedArray.set( value, offset ) on the array.
Parameter value
The source TypedArray.
Parameter offset
index of the array at which to start copying. Expects a Integer. Default 0.
Throws
RangeError When offset is negative or is too large.

method setUsage

setUsage: (value: Usage) => this;

Set usage
Parameter value
Corresponds to the usage parameter of WebGLRenderingContext.bufferData.
Remarks
After the initial use of a buffer, its usage cannot be changed. Instead, instantiate a new one and set the desired usage before the next render.
See Also
- Buffer Attribute Usage Constants for all possible values.
- usage

method toJSON

toJSON: (data: {}) => {
    uuid: string;
    buffer: string;
    type: string;
    stride: number;
};

Serializes this InterleavedBuffer. Converting to JSON Geometry format v4,
Parameter data
This object holds shared array buffers required for properly serializing geometries with interleaved attributes.

class InterleavedBufferAttribute

class InterleavedBufferAttribute {}

See Also
- Official Documentation
- Source

constructor

constructor(
    interleavedBuffer: InterleavedBuffer,
    itemSize: number,
    offset: number,
    normalized?: boolean
);

Create a new instance of InterleavedBufferAttribute.
Parameter interleavedBuffer
Parameter itemSize
Parameter offset
Parameter normalized
Default false.

property array

readonly array: TypedArray;

The value of data.array.
Remarks
_get-only property_.

property count

readonly count: number;

The value of .data.count. If the buffer is storing a 3-component item (such as a _position, normal, or color_), then this will count the number of such items stored.
Remarks
Expects a Integer

property data

data: InterleavedBuffer;

The InterleavedBuffer instance passed in the constructor.

property isInterleavedBufferAttribute

readonly isInterleavedBufferAttribute: boolean;

Read-only flag to check if a given object is of type InterleavedBufferAttribute.
Remarks
This is a _constant_ value

property itemSize

itemSize: number;

How many values make up each item.
Remarks
Expects a Integer

property name

name: string;

Optional name for this attribute instance.

property normalized

normalized: boolean;

property offset

offset: number;

The offset in the underlying array buffer where an item starts.
Remarks
Expects a Integer

method applyMatrix4

applyMatrix4: (m: Matrix4) => this;

Applies matrix m to every Vector3 element of this InterleavedBufferAttribute.
Parameter m

method applyNormalMatrix

applyNormalMatrix: (m: Matrix3) => this;

Applies normal matrix m to every Vector3 element of this InterleavedBufferAttribute.
Parameter m

method clone

clone: (data?: {}) => BufferAttribute;

Creates a clone of this InterleavedBufferAttribute.
Parameter data
This object holds shared array buffers required for properly cloning geometries with interleaved attributes.

method getComponent

getComponent: (index: number, component: number) => number;

Returns the given component of the vector at the given index.

method getW

getW: (index: number) => number;

Returns the w component of the item at the given index.
Parameter index
Expects a Integer

method getX

getX: (index: number) => number;

Returns the x component of the item at the given index.
Parameter index
Expects a Integer

method getY

getY: (index: number) => number;

Returns the y component of the item at the given index.
Parameter index
Expects a Integer

method getZ

getZ: (index: number) => number;

Returns the z component of the item at the given index.
Parameter index
Expects a Integer

method setComponent

setComponent: (index: number, component: number, value: number) => this;

Sets the given component of the vector at the given index.

method setW

setW: (index: number, z: number) => this;

Sets the w component of the item at the given index.
Parameter index
Expects a Integer
Parameter w
Expects a Float

method setX

setX: (index: number, x: number) => this;

Sets the x component of the item at the given index.
Parameter index
Expects a Integer
Parameter x
Expects a Float

method setXY

setXY: (index: number, x: number, y: number) => this;

Sets the x and y components of the item at the given index.
Parameter index
Expects a Integer
Parameter x
Expects a Float
Parameter y
Expects a Float

method setXYZ

setXYZ: (index: number, x: number, y: number, z: number) => this;

Sets the x, y and z components of the item at the given index.
Parameter index
Expects a Integer
Parameter x
Expects a Float
Parameter y
Expects a Float
Parameter z
Expects a Float

method setXYZW

setXYZW: (index: number, x: number, y: number, z: number, w: number) => this;

Sets the x, y, z and w components of the item at the given index.
Parameter index
Expects a Integer
Parameter x
Expects a Float
Parameter y
Expects a Float
Parameter z
Expects a Float
Parameter w
Expects a Float

method setY

setY: (index: number, y: number) => this;

Sets the y component of the item at the given index.
Parameter index
Expects a Integer
Parameter y
Expects a Float

method setZ

setZ: (index: number, z: number) => this;

Sets the z component of the item at the given index.
Parameter index
Expects a Integer
Parameter z
Expects a Float

method toJSON

toJSON: (data?: {}) => {
    isInterleavedBufferAttribute: true;
    itemSize: number;
    data: string;
    offset: number;
    normalized: boolean;
};

Serializes this InterleavedBufferAttribute. Converting to JSON Geometry format v4,
Parameter data
This object holds shared array buffers required for properly serializing geometries with interleaved attributes.

method transformDirection

transformDirection: (m: Matrix4) => this;

Applies matrix m to every Vector3 element of this InterleavedBufferAttribute, interpreting the elements as a direction vectors.
Parameter m

class Interpolant

abstract class Interpolant {}

constructor

constructor(
    parameterPositions: any,
    sampleValues: any,
    sampleSize: number,
    resultBuffer?: any
);

property parameterPositions

parameterPositions: any;

property resultBuffer

resultBuffer: any;

property sampleValues

sampleValues: any;

property valueSize

valueSize: number;

method evaluate

evaluate: (time: number) => any;

class KeyframeTrack

class KeyframeTrack {}

Represents s a timed sequence of keyframes, which are composed of lists of times and related values, and which are used to animate a specific property of an object.

constructor

constructor(
    name: string,
    times: ArrayLike<number>,
    values: ArrayLike<string | number | boolean>,
    interpolation?: InterpolationModes
);

Constructs a new keyframe track.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.
Parameter interpolation
The interpolation type.

property DefaultInterpolation

DefaultInterpolation: InterpolationModes;

The default interpolation type of this keyframe track.
InterpolateLinear

property name

name: string;

The track's name can refer to morph targets or bones or possibly other values within an animated object. See PropertyBinding#parseTrackName for the forms of strings that can be parsed for property binding.

property TimeBufferType

TimeBufferType: TypedArrayConstructor | ArrayConstructor;

The time buffer type of this keyframe track.
Float32Array.constructor

property times

times: Float32Array;

The keyframe times.

property ValueBufferType

ValueBufferType: TypedArrayConstructor | ArrayConstructor;

The value buffer type of this keyframe track.
Float32Array.constructor

property values

values: Float32Array;

The keyframe values.

property ValueTypeName

ValueTypeName: string;

The value type name.
''

method clone

clone: () => this;

Returns a new keyframe track with copied values from this instance.
{KeyframeTrack} A clone of this instance.

method getInterpolation

getInterpolation: () => InterpolationModes;

Returns the current interpolation type.
{(InterpolateLinear|InterpolateDiscrete|InterpolateSmooth)} The interpolation type.

method getValueSize

getValueSize: () => number;

Returns the value size.
{number} The value size.

method InterpolantFactoryMethodDiscrete

InterpolantFactoryMethodDiscrete: (result?: TypedArray) => DiscreteInterpolant;

Factory method for creating a new discrete interpolant.
Parameter result
The result buffer. {DiscreteInterpolant} The new interpolant.

method InterpolantFactoryMethodLinear

InterpolantFactoryMethodLinear: (result?: TypedArray) => LinearInterpolant;

Factory method for creating a new linear interpolant.
Parameter result
The result buffer. {LinearInterpolant} The new interpolant.

method InterpolantFactoryMethodSmooth

InterpolantFactoryMethodSmooth: (result?: TypedArray) => CubicInterpolant;

Factory method for creating a new smooth interpolant.
Parameter result
The result buffer. {CubicInterpolant} The new interpolant.

method optimize

optimize: () => this;

Optimizes this keyframe track by removing equivalent sequential keys (which are common in morph target sequences).
{AnimationClip} A reference to this animation clip.

method scale

scale: (timeScale: number) => KeyframeTrack;

Scale all keyframe times by a factor (useful for frame - seconds conversions).
Parameter timeScale
The time scale. {KeyframeTrack} A reference to this keyframe track.

method setInterpolation

setInterpolation: (interpolation: InterpolationModes) => KeyframeTrack;

Defines the interpolation factor method for this keyframe track.
Parameter interpolation
The interpolation type. {KeyframeTrack} A reference to this keyframe track.

method shift

shift: (timeOffset: number) => KeyframeTrack;

Moves all keyframes either forward or backward in time.
Parameter timeOffset
The offset to move the time values. {KeyframeTrack} A reference to this keyframe track.

method toJSON

static toJSON: (track: KeyframeTrack) => KeyframeTrackJSON;

Converts the keyframe track to JSON.
Parameter track
The keyframe track to serialize. {Object} The serialized keyframe track as JSON.

method trim

trim: (startTime: number, endTime: number) => KeyframeTrack;

Removes keyframes before and after animation without changing any values within the defined time range.
Note: The method does not shift around keys to the start of the track time, because for interpolated keys this will change their values
Parameter startTime
The start time.
Parameter endTime
The end time. {KeyframeTrack} A reference to this keyframe track.

method validate

validate: () => boolean;

Performs minimal validation on the keyframe track. Returns true if the values are valid.
{boolean} Whether the keyframes are valid or not.

class LatheGeometry

class LatheGeometry extends BufferGeometry {}

Creates meshes with axial symmetry like vases

Remarks

The lathe rotates around the Y axis.

Example 1

const points = [];
for (let i = 0; i & lt; 10; i++) {
    points.push(new THREE.Vector2(Math.sin(i * 0.2) * 10 + 5, (i - 5) * 2));
}
const geometry = new THREE.LatheGeometry(points);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const lathe = new THREE.Mesh(geometry, material);
scene.add(lathe);

constructor

constructor(
    points?: Vector2[],
    segments?: number,
    phiStart?: number,
    phiLength?: number
);

This creates a LatheGeometry based on the parameters.
Parameter points
Array of Vector2s. The x-coordinate of each point must be greater than zero. Default [new Vector2(0, -0.5), new Vector2(0.5, 0), new Vector2(0, 0.5)] _which creates a simple diamond shape_.
Parameter segments
The number of circumference segments to generate. Expects a Integer. Default 12.
Parameter phiStart
The starting angle in radians. Expects a Float. Default 0.
Parameter phiLength
The radian (0 to 2*PI) range of the lathed section 2*PI is a closed lathe, less than 2PI is a portion. Expects a Float. Default Math.PI * 2.

property parameters

readonly parameters: {
    readonly points: Vector2[];
    readonly segments: number;
    readonly phiStart: number;
    readonly phiLength: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Layers

class Layers {}

A Layers object assigns an Object3D to 1 or more of 32 layers numbered 0 to 31 - internally the layers are stored as a bit mask, and by default all Object3Ds are a member of layer 0.
Remarks
All classes that inherit from Object3D have an Object3D.layers property which is an instance of this class.
See Also
- Example: WebGL / layers
- Example: Webxr / vr / layers
- Official Documentation
- Source

constructor

constructor();

Create a new Layers object, with membership initially set to layer 0.

property mask

mask: number;

A bit mask storing which of the 32 layers this layers object is currently a member of.
Remarks
Expects a Integer

method disable

disable: (layer: number) => void;

Remove membership of this layer.
Parameter layer
An integer from 0 to 31.

method disableAll

disableAll: () => void;

Remove membership from all layers.

method enable

enable: (layer: number) => void;

Add membership of this layer.
Parameter layer
An integer from 0 to 31.

method enableAll

enableAll: () => void;

Add membership to all layers.

method isEnabled

isEnabled: (layer: number) => boolean;

Returns true if the given layer is enabled.
Parameter layer
An integer from 0 to 31.

method set

set: (layer: number) => void;

Set membership to layer, and remove membership all other layers.
Parameter layer
An integer from 0 to 31.

method test

test: (layers: Layers) => boolean;

Returns true if this and the passed layers object have at least one layer in common.
Parameter layers
A Layers object

method toggle

toggle: (layer: number) => void;

Toggle membership of layer.
Parameter layer
An integer from 0 to 31.

class Light

abstract class Light<
    TShadowSupport extends LightShadow | undefined = LightShadow | undefined
> extends Object3D<LightEventMap> {}

Abstract base class for lights.
Remarks
All other light types inherit the properties and methods described here.

constructor

constructor(color?: ColorRepresentation, intensity?: number);

Creates a new Light
Parameter color
Hexadecimal color of the light. Default 0xffffff _(white)_.
Parameter intensity
Numeric value of the light's strength/intensity. Expects a Float. Default 1.
Remarks
**Note** that this is not intended to be called directly (use one of derived classes instead).

property color

color: Color;

Color of the light. \

property intensity

intensity: number;

The light's intensity, or strength. The units of intensity depend on the type of light.

property isLight

readonly isLight: boolean;

Read-only flag to check if a given object is of type HemisphereLight.
Remarks
This is a _constant_ value

property shadow

shadow: LightShadow<Camera>;

A LightShadow used to calculate shadows for this light.
Remarks
Available only on Light's that support shadows.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method copy

copy: (source: this, recursive?: boolean) => this;

Copies value of all the properties from the source to this instance.
Parameter source
Parameter recursive

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method toJSON

toJSON: (meta?: JSONMeta) => LightJSON;

class LightProbe

class LightProbe extends Light {}

Light probes are an alternative way of adding light to a 3D scene.
Remarks
Unlike classical light sources (e.g directional, point or spot lights), light probes do not emit light Instead they store information about light passing through 3D space During rendering, the light that hits a 3D object is approximated by using the data from the light probe. Light probes are usually created from (radiance) environment maps The class LightProbeGenerator can be used to create light probes from instances of CubeTexture or WebGLCubeRenderTarget However, light estimation data could also be provided in other forms e.g by WebXR This enables the rendering of augmented reality content that reacts to real world lighting. The current probe implementation in three.js supports so-called diffuse light probes This type of light probe is functionally equivalent to an irradiance environment map.
See Also
- Example: WebGL / light probe
- Example: WebGL / light probe / cube camera
- Official Documentation
- Source

constructor

constructor(sh?: SphericalHarmonics3, intensity?: number);

Creates a new LightProbe.
Parameter sh
An instance of SphericalHarmonics3. Default new THREE.SphericalHarmonics3()`.
Parameter intensity
Numeric value of the light probe's intensity. Expects a Float. Default 1.

property isLightProbe

readonly isLightProbe: boolean;

Read-only flag to check if a given object is of type DirectionalLight.
Remarks
This is a _constant_ value

property sh

sh: SphericalHarmonics3;

A light probe uses spherical harmonics to encode lighting information.

method toJSON

toJSON: (meta?: JSONMeta) => LightProbeJSON;

class LightShadow

class LightShadow<TCamera extends Camera = Camera> {}

Serves as a base class for the other shadow classes.
See Also
- Official Documentation
- Source

constructor

constructor(camera: Camera);

Create a new instance of LightShadow
Parameter camera
The light's view of the world.

property autoUpdate

autoUpdate: boolean;

Enables automatic updates of the light's shadow. If you do not require dynamic lighting / shadows, you may set this to false.

property bias

bias: number;

Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow. The Very tiny adjustments here (in the order of 0.0001) may help reduce artifacts in shadows.
Remarks
Expects a Float

property blurSamples

blurSamples: number;

The amount of samples to use when blurring a VSM shadow map.
Remarks
Expects a Integer

property camera

camera: Camera;

The light's view of the world. This is used to generate a depth map of the scene; objects behind other objects from the light's perspective will be in shadow.

property intensity

intensity: number;

The intensity of the shadow. The default is 1. Valid values are in the range [0, 1].

property map

map: WebGLRenderTarget<Texture<unknown>>;

The depth map generated using the internal camera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.

property mapPass

mapPass: WebGLRenderTarget<Texture<unknown>>;

The distribution map generated using the internal camera; an occlusion is calculated based on the distribution of depths. Computed internally during rendering.

property mapSize

mapSize: Vector2;

A Vector2 defining the width and height of the shadow map.
Remarks
Values must be powers of 2, up to the WebGLRenderer.capabilities.maxTextureSize for a given device, although the width and height don't have to be the same (so, for example, (512, 1024) is valid).

property mapType

mapType: TextureDataType;

The type of shadow texture. The default is UnsignedByteType.
UnsignedByteType

property matrix

matrix: Matrix4;

Model to shadow camera space, to compute location and depth in shadow map. Stored in a Matrix4.
Remarks
This is computed internally during rendering.

property needsUpdate

needsUpdate: boolean;

When set to true, shadow maps will be updated in the next render call. If you have set autoUpdate to false, you will need to set this property to true and then make a render call to update the light's shadow.

property normalBias

normalBias: number;

Defines how much the position used to query the shadow map is offset along the object normal. The Increasing this value can be used to reduce shadow acne especially in large scenes where light shines onto geometry at a shallow angle. The cost is that shadows may appear distorted.
Remarks
Expects a Float

property radius

radius: number;

Setting this to values greater than 1 will blur the edges of the shadow.toi High values will cause unwanted banding effects in the shadows - a greater {@link LightShadow.mapSize | mapSize will allow for a higher value to be used here before these effects become visible. If is set to PCFSoftShadowMap, radius has no effect and it is recommended to increase softness by decreasing mapSize instead. Note that this has no effect if the WebGLRenderer.shadowMap. is set to BasicShadowMap.
Remarks
Expects a Float

method clone

clone: (recursive?: boolean) => this;

Creates a new LightShadow with the same properties as this one.

method copy

copy: (source: LightShadow) => this;

Copies value of all the properties from the {@link LightShadow | source} to this Light.
Parameter source

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method getFrameExtents

getFrameExtents: () => Vector2;

Used internally by the renderer to extend the shadow map to contain all viewports

method getFrustum

getFrustum: () => Frustum;

Gets the shadow cameras frustum
Remarks
Used internally by the renderer to cull objects.

method getViewport

getViewport: (viewportIndex: number) => Vector4;

method getViewportCount

getViewportCount: () => number;

Used internally by the renderer to get the number of viewports that need to be rendered for this shadow.

method toJSON

toJSON: () => LightShadowJSON;

Serialize this LightShadow.

method updateMatrices

updateMatrices: (light: Light) => void;

Update the matrices for the camera and shadow, used internally by the renderer.
Parameter light
The light for which the shadow is being rendered.

class Line

class Line<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

A continuous line.

Remarks

This is nearly the same as LineSegments, the only difference is that it is rendered using gl.LINE_STRIP instead of gl.LINES

Example 1

const material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});
const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const {@link Line} = new THREE.Line(geometry, material);
scene.add(line);

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    material?: Material | Material[]
);

Create a new instance of Line
Parameter geometry
Vertices representing the Line segment(s). Default `new THREE.BufferGeometry()`.
Parameter material
Material for the line. Default `new THREE.LineBasicMaterial()`.

property geometry

geometry: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>;

Vertices representing the Line segment(s).

property isLine

readonly isLine: boolean;

Read-only flag to check if a given object is of type Line.
Remarks
This is a _constant_ value

property material

material: Material | Material[];

Material for the line.

property morphTargetDictionary

morphTargetDictionary?: { [key: string]: number };

A dictionary of morphTargets based on the morphTarget.name property.

property morphTargetInfluences

morphTargetInfluences?: number[];

An array of weights typically from 0-1 that specify how much of the morph is applied.

property type

override readonly type: string;

Modifiers
- @override

method computeLineDistances

computeLineDistances: () => this;

Computes an array of distance values which are necessary for LineDashedMaterial
Remarks
For each vertex in the geometry, the method calculates the cumulative length from the current point to the very beginning of the line.

method updateMorphTargets

updateMorphTargets: () => void;

Updates the morphTargets to have no influence on the object
Remarks
Resets the .morphTargetInfluences and .morphTargetDictionary properties.

class Line3

class Line3 {}

constructor

constructor(start?: Vector3, end?: Vector3);

property end

end: Vector3;

new THREE.Vector3()

property start

start: Vector3;

new THREE.Vector3()

method applyMatrix4

applyMatrix4: (matrix: Matrix4) => Line3;

method at

at: (t: number, target: Vector3) => Vector3;

method clone

clone: () => this;

method closestPointToPoint

closestPointToPoint: (
    point: Vector3,
    clampToLine: boolean,
    target: Vector3
) => Vector3;

method closestPointToPointParameter

closestPointToPointParameter: (point: Vector3, clampToLine?: boolean) => number;

method copy

copy: (line: Line3) => this;

method delta

delta: (target: Vector3) => Vector3;

method distance

distance: () => number;

method distanceSq

distanceSq: () => number;

method distanceSqToLine3

distanceSqToLine3: (line: Line3, c1?: Vector3, c2?: Vector3) => number;

method equals

equals: (line: Line3) => boolean;

method getCenter

getCenter: (target: Vector3) => Vector3;

method set

set: (start?: Vector3, end?: Vector3) => Line3;

class LinearInterpolant

class LinearInterpolant extends Interpolant {}

constructor

constructor(
    parameterPositions: any,
    samplesValues: any,
    sampleSize: number,
    resultBuffer?: any
);

method interpolate_

interpolate_: (i1: number, t0: number, t: number, t1: number) => any;

class LineBasicMaterial

class LineBasicMaterial extends Material {}

A material for rendering line primitives.
Materials define the appearance of renderable 3D objects.
const material = new THREE.LineBasicMaterial( { color: 0xffffff } );

constructor

constructor(parameters?: LineBasicMaterialParameters);

Constructs a new line basic material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isLineBasicMaterial

readonly isLineBasicMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: LineBasicMaterialParameters) => void;

class LineCurve

class LineCurve extends Curve<Vector2> {}

A curve representing a **2D** line segment.
See Also
- Official Documentation
- Source

constructor

constructor(v1?: Vector2, v2?: Vector2);

This constructor creates a new LineCurve.
Parameter v1
The start point. Default is new THREE.Vector2().
Parameter v2
The end point. Default is new THREE.Vector2().

property isLineCurve

readonly isLineCurve: boolean;

Read-only flag to check if a given object is of type LineCurve.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property v1

v1: Vector2;

The start point.

property v2

v2: Vector2;

The end point

class LineCurve3

class LineCurve3 extends Curve<Vector3> {}

A curve representing a **3D** line segment.
See Also
- Official Documentation
- Source

constructor

constructor(v1?: Vector3, v2?: Vector3);

This constructor creates a new LineCurve3.
Parameter v1
The start point. Default is new THREE.Vector3().
Parameter v2
The end point. Default is new THREE.Vector3().

property isLineCurve3

readonly isLineCurve3: boolean;

Read-only flag to check if a given object is of type LineCurve3.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property v1

v1: Vector3;

The start point.

property v2

v2: Vector3;

The end point.

class LineDashedMaterial

class LineDashedMaterial extends LineBasicMaterial {}

A material for rendering line primitives.

Materials define the appearance of renderable 3D objects.

const material = new THREE.LineDashedMaterial( {
	color: 0xffffff,
	scale: 1,
	dashSize: 3,
	gapSize: 1,
} );

constructor

constructor(parameters?: LineDashedMaterialParameters);

property isLineDashedMaterial

readonly isLineDashedMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: LineDashedMaterialParameters) => void;

class LineLoop

class LineLoop<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Line<TGeometry, TMaterial, TEventMap> {}

A continuous line that connects back to the start.
Remarks
This is nearly the same as Line, the only difference is that it is rendered using gl.LINE_LOOP instead of gl.LINE_STRIP, which draws a straight line to the next vertex, and connects the last vertex back to the first.
See Also
- Official Documentation
- Source

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    material?: Material | Material[]
);

Create a new instance of LineLoop
Parameter geometry
List of vertices representing points on the line loop. Default `new THREE.BufferGeometry()`.
Parameter material
Material for the line. Default `new THREE.LineBasicMaterial()`.

property isLineLoop

readonly isLineLoop: boolean;

Read-only flag to check if a given object is of type LineLoop.
Remarks
This is a _constant_ value

property type

override readonly type: string;

Modifiers
- @override

class LineSegments

class LineSegments<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Line<TGeometry, TMaterial, TEventMap> {}

A series of lines drawn between pairs of vertices.
Remarks
This is nearly the same as Line, the only difference is that it is rendered using gl.LINES instead of gl.LINE_STRIP.
See Also
- Official Documentation
- Source

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    material?: Material | Material[]
);

Create a new instance of LineSegments
Parameter geometry
Pair(s) of vertices representing each line segment(s). Default `new THREE.BufferGeometry()`.
Parameter material
Material for the line. Default `new THREE.LineBasicMaterial()`.

property isLineSegments

readonly isLineSegments: boolean;

Read-only flag to check if a given object is of type LineSegments.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

class Loader

class Loader<TData = unknown, TUrl = string> {}

Base class for implementing loaders.

constructor

constructor(manager?: LoadingManager);

property crossOrigin

crossOrigin: string;

'anonymous'

property DEFAULT_MATERIAL_NAME

static DEFAULT_MATERIAL_NAME: string;

property manager

manager: LoadingManager;

property path

path: string;

property requestHeader

requestHeader: { [header: string]: string };

{}

property resourcePath

resourcePath: string;

property withCredentials

withCredentials: boolean;

false

method abort

abort: () => this;

method load

load: (
    url: TUrl,
    onLoad: (data: TData) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => void;

method loadAsync

loadAsync: (
    url: TUrl,
    onProgress?: (event: ProgressEvent) => void
) => Promise<TData>;

method setCrossOrigin

setCrossOrigin: (crossOrigin: string) => this;

method setPath

setPath: (path: string) => this;

method setRequestHeader

setRequestHeader: (requestHeader: { [header: string]: string }) => this;

method setResourcePath

setResourcePath: (resourcePath: string) => this;

method setWithCredentials

setWithCredentials: (value: boolean) => this;

class LoaderUtils

class LoaderUtils {}

method extractUrlBase

static extractUrlBase: (url: string) => string;

method resolveURL

static resolveURL: (url: string, path: string) => string;

class LoadingManager

class LoadingManager {}

Handles and keeps track of loaded and pending data.

constructor

constructor(
    onLoad?: () => void,
    onProgress?: (url: string, loaded: number, total: number) => void,
    onError?: (url: string) => void
);

property abort

abort: () => this;

property abortController

abortController: AbortController;

property addHandler

addHandler: (regex: RegExp, loader: Loader) => this;

property getHandler

getHandler: (file: string) => Loader | null;

property itemEnd

itemEnd: (url: string) => void;

property itemError

itemError: (url: string) => void;

property itemStart

itemStart: (url: string) => void;

property onError

onError: (url: string) => void;

Will be called when item loading fails. The default is a function with empty body.
Parameter url
The url of the item that errored.

property onLoad

onLoad: () => void;

Will be called when all items finish loading. The default is a function with empty body.

property onProgress

onProgress: (url: string, loaded: number, total: number) => void;

Will be called for each loaded item. The default is a function with empty body.
Parameter url
The url of the item just loaded.
Parameter loaded
The number of items already loaded so far.
Parameter total
The total amount of items to be loaded.

property onStart

onStart: (url: string, loaded: number, total: number) => void;

Will be called when loading of an item starts.
Parameter url
The url of the item that started loading.
Parameter loaded
The number of items already loaded so far.
Parameter total
The total amount of items to be loaded.

property removeHandler

removeHandler: (regex: RegExp) => this;

property resolveURL

resolveURL: (url: string) => string;

Given a URL, uses the URL modifier callback (if any) and returns a resolved URL. If no URL modifier is set, returns the original URL.
Parameter url
the url to load

property setURLModifier

setURLModifier: (callback?: (url: string) => string) => this;

If provided, the callback will be passed each resource URL before a request is sent. The callback may return the original URL, or a new URL to override loading behavior. This behavior can be used to load assets from .ZIP files, drag-and-drop APIs, and Data URIs.
Parameter callback
URL modifier callback. Called with url argument, and must return resolvedURL.

class LOD

class LOD<
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

Every level is associated with an object, and rendering can be switched between them at the distances specified
Remarks
Typically you would create, say, three meshes, one for far away (low detail), one for mid range (medium detail) and one for close up (high detail).
Example 1
const lod = new THREE.LOD(); const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
//Create spheres with 3 levels of detail and create new LOD levels for them for (let i = 0; i & lt; 3; i++) { const geometry = new THREE.IcosahedronGeometry(10, 3 - i) const mesh = new THREE.Mesh(geometry, material); lod.addLevel(mesh, i * 75); } scene.add(lod);
See Also
- Example: {@link https://threejs.org/examples/#webgl_lod | webgl / LOD }
- Official Documentation
- Source

constructor

constructor();

Creates a new LOD.

property autoUpdate

autoUpdate: boolean;

Whether the LOD object is updated automatically by the renderer per frame or not. If set to false, you have to call .update() in the render loop by yourself.

property isLOD

readonly isLOD: boolean;

Read-only flag to check if a given object is of type LOD.
Remarks
This is a _constant_ value

property levels

readonly levels: { object: Object3D; distance: number; hysteresis: number }[];

An array of level objects

property type

override readonly type: string;

Modifiers
- @override

method addLevel

addLevel: (object: Object3D, distance?: number, hysteresis?: number) => this;

Adds a mesh that will display at a certain distance and greater. Typically the further away the distance, the lower the detail on the mesh.
Parameter object
The Object3D to display at this level.
Parameter distance
The distance at which to display this level of detail. Expects a Float. Default 0.0.
Parameter hysteresis
Threshold used to avoid flickering at LOD boundaries, as a fraction of distance. Expects a Float. Default 0.0.

method getCurrentLevel

getCurrentLevel: () => number;

Get the currently active LOD level
Remarks
As index of the levels array.

method getObjectForDistance

getObjectForDistance: (distance: number) => Object3D | null;

Get a reference to the first Object3D (mesh) that is greater than distance.
Parameter distance
Expects a Float

method removeLevel

removeLevel: (distance: number) => boolean;

Removes an existing level, based on the distance from the camera. Returns true when the level has been removed. Otherwise false.
Parameter distance
Distance of the level to delete.

method toJSON

toJSON: (meta?: JSONMeta) => LODJSON;

method update

update: (camera: Camera) => void;

Set the visibility of each level's object based on distance from the camera.
Parameter camera

class Material

class Material extends EventDispatcher<{ dispose: {} }> {}

Abstract base class for materials.
Materials define the appearance of renderable 3D objects.

property defines

defines?: Record<string, unknown>;

property isMaterial

readonly isMaterial: boolean;

This flag can be used for type testing.
true

property type

type: string;

The type property is used for detecting the object type in context of serialization/deserialization.

property uuid

readonly uuid: string;

The UUID of the material.

property version

readonly version: number;

This starts at 0 and counts how many times Material#needsUpdate is set to true.
0

method clone

clone: () => this;

Returns a new material with copied values from this instance.
{Material} A clone of this instance.

method copy

copy: (source: Material) => this;

Copies the values of the given material to this instance.
Parameter source
The material to copy. {Material} A reference to this instance.

method customProgramCacheKey

customProgramCacheKey: () => string;

In case Material#onBeforeCompile is used, this callback can be used to identify values of settings used in onBeforeCompile(), so three.js can reuse a cached shader or recompile the shader for this material as needed.
This method can only be used when rendering with WebGLRenderer.
{string} The custom program cache key.

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
Material#dispose

method onBeforeCompile

onBeforeCompile: (
    parameters: WebGLProgramParametersWithUniforms,
    renderer: WebGLRenderer
) => void;

An optional callback that is executed immediately before the shader program is compiled. This function is called with the shader source code as a parameter. Useful for the modification of built-in materials.
This method can only be used when rendering with WebGLRenderer. The recommended approach when customizing materials is to use WebGPURenderer with the new Node Material system and [TSL](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language).
Parameter shaderobject
The object holds the uniforms and the vertex and fragment shader source.
Parameter renderer
A reference to the renderer.

method onBeforeRender

onBeforeRender: (
    renderer: WebGLRenderer,
    scene: Scene,
    camera: Camera,
    geometry: BufferGeometry,
    object: Object3D,
    group: Group
) => void;

An optional callback that is executed immediately before the material is used to render a 3D object.
This method can only be used when rendering with WebGLRenderer.
Parameter renderer
The renderer.
Parameter scene
The scene.
Parameter camera
The camera that is used to render the scene.
Parameter geometry
The 3D object's geometry.
Parameter object
The 3D object.
Parameter group
The geometry group data.

method setValues

setValues: (values?: MaterialParameters) => void;

This method can be used to set default values from parameter objects. It is a generic implementation so it can be used with different types of materials.
Parameter values
The material values to set.

method toJSON

toJSON: (meta?: JSONMeta) => MaterialJSON;

Serializes the material into JSON.
Parameter meta
An optional value holding meta information about the serialization. {Object} A JSON object representing the serialized material.
See Also
- ObjectLoader#parse

class MaterialLoader

class MaterialLoader extends Loader<Material> {}

constructor

constructor(manager?: LoadingManager);

property textures

textures: { [key: string]: Texture<unknown> };

{}

method createMaterialFromType

static createMaterialFromType: (type: string) => Material;

method parse

parse: (json: unknown) => Material;

method setTextures

setTextures: (textures: { [key: string]: Texture<unknown> }) => this;

class Matrix2

class Matrix2 {}

A class representing a 2x2 .
Example 1
const m = new Matrix2();

constructor

constructor();

Creates a 2x2 .

constructor

constructor(n11: number, n12: number, n21: number, n22: number);

Creates a 2x2 matrix with the given arguments in row-major order.

property elements

elements: Matrix2Tuple;

A list of matrix values.

property isMatrix2

readonly isMatrix2: boolean;

method fromArray

fromArray: (array: ArrayLike<number>, offset?: number) => this;

Sets the elements of this matrix based on an array in format.
Parameter array
the array to read the elements from
Parameter offset
(optional) index of first element in the array. Default is 0.

method identity

identity: () => this;

Resets this matrix to the 2x2 identity matrix:

method set

set: (n11: number, n12: number, n21: number, n22: number) => this;

Sets the 2x2 matrix values to the given sequence of values: [n11, n12, n21, n22]

class Matrix3

class Matrix3 {}

constructor

constructor();

Creates an identity matrix.

constructor

constructor(
    n11: number,
    n12: number,
    n13: number,
    n21: number,
    n22: number,
    n23: number,
    n31: number,
    n32: number,
    n33: number
);

Creates a 3x3 matrix with the given arguments in row-major order.

property elements

elements: Matrix3Tuple;

Array with matrix values. [1, 0, 0, 0, 1, 0, 0, 0, 1]

property isMatrix3

readonly isMatrix3: boolean;

method clone

clone: () => this;

method copy

copy: (m: Matrix3) => this;

method determinant

determinant: () => number;

method equals

equals: (matrix: Matrix3) => boolean;

method extractBasis

extractBasis: (xAxis: Vector3, yAxis: Vector3, zAxis: Vector3) => this;

method fromArray

fromArray: (array: ArrayLike<number>, offset?: number) => this;

Sets the values of this matrix from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array-like. Default is 0.

method getNormalMatrix

getNormalMatrix: (matrix4: Matrix4) => this;

method identity

identity: () => this;

method invert

invert: () => this;

Inverts this matrix in place.

method makeRotation

makeRotation: (theta: number) => this;

Sets this matrix as a 2D rotational transformation by theta radians. The resulting matrix will be:
cos(θ) -sin(θ) 0 sin(θ) cos(θ) 0 0 0 1
Parameter theta
Rotation angle in radians. Positive values rotate counterclockwise.

method makeScale

makeScale: (x: number, y: number) => this;

Sets this matrix as a 2D scale transform:
x, 0, 0, 0, y, 0, 0, 0, 1
Parameter x
the amount to scale in the X axis.
Parameter y
the amount to scale in the Y axis.

method makeTranslation

makeTranslation: { (v: Vector2): this; (x: number, y: number): this };

Sets this matrix as a 2D translation transform:
1, 0, x, 0, 1, y, 0, 0, 1
Parameter v
the amount to translate.
Sets this matrix as a 2D translation transform:
1, 0, x, 0, 1, y, 0, 0, 1
Parameter x
the amount to translate in the X axis.
Parameter y
the amount to translate in the Y axis.

method multiply

multiply: (m: Matrix3) => this;

Multiplies this matrix by m.

method multiplyMatrices

multiplyMatrices: (a: Matrix3, b: Matrix3) => this;

Sets this matrix to a x b.

method multiplyScalar

multiplyScalar: (s: number) => this;

method premultiply

premultiply: (m: Matrix3) => this;

method rotate

rotate: (theta: number) => this;

method scale

scale: (sx: number, sy: number) => this;

method set

set: (
    n11: number,
    n12: number,
    n13: number,
    n21: number,
    n22: number,
    n23: number,
    n31: number,
    n32: number,
    n33: number
) => Matrix3;

method setFromMatrix4

setFromMatrix4: (m: Matrix4) => Matrix3;

method setUvTransform

setUvTransform: (
    tx: number,
    ty: number,
    sx: number,
    sy: number,
    rotation: number,
    cx: number,
    cy: number
) => this;

method toArray

toArray: {
    (): Matrix3Tuple;
    <TArray extends ArrayLike<number>>(array: TArray, offset?: number): TArray;
};

Writes the elements of this matrix to an array in format.
Writes the elements of this matrix to an array in format.
Parameter array
array to store the resulting vector in. If not given a new array will be created.
Parameter offset
(optional) offset in the array at which to put the result.

method translate

translate: (tx: number, ty: number) => this;

method transpose

transpose: () => this;

Transposes this matrix in place.

method transposeIntoArray

transposeIntoArray: (r: number[]) => this;

Transposes this matrix into the supplied array r, and returns itself.

class Matrix4

class Matrix4 {}

A 4x4 Matrix.
Example 1
// Simple rig for rotating around 3 axes const m = new THREE.Matrix4(); const m1 = new THREE.Matrix4(); const m2 = new THREE.Matrix4(); const m3 = new THREE.Matrix4(); const alpha = 0; const beta = Math.PI; const gamma = Math.PI/2; m1.makeRotationX( alpha ); m2.makeRotationY( beta ); m3.makeRotationZ( gamma ); m.multiplyMatrices( m1, m2 ); m.multiply( m3 );

constructor

constructor();

Creates an identity matrix.

constructor

constructor(
    n11: number,
    n12: number,
    n13: number,
    n14: number,
    n21: number,
    n22: number,
    n23: number,
    n24: number,
    n31: number,
    n32: number,
    n33: number,
    n34: number,
    n41: number,
    n42: number,
    n43: number,
    n44: number
);

Creates a 4x4 matrix with the given arguments in row-major order.

property elements

elements: Matrix4Tuple;

Array with matrix values. [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

property isMatrix4

readonly isMatrix4: boolean;

method clone

clone: () => Matrix4;

method compose

compose: (position: Vector3, quaternion: Quaternion, scale: Vector3) => this;

Sets this matrix to the transformation composed of translation, rotation and scale.

method copy

copy: (m: Matrix4) => this;

method copyPosition

copyPosition: (m: Matrix4) => this;

method decompose

decompose: (position: Vector3, quaternion: Quaternion, scale: Vector3) => this;

Decomposes this matrix into it's position, quaternion and scale components.

method determinant

determinant: () => number;

Computes determinant of this matrix. Based on http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm

method equals

equals: (matrix: Matrix4) => boolean;

method extractBasis

extractBasis: (xAxis: Vector3, yAxis: Vector3, zAxis: Vector3) => this;

method extractRotation

extractRotation: (m: Matrix4) => this;

Copies the rotation component of the supplied matrix m into this matrix rotation component.

method fromArray

fromArray: (array: ArrayLike<number>, offset?: number) => this;

Sets the values of this matrix from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array-like. Default is 0.

method getMaxScaleOnAxis

getMaxScaleOnAxis: () => number;

method identity

identity: () => this;

Resets this matrix to identity.

method invert

invert: () => this;

Inverts this matrix.

method lookAt

lookAt: (eye: Vector3, target: Vector3, up: Vector3) => this;

Sets the rotation component of the transformation matrix, looking from [eye]Vector3 towards [target]Vector3, and oriented by the up-direction [up]Vector3.

method makeBasis

makeBasis: (xAxis: Vector3, yAxis: Vector3, zAxis: Vector3) => this;

method makeOrthographic

makeOrthographic: (
    left: number,
    right: number,
    top: number,
    bottom: number,
    near: number,
    far: number,
    coordinateSystem?: CoordinateSystem,
    reversedDepth?: boolean
) => this;

Creates an orthographic projection matrix.

method makePerspective

makePerspective: (
    left: number,
    right: number,
    top: number,
    bottom: number,
    near: number,
    far: number,
    coordinateSystem?: CoordinateSystem,
    reversedDepth?: boolean
) => this;

Creates a perspective projection matrix.

method makeRotationAxis

makeRotationAxis: (axis: Vector3, angle: number) => this;

Sets this matrix as rotation transform around axis by angle radians. Based on http://www.gamedev.net/reference/articles/article1199.asp.
Parameter axis
Rotation axis.
Parameter angle
Rotation angle in radians.

method makeRotationFromEuler

makeRotationFromEuler: (euler: Euler) => this;

method makeRotationFromQuaternion

makeRotationFromQuaternion: (q: Quaternion) => this;

method makeRotationX

makeRotationX: (theta: number) => this;

Sets this matrix as rotation transform around x axis by theta radians.
Parameter theta
Rotation angle in radians.

method makeRotationY

makeRotationY: (theta: number) => this;

Sets this matrix as rotation transform around y axis by theta radians.
Parameter theta
Rotation angle in radians.

method makeRotationZ

makeRotationZ: (theta: number) => this;

Sets this matrix as rotation transform around z axis by theta radians.
Parameter theta
Rotation angle in radians.

method makeScale

makeScale: (x: number, y: number, z: number) => this;

Sets this matrix as scale transform.

method makeShear

makeShear: (
    xy: number,
    xz: number,
    yx: number,
    yz: number,
    zx: number,
    zy: number
) => this;

Sets this matrix as shear transform.

method makeTranslation

makeTranslation: { (v: Vector3): this; (x: number, y: number, z: number): this };

Sets this matrix as translation transform.

method multiply

multiply: (m: Matrix4) => this;

Multiplies this matrix by m.

method multiplyMatrices

multiplyMatrices: (a: Matrix4, b: Matrix4) => this;

Sets this matrix to a x b.

method multiplyScalar

multiplyScalar: (s: number) => this;

Multiplies this matrix by s.

method premultiply

premultiply: (m: Matrix4) => this;

method scale

scale: (v: Vector3) => this;

Multiplies the columns of this matrix by vector v.

method set

set: (
    n11: number,
    n12: number,
    n13: number,
    n14: number,
    n21: number,
    n22: number,
    n23: number,
    n24: number,
    n31: number,
    n32: number,
    n33: number,
    n34: number,
    n41: number,
    n42: number,
    n43: number,
    n44: number
) => this;

Sets all fields of this matrix.

method setFromMatrix3

setFromMatrix3: (m: Matrix3) => this;

Set the upper 3x3 elements of this matrix to the values of the Matrix3 m.

method setPosition

setPosition: { (v: Vector3): this; (x: number, y: number, z: number): this };

Sets the position component for this matrix from vector v.

method toArray

toArray: {
    (): Matrix4Tuple;
    <TArray extends ArrayLike<number>>(array: TArray, offset?: number): TArray;
};

Writes the elements of this matrix to an array in format.
Writes the elements of this matrix to an array in format.
Parameter array
array to store the resulting vector in.
Parameter offset
(optional) offset in the array at which to put the result.

method transpose

transpose: () => this;

Transposes this matrix.

class Mesh

class Mesh<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

Class representing triangular polygon mesh based objects.

Remarks

Also serves as a base for other classes such as SkinnedMesh, InstancedMesh.

Example 1

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const {@link Mesh} = new THREE.Mesh(geometry, material);
scene.add(mesh);

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    material?: Material | Material[]
);

Create a new instance of Mesh
Parameter geometry
An instance of BufferGeometry. Default `new THREE.BufferGeometry()`.
Parameter material
A single or an array of Material. Default `new THREE.MeshBasicMaterial()`.

property count

count: number;

The number of instances of this mesh. Can only be used with WebGPURenderer.
1

property geometry

geometry: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>;

An instance of BufferGeometry (or derived classes), defining the object's structure.

property isMesh

readonly isMesh: boolean;

Read-only flag to check if a given object is of type Mesh.
Remarks
This is a _constant_ value

property material

material: Material | Material[];

An instance of material derived from the Material base class or an array of materials, defining the object's appearance.

property morphTargetDictionary

morphTargetDictionary?: { [key: string]: number };

A dictionary of morphTargets based on the morphTarget.name property.

property morphTargetInfluences

morphTargetInfluences?: number[];

An array of weights typically from 0-1 that specify how much of the morph is applied.

property type

override readonly type: string;

Modifiers
- @override

method getVertexPosition

getVertexPosition: (index: number, target: Vector3) => Vector3;

Get the local-space position of the vertex at the given index, taking into account the current animation state of both morph targets and skinning.
Parameter index
Expects a Integer
Parameter target

method toJSON

toJSON: (meta?: JSONMeta) => MeshJSON;

method updateMorphTargets

updateMorphTargets: () => void;

Updates the morphTargets to have no influence on the object
Remarks
Resets the morphTargetInfluences and morphTargetDictionary properties.

class MeshBasicMaterial

class MeshBasicMaterial extends Material {}

A material for drawing geometries in a simple shaded (flat or wireframe) way.
This material is not affected by lights.

constructor

constructor(parameters?: MeshBasicMaterialParameters);

Constructs a new mesh basic material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshBasicMaterial

readonly isMeshBasicMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshBasicMaterialParameters) => void;

class MeshDepthMaterial

class MeshDepthMaterial extends Material {}

A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.

constructor

constructor(parameters?: MeshDepthMaterialParameters);

Constructs a new mesh depth material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshDepthMaterial

readonly isMeshDepthMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshDepthMaterialParameters) => void;

class MeshDistanceMaterial

class MeshDistanceMaterial extends Material {}

A material used internally for implementing shadow mapping with point lights.
Can also be used to customize the shadow casting of an object by assigning an instance of MeshDistanceMaterial to Object3D#customDistanceMaterial. The following examples demonstrates this approach in order to ensure transparent parts of objects do not cast shadows.

constructor

constructor(parameters?: MeshDistanceMaterialParameters);

Constructs a new mesh distance material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshDistanceMaterial

readonly isMeshDistanceMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshDistanceMaterialParameters) => void;

class MeshLambertMaterial

class MeshLambertMaterial extends Material {}

A material for non-shiny surfaces, without specular highlights.
The material uses a non-physically based [Lambertian](https://en.wikipedia.org/wiki/Lambertian_reflectance) model for calculating reflectance. This can simulate some surfaces (such as untreated wood or stone) well, but cannot simulate shiny surfaces with specular highlights (such as varnished wood). MeshLambertMaterial uses per-fragment shading.
Due to the simplicity of the reflectance and illumination models, performance will be greater when using this material over the MeshPhongMaterial, MeshStandardMaterial or MeshPhysicalMaterial, at the cost of some graphical accuracy.

constructor

constructor(parameters?: MeshLambertMaterialParameters);

Constructs a new mesh lambert material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshLambertMaterial

readonly isMeshLambertMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshLambertMaterialParameters) => void;

class MeshMatcapMaterial

class MeshMatcapMaterial extends Material {}

This material is defined by a MatCap (or Lit Sphere) texture, which encodes the material color and shading.
MeshMatcapMaterial does not respond to lights since the matcap image file encodes baked lighting. It will cast a shadow onto an object that receives shadows (and shadow clipping works), but it will not self-shadow or receive shadows.

constructor

constructor(parameters?: MeshMatcapMaterialParameters);

Constructs a new mesh matcap material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshMatcapMaterial

readonly isMeshMatcapMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshMatcapMaterialParameters) => void;

class MeshNormalMaterial

class MeshNormalMaterial extends Material {}

A material that maps the normal vectors to RGB colors.

constructor

constructor(parameters?: MeshNormalMaterialParameters);

Constructs a new mesh normal material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshNormalMaterial

readonly isMeshNormalMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshNormalMaterialParameters) => void;

class MeshPhongMaterial

class MeshPhongMaterial extends Material {}

A material for shiny surfaces with specular highlights.
The material uses a non-physically based [Blinn-Phong](https://en.wikipedia.org/wiki/Blinn-Phong_shading_model) model for calculating reflectance. Unlike the Lambertian model used in the MeshLambertMaterial this can simulate shiny surfaces with specular highlights (such as varnished wood). MeshPhongMaterial uses per-fragment shading.
Performance will generally be greater when using this material over the MeshStandardMaterial or MeshPhysicalMaterial, at the cost of some graphical accuracy.

constructor

constructor(parameters?: MeshPhongMaterialParameters);

Constructs a new mesh phong material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshPhongMaterial

readonly isMeshPhongMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshPhongMaterialParameters) => void;

class MeshPhysicalMaterial

class MeshPhysicalMaterial extends MeshStandardMaterial {}

An extension of the MeshStandardMaterial, providing more advanced physically-based rendering properties:
- Anisotropy: Ability to represent the anisotropic property of materials as observable with brushed metals. - Clearcoat: Some materials — like car paints, carbon fiber, and wet surfaces — require a clear, reflective layer on top of another layer that may be irregular or rough. Clearcoat approximates this effect, without the need for a separate transparent surface. - Iridescence: Allows to render the effect where hue varies depending on the viewing angle and illumination angle. This can be seen on soap bubbles, oil films, or on the wings of many insects. - Physically-based transparency: One limitation of Material#opacity is that highly transparent materials are less reflective. Physically-based transmission provides a more realistic option for thin, transparent surfaces like glass. - Advanced reflectivity: More flexible reflectivity for non-metallic materials. - Sheen: Can be used for representing cloth and fabric materials.
As a result of these complex shading features, MeshPhysicalMaterial has a higher performance cost, per pixel, than other three.js materials. Most effects are disabled by default, and add cost as they are enabled. For best results, always specify an environment map when using this material.

constructor

constructor(parameters?: MeshPhysicalMaterialParameters);

property isMeshPhysicalMaterial

readonly isMeshPhysicalMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshPhysicalMaterialParameters) => void;

class MeshStandardMaterial

class MeshStandardMaterial extends Material {}

A standard physically based material, using Metallic-Roughness workflow.
Physically based rendering (PBR) has recently become the standard in many 3D applications, such as [Unity](https://blogs.unity3d.com/2014/10/29/physically-based-shading-in-unity-5-a-primer/), [Unreal](https://docs.unrealengine.com/latest/INT/Engine/Rendering/Materials/PhysicallyBased/) and [3D Studio Max](http://area.autodesk.com/blogs/the-3ds-max-blog/what039s-new-for-rendering-in-3ds-max-2017).
This approach differs from older approaches in that instead of using approximations for the way in which light interacts with a surface, a physically correct model is used. The idea is that, instead of tweaking materials to look good under specific lighting, a material can be created that will react 'correctly' under all lighting scenarios.
In practice this gives a more accurate and realistic looking result than the MeshLambertMaterial or MeshPhongMaterial, at the cost of being somewhat more computationally expensive. MeshStandardMaterial uses per-fragment shading.
Note that for best results you should always specify an environment map when using this material.
For a non-technical introduction to the concept of PBR and how to set up a PBR material, check out these articles by the people at [marmoset](https://www.marmoset.co):
- [Basic Theory of Physically Based Rendering](https://www.marmoset.co/posts/basic-theory-of-physically-based-rendering/) - [Physically Based Rendering and You Can Too](https://www.marmoset.co/posts/physically-based-rendering-and-you-can-too/)
Technical details of the approach used in three.js (and most other PBR systems) can be found is this [paper from Disney](https://media.disneyanimation.com/uploads/production/publication_asset/48/asset/s2012_pbs_disney_brdf_notes_v3.pdf) (pdf), by Brent Burley.

constructor

constructor(parameters?: MeshStandardMaterialParameters);

Constructs a new mesh standard material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshStandardMaterial

readonly isMeshStandardMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshStandardMaterialParameters) => void;

class MeshToonMaterial

class MeshToonMaterial extends Material {}

A material implementing toon shading.

constructor

constructor(parameters?: MeshToonMaterialParameters);

Constructs a new mesh toon material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isMeshToonMaterial

readonly isMeshToonMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: MeshToonMaterialParameters) => void;

class NumberKeyframeTrack

class NumberKeyframeTrack extends KeyframeTrack {}

A track for numeric keyframe values.

constructor

constructor(
    name: string,
    times: ArrayLike<number>,
    values: ArrayLike<number>,
    interpolation?: InterpolationModes
);

Constructs a new number keyframe track.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.
Parameter interpolation
The interpolation type.

class Object3D

class Object3D<
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends EventDispatcher<TEventMap> {}

This is the base class for most objects in three.js and provides a set of properties and methods for manipulating objects in 3D space.
Remarks
Note that this can be used for grouping objects via the .add() method which adds the object as a child, however it is better to use Group for this.
See Also
- Official Documentation
- Source

constructor

constructor();

This creates a new Object3D object.

property animations

animations: AnimationClip[];

Array with object's animation clips.

property castShadow

castShadow: boolean;

Whether the object gets rendered into shadow map.

property children

children: Object3D<Object3DEventMap>[];

Array with object's children.
See Also
- Group for info on manually grouping objects.

property customDepthMaterial

customDepthMaterial?: Material;

Custom depth material to be used when rendering to the depth map.
Remarks
Can only be used in context of meshes. When shadow-casting with a DirectionalLight or SpotLight, if you are modifying vertex positions in the vertex shader you must specify a customDepthMaterial for proper shadows.

property customDistanceMaterial

customDistanceMaterial?: Material;

Same as customDepthMaterial, but used with PointLight.

property DEFAULT_MATRIX_AUTO_UPDATE

static DEFAULT_MATRIX_AUTO_UPDATE: boolean;

The default setting for matrixAutoUpdate for newly created Object3Ds.

property DEFAULT_MATRIX_WORLD_AUTO_UPDATE

static DEFAULT_MATRIX_WORLD_AUTO_UPDATE: boolean;

The default setting for matrixWorldAutoUpdate for newly created Object3Ds.

property DEFAULT_UP

static DEFAULT_UP: Vector3;

The default up direction for objects, also used as the default position for DirectionalLight, HemisphereLight and Spotlight (which creates lights shining from the top down).

property frustumCulled

frustumCulled: boolean;

When this is set, it checks every frame if the object is in the frustum of the camera before rendering the object. If set to false the object gets rendered every frame even if it is not in the frustum of the camera.

property id

readonly id: number;

Unique number for this Object3D instance.
Remarks
Note that ids are assigned in chronological order: 1, 2, 3, ..., incrementing by one for each new object. Expects a Integer

property isObject3D

readonly isObject3D: boolean;

Flag to check if a given object is of type Object3D.
Remarks
This is a _constant_ value

property layers

layers: Layers;

The layer membership of the object.
Remarks
The object is only visible if it has at least one layer in common with the Camera in use. This property can also be used to filter out unwanted objects in ray-intersection tests when using Raycaster.

property matrix

matrix: Matrix4;

The local transform matrix.

property matrixAutoUpdate

matrixAutoUpdate: boolean;

When this is set, it calculates the matrix of position, (rotation or quaternion) and scale every frame and also recalculates the matrixWorld property.

property matrixWorld

matrixWorld: Matrix4;

The global transform of the object.
Remarks
If the Object3D has no parent, then it's identical to the local transform .matrix.

property matrixWorldAutoUpdate

matrixWorldAutoUpdate: boolean;

If set, then the renderer checks every frame if the object and its children need matrix updates. When it isn't, then you have to maintain all matrices in the object and its children yourself.

property matrixWorldNeedsUpdate

matrixWorldNeedsUpdate: boolean;

When this is set, it calculates the matrixWorld in that frame and resets this property to false.

property modelViewMatrix

readonly modelViewMatrix: Matrix4;

property name

name: string;

Optional name of the object
Remarks
_(doesn't need to be unique)_.

property normalMatrix

readonly normalMatrix: Matrix3;

property parent

parent: Object3D<Object3DEventMap>;

Object's parent in the scene graph.
Remarks
An object can have at most one parent.

property position

readonly position: Vector3;

Object's local position.

property quaternion

readonly quaternion: Quaternion;

Object's local rotation as a Quaternion.

property receiveShadow

receiveShadow: boolean;

Whether the material receives shadows.

property renderOrder

renderOrder: number;

This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently.
Remarks
When this property is set for an instance of Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder.

property rotation

readonly rotation: Euler;

Object's local rotation (Euler angles), in radians.

property scale

readonly scale: Vector3;

The object's local scale.

property type

readonly type: string;

A Read-only _string_ to check this object type.
Remarks
This can be used to find a specific type of Object3D in a scene. Sub-classes will update this value.

property up

up: Vector3;

This is used by the lookAt method, for example, to determine the orientation of the result.

property userData

userData: Record<string, any>;

An object that can be used to store custom data about the Object3D.
Remarks
It should not hold references to _functions_ as these **will not** be cloned. {}

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

property visible

visible: boolean;

Object gets rendered if true.

method add

add: (...object: Object3D[]) => this;

Adds another Object3D as child of this Object3D.
Parameter object
Remarks
An arbitrary number of objects may be added Any current parent on an object passed in here will be removed, since an Object3D can have at most one parent.
See Also
- attach
- Group for info on manually grouping objects.

method applyMatrix4

applyMatrix4: (matrix: Matrix4) => void;

Applies the matrix transform to the object and updates the object's position, rotation and scale.
Parameter matrix

method applyQuaternion

applyQuaternion: (quaternion: Quaternion) => this;

Applies the rotation represented by the quaternion to the object.
Parameter quaternion

method attach

attach: (object: Object3D) => this;

Adds a Object3D as a child of this, while maintaining the object's world transform.
Parameter object
Remarks
Note: This method does not support scene graphs having non-uniformly-scaled nodes(s).
See Also
- add

method clear

clear: () => this;

Removes all child objects.

method clone

clone: (recursive?: boolean) => this;

Returns a clone of this object and optionally all descendants.
Parameter recursive
If true, descendants of the object are also cloned. Default true

method copy

copy: (object: Object3D, recursive?: boolean) => this;

Copies the given object into this object.
Parameter object
Parameter recursive
If set to true, descendants of the object are copied next to the existing ones. If set to false, descendants are left unchanged. Default is true.
Remarks
Event listeners and user-defined callbacks ( and ) are not copied.

method getObjectById

getObjectById: (id: number) => Object3D | undefined;

Searches through an object and its children, starting with the object itself, and returns the first with a matching id.
Parameter id
Unique number of the object instance. Expects a Integer
Remarks
Note that ids are assigned in chronological order: 1, 2, 3, ..., incrementing by one for each new object.
See Also
- id

method getObjectByName

getObjectByName: (name: string) => Object3D | undefined;

Searches through an object and its children, starting with the object itself, and returns the first with a matching name.
Parameter name
String to match to the children's Object3D.name property.
Remarks
Note that for most objects the name is an empty string by default You will have to set it manually to make use of this method.

method getObjectByProperty

getObjectByProperty: (name: string, value: any) => Object3D | undefined;

Searches through an object and its children, starting with the object itself, and returns the first with a property that matches the value given.
Parameter name
the property name to search for.
Parameter value
value of the given property.

method getObjectsByProperty

getObjectsByProperty: (
    name: string,
    value: any,
    optionalTarget?: Object3D[]
) => Object3D[];

Searches through an object and its children, starting with the object itself, and returns the first with a property that matches the value given.
Parameter name
The property name to search for.
Parameter value
Value of the given property.
Parameter optionalTarget
target to set the result. Otherwise a new Array is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;).

method getWorldDirection

getWorldDirection: (target: Vector3) => Vector3;

Returns a vector representing the direction of object's positive z-axis in world space.
Parameter target
The result will be copied into this Vector3.

method getWorldPosition

getWorldPosition: (target: Vector3) => Vector3;

Returns a vector representing the position of the object in world space.
Parameter target
The result will be copied into this Vector3.

method getWorldQuaternion

getWorldQuaternion: (target: Quaternion) => Quaternion;

Returns a quaternion representing the rotation of the object in world space.
Parameter target
The result will be copied into this Quaternion.

method getWorldScale

getWorldScale: (target: Vector3) => Vector3;

Returns a vector of the scaling factors applied to the object for each axis in world space.
Parameter target
The result will be copied into this Vector3.

method localToWorld

localToWorld: (vector: Vector3) => Vector3;

Converts the vector from this object's local space to world space.
Parameter vector
A vector representing a position in this object's local space.

method lookAt

lookAt: { (vector: Vector3): void; (x: number, y: number, z: number): void };

Rotates the object to face a point in world space.
Parameter vector
A vector representing a position in world space to look at.
Remarks
This method does not support objects having non-uniformly-scaled parent(s).
Rotates the object to face a point in world space.
Parameter x
Expects a Float
Parameter y
Expects a Float
Parameter z
Expects a Float
Remarks
This method does not support objects having non-uniformly-scaled parent(s).

method onAfterRender

onAfterRender: (
    renderer: WebGLRenderer,
    scene: Scene,
    camera: Camera,
    geometry: BufferGeometry,
    material: Material,
    group: Group
) => void;

An optional callback that is executed immediately after a 3D object is rendered.
Remarks
This function is called with the following parameters: renderer, scene, camera, geometry, material, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

method onAfterShadow

onAfterShadow: (
    renderer: WebGLRenderer,
    scene: Scene,
    camera: Camera,
    shadowCamera: Camera,
    geometry: BufferGeometry,
    depthMaterial: Material,
    group: Group
) => void;

An optional callback that is executed immediately after a 3D object is rendered to a shadow map.
Remarks
This function is called with the following parameters: renderer, scene, camera, shadowCamera, geometry, depthMaterial, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

method onBeforeRender

onBeforeRender: (
    renderer: WebGLRenderer,
    scene: Scene,
    camera: Camera,
    geometry: BufferGeometry,
    material: Material,
    group: Group
) => void;

An optional callback that is executed immediately before a 3D object is rendered.
Remarks
This function is called with the following parameters: renderer, scene, camera, geometry, material, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

method onBeforeShadow

onBeforeShadow: (
    renderer: WebGLRenderer,
    scene: Scene,
    camera: Camera,
    shadowCamera: Camera,
    geometry: BufferGeometry,
    depthMaterial: Material,
    group: Group
) => void;

An optional callback that is executed immediately before a 3D object is rendered to a shadow map.
Remarks
This function is called with the following parameters: renderer, scene, camera, shadowCamera, geometry, depthMaterial, group. Please notice that this callback is only executed for renderable 3D objects. Meaning 3D objects which define their visual appearance with geometries and materials like instances of Mesh, Line, Points or Sprite. Instances of Object3D, Group or Bone are not renderable and thus this callback is not executed for such objects.

method raycast

raycast: (raycaster: Raycaster, intersects: Intersection[]) => void;

Abstract (empty) method to get intersections between a casted ray and this object
Parameter raycaster
Parameter intersects
Remarks
Subclasses such as Mesh, Line, and Points implement this method in order to use raycasting.
See Also
- Raycaster

method remove

remove: (...object: Object3D[]) => this;

Removes a Object3D as child of this Object3D.
Parameter object
Remarks
An arbitrary number of objects may be removed.
See Also
- Group for info on manually grouping objects.

method removeFromParent

removeFromParent: () => this;

Removes this object from its current parent.

method rotateOnAxis

rotateOnAxis: (axis: Vector3, angle: number) => this;

Rotate an object along an axis in object space.
Parameter axis
A normalized vector in object space.
Parameter angle
The angle in radians. Expects a Float
Remarks
The axis is assumed to be normalized.

method rotateOnWorldAxis

rotateOnWorldAxis: (axis: Vector3, angle: number) => this;

Rotate an object along an axis in world space.
Parameter axis
A normalized vector in world space.
Parameter angle
The angle in radians. Expects a Float
Remarks
The axis is assumed to be normalized Method Assumes no rotated parent.

method rotateX

rotateX: (angle: number) => this;

Rotates the object around _x_ axis in local space.
Parameter rad
The angle to rotate in radians. Expects a Float

method rotateY

rotateY: (angle: number) => this;

Rotates the object around _y_ axis in local space.
Parameter rad
The angle to rotate in radians. Expects a Float

method rotateZ

rotateZ: (angle: number) => this;

Rotates the object around _z_ axis in local space.
Parameter rad
The angle to rotate in radians. Expects a Float

method setRotationFromAxisAngle

setRotationFromAxisAngle: (axis: Vector3, angle: number) => void;

Calls setFromAxisAngle(axis, angle) on the .quaternion.
Parameter axis
A normalized vector in object space.
Parameter angle
Angle in radians. Expects a Float

method setRotationFromEuler

setRotationFromEuler: (euler: Euler) => void;

Calls setFromEuler(euler) on the .quaternion.
Parameter euler
Euler angle specifying rotation amount.

method setRotationFromMatrix

setRotationFromMatrix: (m: Matrix4) => void;

Calls setFromRotationMatrix(m) on the .quaternion.
Parameter m
Rotate the quaternion by the rotation component of the matrix.
Remarks
Note that this assumes that the upper 3x3 of m is a pure rotation matrix (i.e, unscaled).

method setRotationFromQuaternion

setRotationFromQuaternion: (q: Quaternion) => void;

Copy the given Quaternion into .quaternion.
Parameter q
Normalized Quaternion.

method toJSON

toJSON: (meta?: JSONMeta) => Object3DJSON;

Convert the object to three.js JSON Object/Scene format.
Parameter meta
Object containing metadata such as materials, textures or images for the object.

method translateOnAxis

translateOnAxis: (axis: Vector3, distance: number) => this;

Translate an object by distance along an axis in object space
Parameter axis
A normalized vector in object space.
Parameter distance
The distance to translate. Expects a Float
Remarks
The axis is assumed to be normalized.

method translateX

translateX: (distance: number) => this;

Translates object along x axis in object space by distance units.
Parameter distance
Expects a Float

method translateY

translateY: (distance: number) => this;

Translates object along _y_ axis in object space by distance units.
Parameter distance
Expects a Float

method translateZ

translateZ: (distance: number) => this;

Translates object along _z_ axis in object space by distance units.
Parameter distance
Expects a Float

method traverse

traverse: (callback: (object: Object3D) => any) => void;

Executes the callback on this object and all descendants.
Parameter callback
A function with as first argument an Object3D object.
Remarks
Note: Modifying the scene graph inside the callback is discouraged.

method traverseAncestors

traverseAncestors: (callback: (object: Object3D) => any) => void;

Executes the callback on all ancestors.
Parameter callback
A function with as first argument an Object3D object.
Remarks
Note: Modifying the scene graph inside the callback is discouraged.

method traverseVisible

traverseVisible: (callback: (object: Object3D) => any) => void;

Like traverse, but the callback will only be executed for visible objects
Parameter callback
A function with as first argument an Object3D object.
Remarks
Descendants of invisible objects are not traversed. Note: Modifying the scene graph inside the callback is discouraged.

method updateMatrix

updateMatrix: () => void;

Updates local transform.

method updateMatrixWorld

updateMatrixWorld: (force?: boolean) => void;

Updates the global transform of the object. And will update the object descendants if .matrixWorldNeedsUpdate is set to true or if the force parameter is set to true.
Parameter force
A boolean that can be used to bypass .matrixWorldAutoUpdate, to recalculate the world matrix of the object and descendants on the current frame. Useful if you cannot wait for the renderer to update it on the next frame, assuming .matrixWorldAutoUpdate set to true.

method updateWorldMatrix

updateWorldMatrix: (updateParents: boolean, updateChildren: boolean) => void;

Updates the global transform of the object.
Parameter updateParents
Recursively updates global transform of ancestors.
Parameter updateChildren
Recursively updates global transform of descendants.

method worldToLocal

worldToLocal: (vector: Vector3) => Vector3;

Converts the vector from world space to this object's local space.
Parameter vector
A vector representing a position in world space.

class ObjectLoader

class ObjectLoader extends Loader<Object3D> {}

constructor

constructor(manager?: LoadingManager);

method load

load: (
    url: string,
    onLoad?: (data: Object3D) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => void;

method parse

parse: (json: unknown, onLoad?: (object: Object3D) => void) => Object3D;

method parseAnimations

parseAnimations: (json: unknown) => { [key: string]: AnimationClip };

method parseAsync

parseAsync: (json: unknown) => Promise<Object3D>;

method parseGeometries

parseGeometries: (json: unknown) => {
    [key: string]:
        | BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>
        | InstancedBufferGeometry;
};

method parseImages

parseImages: (
    json: unknown,
    onLoad?: () => void
) => { [key: string]: Source<unknown> };

method parseImagesAsync

parseImagesAsync: (json: unknown) => Promise<{ [key: string]: Source<unknown> }>;

method parseMaterials

parseMaterials: (
    json: unknown,
    textures: { [key: string]: Texture<unknown> }
) => { [key: string]: Material };

method parseObject

parseObject: (
    data: unknown,
    geometries: {
        [key: string]:
            | BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>
            | InstancedBufferGeometry;
    },
    materials: { [key: string]: Material },
    animations: { [key: string]: AnimationClip }
) => Object3D;

method parseTextures

parseTextures: (
    json: unknown,
    images: { [key: string]: Source<unknown> }
) => { [key: string]: Texture<unknown> };

class OctahedronGeometry

class OctahedronGeometry extends PolyhedronGeometry {}

A class for generating an octahedron geometry.
See Also
- Official Documentation
- Source

constructor

constructor(radius?: number, detail?: number);

Create a new instance of OctahedronGeometry
Parameter radius
Radius of the octahedron. Expects a Float. Default 1
Parameter detail
Setting this to a value greater than zero add vertices making it no longer an octahedron. Expects a Integer. Default 0

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class OrthographicCamera

class OrthographicCamera extends Camera {}

Camera that uses orthographic projection. In this projection mode, an object's size in the rendered image stays constant regardless of its distance from the camera. This can be useful for rendering 2D scenes and UI elements, amongst other things.
Example 1
const camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000); scene.add(camera);
See Also
- Example: camera
- Example: interactive / cubes / ortho
- Example: materials / cubemap / dynamic
- Example: postprocessing / advanced
- Example: postprocessing / dof2
- Example: postprocessing / godrays
- Example: rtt
- Example: shaders / tonemapping
- Example: shadowmap
- Official Documentation
- Source

constructor

constructor(
    left?: number,
    right?: number,
    top?: number,
    bottom?: number,
    near?: number,
    far?: number
);

Creates a new OrthographicCamera.
Parameter left
Camera frustum left plane. Default -1.
Parameter right
Camera frustum right plane. Default 1.
Parameter top
Camera frustum top plane. Default 1.
Parameter bottom
Camera frustum bottom plane. Default -1.
Parameter near
Camera frustum near plane. Default 0.1.
Parameter far
Camera frustum far plane. Default 2000.
Remarks
Together these define the camera's viewing frustum.

property bottom

bottom: number;

Camera frustum bottom plane.
Remarks
Expects a Float.

property far

far: number;

Camera frustum far plane.
Remarks
Expects a Float

property isOrthographicCamera

readonly isOrthographicCamera: boolean;

Read-only flag to check if a given object is of type OrthographicCamera.
Remarks
This is a _constant_ value

property left

left: number;

Camera frustum left plane.
Remarks
Expects a Float

property near

near: number;

Camera frustum near plane.`.
Remarks
Expects a Float

property right

right: number;

Camera frustum right plane.
Remarks
Expects a Float

property top

top: number;

Camera frustum top plane.
Remarks
Expects a Float

property type

override readonly type: string;

Modifiers
- @override

property view

view: {
    enabled: boolean;
    fullWidth: number;
    fullHeight: number;
    offsetX: number;
    offsetY: number;
    width: number;
    height: number;
};

Set by .setViewOffset().

property zoom

zoom: number;

Gets or sets the zoom factor of the camera.

method clearViewOffset

clearViewOffset: () => void;

Removes any offset set by the .setViewOffset method.

method setViewOffset

setViewOffset: (
    fullWidth: number,
    fullHeight: number,
    offsetX: number,
    offsetY: number,
    width: number,
    height: number
) => void;

Sets an offset in a larger viewing frustum
Parameter fullWidth
Full width of multiview setup Expects a Float.
Parameter fullHeight
Full height of multiview setup Expects a Float.
Parameter x
Horizontal offset of subcamera Expects a Float.
Parameter y
Vertical offset of subcamera Expects a Float.
Parameter width
Width of subcamera Expects a Float.
Parameter height
Height of subcamera Expects a Float.
Remarks
This is useful for multi-window or multi-monitor/multi-machine setups For an example on how to use it see PerspectiveCamera.
See Also
- PerspectiveCamera.

method toJSON

toJSON: (meta?: JSONMeta) => OrthographicCameraJSON;

method updateProjectionMatrix

updateProjectionMatrix: () => void;

Updates the camera projection matrix
Remarks
Must be called after any change of parameters.

class Path

class Path extends CurvePath<Vector2> {}

A 2D Path representation.

Remarks

The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.

Example 1

const {@link Path} = new THREE.Path();
path.lineTo(0, 0.8);
path.quadraticCurveTo(0, 1, 0.2, 1);
path.lineTo(1, 1);
const points = path.getPoints();
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xffffff
});
const line = new THREE.Line(geometry, material);
scene.add(line);

constructor

constructor(points?: Vector2[]);

Creates a Path from the points
Parameter points
Array of Vector2s.
Remarks
The first point defines the offset, then successive points are added to the curves array as LineCurves. If no points are specified, an empty Path is created and the is set to the origin.

property currentPoint

currentPoint: Vector2;

The current offset of the path. Any new Curve added will start here.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method absarc

absarc: (
    aX: number,
    aY: number,
    aRadius: number,
    aStartAngle: number,
    aEndAngle: number,
    aClockwise?: boolean
) => this;

Adds an absolutely positioned EllipseCurve to the path.
Parameter x
Expects a Float
Parameter y
X, The absolute center of the arc. Expects a Float
Parameter radius
The radius of the arc. Expects a Float
Parameter startAngle
The start angle in radians. Expects a Float
Parameter endAngle
The end angle in radians. Expects a Float
Parameter clockwise
Sweep the arc clockwise. Default false

method absellipse

absellipse: (
    aX: number,
    aY: number,
    xRadius: number,
    yRadius: number,
    aStartAngle: number,
    aEndAngle: number,
    aClockwise?: boolean,
    aRotation?: number
) => this;

Adds an absolutely positioned EllipseCurve to the path.
Parameter x
Expects a Float
Parameter y
X, The absolute center of the ellipse. Expects a Float
Parameter xRadius
The radius of the ellipse in the x axis. Expects a Float
Parameter yRadius
The radius of the ellipse in the y axis. Expects a Float
Parameter startAngle
The start angle in radians. Expects a Float
Parameter endAngle
The end angle in radians. Expects a Float
Parameter clockwise
Sweep the ellipse clockwise. Default false
Parameter rotation
The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, Expects a Float. Default 0

method arc

arc: (
    aX: number,
    aY: number,
    aRadius: number,
    aStartAngle: number,
    aEndAngle: number,
    aClockwise?: boolean
) => this;

Adds an EllipseCurve to the path, positioned relative to .
Parameter x
Expects a Float
Parameter y
X, The center of the arc offset from the last call. Expects a Float
Parameter radius
The radius of the arc. Expects a Float
Parameter startAngle
The start angle in radians. Expects a Float
Parameter endAngle
The end angle in radians. Expects a Float
Parameter clockwise
Sweep the arc clockwise. Default false

method bezierCurveTo

bezierCurveTo: (
    aCP1x: number,
    aCP1y: number,
    aCP2x: number,
    aCP2y: number,
    aX: number,
    aY: number
) => this;

This creates a bezier curve from with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates to x and y.
Parameter cp1X
Expects a Float
Parameter cp1Y
Expects a Float
Parameter cp2X
Expects a Float
Parameter cp2Y
Expects a Float
Parameter x
Expects a Float
Parameter y
Expects a Float

method ellipse

ellipse: (
    aX: number,
    aY: number,
    xRadius: number,
    yRadius: number,
    aStartAngle: number,
    aEndAngle: number,
    aClockwise?: boolean,
    aRotation?: number
) => this;

Adds an EllipseCurve to the path, positioned relative to .
Parameter x
Expects a Float
Parameter y
X, The center of the ellipse offset from the last call. Expects a Float
Parameter xRadius
The radius of the ellipse in the x axis. Expects a Float
Parameter yRadius
The radius of the ellipse in the y axis. Expects a Float
Parameter startAngle
The start angle in radians. Expects a Float
Parameter endAngle
The end angle in radians. Expects a Float
Parameter clockwise
Sweep the ellipse clockwise. Default false
Parameter rotation
The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, Expects a Float. Default 0

method fromJSON

fromJSON: (json: PathJSON) => this;

method lineTo

lineTo: (x: number, y: number) => this;

Connects a LineCurve from to x, y onto the path.
Parameter x
Expects a Float
Parameter y
Expects a Float

method moveTo

moveTo: (x: number, y: number) => this;

Move the to x, y.
Parameter x
Expects a Float
Parameter y
Expects a Float

method quadraticCurveTo

quadraticCurveTo: (aCPx: number, aCPy: number, aX: number, aY: number) => this;

Creates a quadratic curve from with cpX and cpY as control point and updates to x and y.
Parameter cpX
Expects a Float
Parameter cpY
Expects a Float
Parameter x
Expects a Float
Parameter y
Expects a Float

method setFromPoints

setFromPoints: (vectors: Vector2[]) => this;

Points are added to the curves array as LineCurves.
Parameter vector2s

method splineThru

splineThru: (pts: Vector2[]) => this;

Connects a new SplineCurve onto the path.
Parameter points
An array of Vector2's

method toJSON

toJSON: () => PathJSON;

class PerspectiveCamera

class PerspectiveCamera extends Camera {}

Camera that uses perspective projection. This projection mode is designed to mimic the way the human eye sees
Remarks
It is the most common projection mode used for rendering a 3D scene.
Example 1
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); scene.add(camera);
See Also
- Example: animation / skinning / blending
- Example: animation / skinning / morph
- Example: effects / stereo
- Example: interactive / cubes
- Example: loader / collada / skinning
- Official Documentation
- Source

constructor

constructor(fov?: number, aspect?: number, near?: number, far?: number);

Creates a new PerspectiveCamera.
Parameter fov
Camera frustum vertical field of view. Default 50.
Parameter aspect
Camera frustum aspect ratio. Default 1.
Parameter near
Camera frustum near plane. Default 0.1.
Parameter far
Camera frustum far plane. Default 2000.
Remarks
Together these define the camera's viewing frustum.

property aspect

aspect: number;

Camera frustum aspect ratio, usually the canvas width / canvas height.
Remarks
Expects a Float

property far

far: number;

Camera frustum far plane.
Remarks
Expects a Float

property filmGauge

filmGauge: number;

Film size used for the larger axis. This parameter does not influence the projection matrix unless .filmOffset is set to a nonzero value.
Remarks
Expects a Float

property filmOffset

filmOffset: number;

Horizontal off-center offset in the same unit as .filmGauge.
Remarks
Expects a Float

property focus

focus: number;

Object distance used for stereoscopy and depth-of-field effects.
Remarks
Expects a Float

property fov

fov: number;

Camera frustum vertical field of view, from bottom to top of view, in degrees.
Remarks
Expects a Float

property isPerspectiveCamera

readonly isPerspectiveCamera: boolean;

Read-only flag to check if a given object is of type Camera.
Remarks
This is a _constant_ value

property near

near: number;

Camera frustum near plane.
Remarks
Expects a Float

property type

override readonly type: string;

Modifiers
- @override

property view

view: {
    enabled: boolean;
    fullWidth: number;
    fullHeight: number;
    offsetX: number;
    offsetY: number;
    width: number;
    height: number;
};

Frustum window specification or null. This is set using the .setViewOffset method and cleared using .clearViewOffset.

property zoom

zoom: number;

Gets or sets the zoom factor of the camera.

method clearViewOffset

clearViewOffset: () => void;

Removes any offset set by the .setViewOffset method.

method getEffectiveFOV

getEffectiveFOV: () => number;

Returns the current vertical field of view angle in degrees considering .zoom.

method getFilmHeight

getFilmHeight: () => number;

Returns the height of the image on the film
Remarks
If .aspect. is less than or equal to one (portrait format), the result equals .filmGauge.

method getFilmWidth

getFilmWidth: () => number;

Returns the width of the image on the film
Remarks
If .aspect. is greater than or equal to one (landscape format), the result equals .filmGauge.

method getFocalLength

getFocalLength: () => number;

Returns the focal length of the current in respect to .filmGauge.

method getViewBounds

getViewBounds: (
    distance: number,
    minTarget: Vector2,
    maxTarget: Vector2
) => void;

Computes the 2D bounds of the camera's viewable rectangle at a given distance along the viewing direction. Sets minTarget and maxTarget to the coordinates of the lower-left and upper-right corners of the view rectangle.

method getViewSize

getViewSize: (distance: number, target: Vector2) => Vector2;

Computes the width and height of the camera's viewable rectangle at a given distance along the viewing direction. Copies the result into the target Vector2, where x is width and y is height.

method setFocalLength

setFocalLength: (focalLength: number) => void;

Sets the FOV by focal length in respect to the current .filmGauge.
Parameter focalLength
Expects a Float
Remarks
By default, the focal length is specified for a 35mm (full frame) camera.

method setLens

setLens: (focalLength: number, frameHeight?: number) => void;

Deprecated
Use .setFocalLength() and .filmGauge instead.

method setViewOffset

setViewOffset: (
    fullWidth: number,
    fullHeight: number,
    x: number,
    y: number,
    width: number,
    height: number
) => void;

Sets an offset in a larger frustum.

Parameter fullWidth

Full width of multiview setup Expects a Float.

Parameter fullHeight

Full height of multiview setup Expects a Float.

Parameter x

Horizontal offset of subcamera Expects a Float.

Parameter y

Vertical offset of subcamera Expects a Float.

Parameter width

Width of subcamera Expects a Float.

Parameter height

Height of subcamera Expects a Float.

Remarks

This is useful for multi-window or multi-monitor/multi-machine setups.

For example, if you have 3x2 monitors and each monitor is _1920x1080_ and the monitors are in grid like this

┌───┬───┬───┐
│ A │ B │ C │
├───┼───┼───┤
│ D │ E │ F │
└───┴───┴───┘

then for each monitor you would call it like this

  const w = 1920;
  const h = 1080;
  const fullWidth = w * 3;
  const fullHeight = h * 2;

  // Monitor - A
  camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
  // Monitor - B
  camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
  // Monitor - C
  camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
  // Monitor - D
  camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
  // Monitor - E
  camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
  // Monitor - F
  camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );

Note there is no reason monitors have to be the same size or in a grid.

method toJSON

toJSON: (meta?: JSONMeta) => PerspectiveCameraJSON;

method updateProjectionMatrix

updateProjectionMatrix: () => void;

Updates the camera projection matrix
Remarks
Must be called after any change of parameters.

class Plane

class Plane {}

constructor

constructor(normal?: Vector3, constant?: number);

property constant

constant: number;

property isPlane

readonly isPlane: boolean;

property normal

normal: Vector3;

new THREE.Vector3( 1, 0, 0 )

method applyMatrix4

applyMatrix4: (matrix: Matrix4, optionalNormalMatrix?: Matrix3) => Plane;

method clone

clone: () => this;

method coplanarPoint

coplanarPoint: (target: Vector3) => Vector3;

method copy

copy: (plane: Plane) => this;

method distanceToPoint

distanceToPoint: (point: Vector3) => number;

method distanceToSphere

distanceToSphere: (sphere: Sphere) => number;

method equals

equals: (plane: Plane) => boolean;

method intersectLine

intersectLine: (line: Line3, target: Vector3) => Vector3 | null;

method intersectsBox

intersectsBox: (box: Box3) => boolean;

method intersectsLine

intersectsLine: (line: Line3) => boolean;

method intersectsSphere

intersectsSphere: (sphere: Sphere) => boolean;

method isIntersectionLine

isIntersectionLine: (l: any) => any;

Deprecated
Use instead.

method negate

negate: () => Plane;

method normalize

normalize: () => Plane;

method projectPoint

projectPoint: (point: Vector3, target: Vector3) => Vector3;

method set

set: (normal: Vector3, constant: number) => Plane;

method setComponents

setComponents: (x: number, y: number, z: number, w: number) => Plane;

method setFromCoplanarPoints

setFromCoplanarPoints: (a: Vector3, b: Vector3, c: Vector3) => Plane;

method setFromNormalAndCoplanarPoint

setFromNormalAndCoplanarPoint: (normal: Vector3, point: Vector3) => Plane;

method translate

translate: (offset: Vector3) => Plane;

class PlaneGeometry

class PlaneGeometry extends BufferGeometry {}

A class for generating plane geometries.

Example 1

const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    side: THREE.DoubleSide
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

constructor

constructor(
    width?: number,
    height?: number,
    widthSegments?: number,
    heightSegments?: number
);

Create a new instance of PlaneGeometry
Parameter width
Width along the X axis. Expects a Float. Default 1
Parameter height
Height along the Y axis. Expects a Float. Default 1
Parameter widthSegments
Number of segmented faces along the width of the sides. Expects a Integer. Default 1
Parameter heightSegments
Number of segmented faces along the height of the sides. Expects a Integer. Default 1

property parameters

readonly parameters: {
    readonly width: number;
    readonly height: number;
    readonly widthSegments: number;
    readonly heightSegments: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class PlaneHelper

class PlaneHelper extends LineSegments {}

Helper object to visualize a Plane.

Example 1

const plane = new THREE.Plane(new THREE.Vector3(1, 1, 0.2), 3);
const helper = new THREE.PlaneHelper(plane, 1, 0xffff00);
scene.add(helper);

constructor

constructor(plane: Plane, size?: number, hex?: number);

Creates a new wireframe representation of the passed plane.
Parameter plane
The plane to visualize.
Parameter size
Side length of plane helper. Expects a Float. Default 1
Parameter hex
Color. Default 0xffff00

property plane

plane: Plane;

The plane being visualized.

property size

size: number;

The side lengths of plane helper.
Remarks
Expects a Float

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

class PMREMGenerator

class PMREMGenerator {}

This class generates a Prefiltered, Mipmapped Radiance Environment Map (PMREM) from a cubeMap environment texture.
Remarks
Note: The minimum MeshStandardMaterial's roughness depends on the size of the provided texture If your render has small dimensions or the shiny parts have a lot of curvature, you may still be able to get away with a smaller texture size.
| texture size | minimum roughness | |--------------|--------------------| | 16 | 0.21 | | 32 | 0.15 | | 64 | 0.11 | | 128 | 0.076 | | 256 | 0.054 | | 512 | 0.038 | | 1024 | 0.027 |
See Also
- Official Documentation
- Source

constructor

constructor(renderer: WebGLRenderer);

This constructor creates a new PMREMGenerator.
Parameter renderer

method compileCubemapShader

compileCubemapShader: () => void;

Pre-compiles the cubemap shader
Remarks
You can get faster start-up by invoking this method during your texture's network fetch for increased concurrency.

method compileEquirectangularShader

compileEquirectangularShader: () => void;

Pre-compiles the equirectangular shader
Remarks
You can get faster start-up by invoking this method during your texture's network fetch for increased concurrency.

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method fromCubemap

fromCubemap: (
    cubemap: CubeTexture,
    renderTarget?: WebGLRenderTarget | null
) => WebGLRenderTarget;

Generates a PMREM from an cubemap texture, which can be either LDR or HDR. The ideal input cube size is 256 x 256, as this matches best with the 256 x 256 cubemap output. The smallest supported cube size is 16 x 16.

method fromEquirectangular

fromEquirectangular: (
    equirectangular: Texture,
    renderTarget?: WebGLRenderTarget | null
) => WebGLRenderTarget;

Generates a PMREM from an equirectangular texture, which can be either LDR or HDR. The ideal input image size is 1k (1024 x 512), as this matches best with the 256 x 256 cubemap output. The smallest supported equirectangular image size is 64 x 32.

method fromScene

fromScene: (
    scene: Scene,
    sigma?: number,
    near?: number,
    far?: number,
    options?: PMREMGeneratorOptions
) => WebGLRenderTarget;

Generates a PMREM from a supplied Scene, which can be faster than using an image if networking bandwidth is low
Parameter scene
The given scene.
Parameter sigma
Specifies a blur radius in radians to be applied to the scene before PMREM generation. Default 0.
Parameter near
The near plane value. Default 0.1.
Parameter far
The far plane value. Default 100.
Parameter options
Remarks
Optional near and far planes ensure the scene is rendered in its entirety.

class PointLight

class PointLight extends Light<PointLightShadow> {}

A light that gets emitted from a single point in all directions
Remarks
A common use case for this is to replicate the light emitted from a bare lightbulb.
Example 1
const light = new THREE.PointLight(0xff0000, 1, 100); light.position.set(50, 50, 50); scene.add(light);
See Also
- Example: lights / pointlights
- Example: effects / anaglyph
- Example: geometry / text
- Example: lensflares
- Official Documentation
- Source

constructor

constructor(
    color?: ColorRepresentation,
    intensity?: number,
    distance?: number,
    decay?: number
);

Creates a new PointLight.
Parameter color
Hexadecimal color of the light. Default is 0xffffff (white). Expects an Integer
Parameter intensity
Numeric value of the light's strength/intensity. Expects a Float. Default 1
Parameter distance
Maximum range of the light. Default is 0 (no limit).
Parameter decay
The amount the light dims along the distance of the light. Expects a Float. Default 2

property castShadow

castShadow: boolean;

If set to true light will cast dynamic shadows. **Warning**: This is expensive and requires tweaking to get shadows looking right.
See Also
- PointLightShadow for details.

property decay

decay: number;

The amount the light dims along the distance of the light. In context of physically-correct rendering the default value should not be changed.
Remarks
Expects a Float

property distance

distance: number;

When **Default mode** — When distance is zero, light does not attenuate. When distance is non-zero, light will attenuate linearly from maximum intensity at the light's position down to zero at this distance from the light.
When **legacy lighting mode is disabled** — When distance is zero, light will attenuate according to inverse-square law to infinite distance. When distance is non-zero, light will attenuate according to inverse-square law until near the distance cutoff, where it will then attenuate quickly and smoothly to 0. Inherently, cutoffs are not physically correct.
Remarks
Expects a Float

property intensity

intensity: number;

The light's intensity.
When **legacy lighting mode is disabled** — intensity is the luminous intensity of the light measured in candela (cd).
Remarks
Expects a Float

property isPointLight

readonly isPointLight: boolean;

Read-only flag to check if a given object is of type PointLight.
Remarks
This is a _constant_ value

property power

power: number;

The light's power. When **legacy lighting mode is disabled** — power is the luminous power of the light measured in lumens (lm).
Remarks
Expects a Float

property shadow

shadow: PointLightShadow;

A PointLightShadow used to calculate shadows for this light. The lightShadow's camera is set to a PerspectiveCamera with fov of 90, aspect of 1, near clipping plane at 0.5 and far clipping plane at 500.

property type

type: string;

'PointLight'

method toJSON

toJSON: (meta?: JSONMeta) => PointLightJSON;

class PointLightHelper

class PointLightHelper extends Object3D {}

This displays a helper object consisting of a spherical Mesh for visualizing a PointLight.

Example 1

const pointLight = new THREE.PointLight(0xff0000, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);
const sphereSize = 1;
const {@link PointLightHelper} = new THREE.PointLightHelper(pointLight, sphereSize);
scene.add(pointLightHelper);

constructor

constructor(light: PointLight, sphereSize?: number, color?: ColorRepresentation);

Create a new instance of PointLightHelper
Parameter light
The light to be visualized.
Parameter sphereSize
The size of the sphere helper. Expects a Float. Default 1
Parameter color
If this is not the set the helper will take the color of the light.

property color

color: ColorRepresentation;

The color parameter passed in the constructor.
Remarks
If this is changed, the helper's color will update the next time update is called.

property light

light: PointLight;

The PointLight that is being visualized.

property matrix

matrix: Matrix4;

Reference to the light.matrixWorld.

property matrixAutoUpdate

override matrixAutoUpdate: boolean;

Is set to false, as the helper is using the light.matrixWorld.
See Also
- Object3D.matrixAutoUpdate.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method update

update: () => void;

Updates the helper to match the position of the .

class PointLightShadow

class PointLightShadow extends LightShadow<PerspectiveCamera> {}

Shadow for PointLight
See Also
- Source

property isPointLightShadow

readonly isPointLightShadow: boolean;

Read-only flag to check if a given object is of type PointLightShadow.
Remarks
This is a _constant_ value

class Points

class Points<
    TGeometry extends BufferGeometry<NormalOrGLBufferAttributes> = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

A class for displaying Points
Remarks
The Points are rendered by the WebGLRenderer using gl.POINTS.
See Also
- Official Documentation
- Source

constructor

constructor(
    geometry?: BufferGeometry<
        NormalOrGLBufferAttributes,
        BufferGeometryEventMap
    >,
    material?: Material | Material[]
);

Create a new instance of Points
Parameter geometry
An instance of BufferGeometry. Default `new THREE.BufferGeometry()`.
Parameter material
A single or an array of Material. Default `new THREE.PointsMaterial()`.

property geometry

geometry: BufferGeometry<NormalOrGLBufferAttributes, BufferGeometryEventMap>;

An instance of BufferGeometry (or derived classes), defining the object's structure.
Remarks
each vertex designates the position of a particle in the system.

property isPoints

readonly isPoints: boolean;

Read-only flag to check if a given object is of type Points.
Remarks
This is a _constant_ value

property material

material: Material | Material[];

An instance of Material, defining the object's appearance.

property morphTargetDictionary

morphTargetDictionary?: { [key: string]: number };

A dictionary of morphTargets based on the morphTarget.name property.

property morphTargetInfluences

morphTargetInfluences?: number[];

An array of weights typically from 0-1 that specify how much of the morph is applied.

property type

override readonly type: string;

Modifiers
- @override

method updateMorphTargets

updateMorphTargets: () => void;

Updates the morphTargets to have no influence on the object
Remarks
Resets the morphTargetInfluences and morphTargetDictionary properties.

class PointsMaterial

class PointsMaterial extends Material {}

A material for rendering point primitives.

Materials define the appearance of renderable 3D objects.

const vertices = [];

for ( let i = 0; i < 10000; i ++ ) {
	const x = THREE.MathUtils.randFloatSpread( 2000 );
	const y = THREE.MathUtils.randFloatSpread( 2000 );
	const z = THREE.MathUtils.randFloatSpread( 2000 );

	vertices.push( x, y, z );
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
const material = new THREE.PointsMaterial( { color: 0x888888 } );
const points = new THREE.Points( geometry, material );
scene.add( points );

constructor

constructor(parameters?: PointsMaterialParameters);

Constructs a new points material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isPointsMaterial

readonly isPointsMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: PointsMaterialParameters) => void;

class PolarGridHelper

class PolarGridHelper extends LineSegments {}

The PolarGridHelper is an object to define polar grids

Remarks

Grids are two-dimensional arrays of lines.

Example 1

const radius = 10;
const sectors = 16;
const rings = 8;
const divisions = 64;
const helper = new THREE.PolarGridHelper(radius, sectors, rings, divisions);
scene.add(helper);

constructor

constructor(
    radius?: number,
    radials?: number,
    circles?: number,
    divisions?: number,
    color1?: ColorRepresentation,
    color2?: ColorRepresentation
);

Creates a new PolarGridHelper of radius 'radius' with 'sectors' number of sectors and 'rings' number of rings, where each circle is smoothed into 'divisions' number of line segments.
Parameter radius
The radius of the polar grid. This can be any positive number. Default 10.
Parameter sectors
The number of sectors the grid will be divided into. This can be any positive integer. Default 16.
Parameter rings
The number of rings. This can be any positive integer. Default 8.
Parameter divisions
The number of line segments used for each circle. This can be any positive integer that is 3 or greater. Default 64.
Parameter color1
The first color used for grid elements. This can be a Color, a hexadecimal value and an CSS-Color name. Default 0x444444.
Parameter color2
The second color used for grid elements. This can be a Color, a hexadecimal value and an CSS-Color name. Default 0x888888.
Remarks
Colors are optional.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

class PolyhedronGeometry

class PolyhedronGeometry extends BufferGeometry {}

A polyhedron is a solid in three dimensions with flat faces

Remarks

This class will take an array of vertices, project them onto a sphere, and then divide them up to the desired level of detail This class is used by DodecahedronGeometry, IcosahedronGeometry, OctahedronGeometry, and TetrahedronGeometry to generate their respective geometries.

Example 1

const verticesOfCube = [-1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, ];
const indicesOfFaces = [
2, 1, 0, 0, 3, 2,
0, 4, 7, 7, 3, 0,
0, 1, 5, 5, 4, 0,
1, 2, 6, 6, 5, 1,
2, 3, 7, 7, 6, 2,
4, 5, 6, 6, 7, 4];
const geometry = new THREE.PolyhedronGeometry(verticesOfCube, indicesOfFaces, 6, 2);

constructor

constructor(
    vertices?: number[],
    indices?: number[],
    radius?: number,
    detail?: number
);

Create a new instance of PolyhedronGeometry
Parameter vertices
Array of points of the form [1,1,1, -1,-1,-1, ... ]. Default [].
Parameter indices
Array of indices that make up the faces of the form [0,1,2, 2,3,0, ... ]. Default [].
Parameter radius
[page:The radius of the final shape Expects a Float. Default 1
Parameter detail
[page:How many levels to subdivide the geometry. The more detail, the smoother the shape. Expects a Integer. Default 0

property parameters

readonly parameters: {
    readonly vertices: number[];
    readonly indices: number[];
    readonly radius: number;
    readonly detail: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class PositionalAudio

class PositionalAudio extends Audio<PannerNode> {}

Create a positional audio object. This uses the Web Audio API.

Example 1

// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add(listener);
// create the {@link PositionalAudio} object (passing in the listener)
const sound = new THREE.PositionalAudio(listener);
// load a sound and set it as the {@link PositionalAudio} object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load('sounds/song.ogg', function (buffer) {
    sound.setBuffer(buffer);
    sound.setRefDistance(20);
    sound.play();
});
// create an object for the sound to play from
const sphere = new THREE.SphereGeometry(20, 32, 16);
const material = new THREE.MeshPhongMaterial({
    color: 0xff2200
});
const mesh = new THREE.Mesh(sphere, material);
scene.add(mesh);
// finally add the sound to the mesh
mesh.add(sound);

constructor

constructor(listener: AudioListener);

Create a new instance of PositionalAudio
Parameter listener
(required) AudioListener instance.

property panner

panner: PannerNode;

The PositionalAudio's PannerNode.

method getDistanceModel

getDistanceModel: () => string;

Returns the value of panner.distanceModel.

method getMaxDistance

getMaxDistance: () => number;

Returns the value of panner.maxDistance.

method getOutput

getOutput: () => PannerNode;

Returns the panner.

method getRefDistance

getRefDistance: () => number;

Returns the value of panner.refDistance.

method getRolloffFactor

getRolloffFactor: () => number;

Returns the value of panner.rolloffFactor.

method setDirectionalCone

setDirectionalCone: (
    coneInnerAngle: number,
    coneOuterAngle: number,
    coneOuterGain: number
) => this;

This method can be used in order to transform an omnidirectional sound into a directional sound.
Parameter coneInnerAngle
Expects a Float
Parameter coneOuterAngle
Expects a Float
Parameter coneOuterGain
Expects a Float

method setDistanceModel

setDistanceModel: (value: string) => this;

Sets the value of panner.distanceModel.
Parameter value

method setMaxDistance

setMaxDistance: (value: number) => this;

Sets the value of panner.maxDistance.
Parameter value
Expects a Float

method setRefDistance

setRefDistance: (value: number) => this;

Sets the value of panner.refDistance.
Parameter value
Expects a Float

method setRolloffFactor

setRolloffFactor: (value: number) => this;

Sets the value of panner.rolloffFactor.
Parameter value
Expects a Float

class PropertyBinding

class PropertyBinding {}

This holds a reference to a real property in the scene graph; used internally.

constructor

constructor(
    rootNode: Object3D<Object3DEventMap> | Skeleton,
    path: string,
    parsedPath?: {}
);

Constructs a new property binding.
Parameter rootNode
The root node.
Parameter path
The path.
Parameter parsedPath
The parsed path.

property node

node: {};

The object owns the animated property.

property parsedPath

parsedPath: {};

An object holding information about the path.

property path

path: string;

The object path to the animated property.

property rootNode

rootNode: Object3D<Object3DEventMap> | Skeleton;

The root node.

method bind

bind: () => void;

Creates a getter / setter pair for the property tracked by this binding.

method create

static create: (
    root: object,
    path: string,
    parsedPath?: object | null
) => PropertyBinding | Composite;

Factory method for creating a property binding from the given parameters.
Parameter root
The root node.
Parameter path
The path.
Parameter parsedPath
The parsed path. {PropertyBinding|Composite} The created property binding or composite.

method findNode

static findNode: (root: object, nodeName: string | number) => object | null;

Searches for a node in the hierarchy of the given root object by the given node name.
Parameter root
The root object.
Parameter nodeName
The name of the node. {?Object} The found node. Returns null if no object was found.

method parseTrackName

static parseTrackName: (trackName: string) => ParseTrackNameResults;

Parses the given track name (an object path to an animated property) and returns an object with information about the path. Matches strings in the following forms:
- nodeName.property - nodeName.property[accessor] - nodeName.material.property[accessor] - uuid.property[accessor] - uuid.objectName[objectIndex].propertyName[propertyIndex] - parentName/nodeName.property - parentName/parentName/nodeName.property[index] - .bone[Armature.DEF_cog].position - scene:helium_balloon_model:helium_balloon_model.position
Parameter trackName
The track name to parse. {Object} The parsed track name as an object.

method sanitizeNodeName

static sanitizeNodeName: (name: string) => string;

Replaces spaces with underscores and removes unsupported characters from node names, to ensure compatibility with parseTrackName().
Parameter name
Node name to be sanitized. {string} The sanitized node name.

method unbind

unbind: () => void;

Unbinds the property.

class PropertyMixer

class PropertyMixer {}

Buffered scene graph property that allows weighted accumulation; used internally.

constructor

constructor(binding: PropertyBinding, typeName: string, valueSize: number);

Constructs a new property mixer.
Parameter binding
The property binding.
Parameter typeName
The keyframe track type name.
Parameter valueSize
The keyframe track value size.

property binding

binding: PropertyBinding;

The property binding.

property cumulativeWeight

cumulativeWeight: number;

TODO
0

property cumulativeWeightAdditive

cumulativeWeightAdditive: number;

TODO
0

property referenceCount

referenceCount: number;

TODO
0

property useCount

useCount: number;

TODO
0

property valueSize

valueSize: number;

The keyframe track value size.

method accumulate

accumulate: (accuIndex: number, weight: number) => void;

Accumulates data in the incoming region into accu<i>.
Parameter accuIndex
The accumulation index.
Parameter weight
The weight.

method accumulateAdditive

accumulateAdditive: (weight: number) => void;

Accumulates data in the incoming region into add.
Parameter weight
The weight.

method apply

apply: (accuIndex: number) => void;

Applies the state of accu<i> to the binding when accus differ.
Parameter accuIndex
The accumulation index.

method restoreOriginalState

restoreOriginalState: () => void;

Applies the state previously taken via PropertyMixer#saveOriginalState to the binding.

method saveOriginalState

saveOriginalState: () => void;

Remembers the state of the bound property and copy it to both accus.

class QuadraticBezierCurve

class QuadraticBezierCurve extends Curve<Vector2> {}

Create a smooth **2D** quadratic bezier curve, defined by a start point, end point and a single control point.

Example 1

const curve = new THREE.QuadraticBezierCurve(
new THREE.Vector2(-10, 0),
new THREE.Vector2(20, 15),
new THREE.Vector2(10, 0));
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometry, material);

constructor

constructor(v0?: Vector2, v1?: Vector2, v2?: Vector2);

This constructor creates a new QuadraticBezierCurve.
Parameter v0
The start point. Default is new THREE.Vector2().
Parameter v1
The control point. Default is new THREE.Vector2().
Parameter v2
The end point. Default is new THREE.Vector2().

property isQuadraticBezierCurve

readonly isQuadraticBezierCurve: boolean;

Read-only flag to check if a given object is of type LineCurve3.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property v0

v0: Vector2;

The start point.

property v1

v1: Vector2;

The control point.

property v2

v2: Vector2;

The end point.

class QuadraticBezierCurve3

class QuadraticBezierCurve3 extends Curve<Vector3> {}

Create a smooth **3D** quadratic bezier curve, defined by a start point, end point and a single control point.

Example 1

const curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3(-10, 0, 0),
new THREE.Vector3(20, 15, 0),
new THREE.Vector3(10, 0, 0));
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
// Create the final object to add to the scene
const curveObject = new THREE.Line(geometry, material);

constructor

constructor(v0?: Vector3, v1?: Vector3, v2?: Vector3);

This constructor creates a new QuadraticBezierCurve.
Parameter v0
The start point. Default is new THREE.Vector3().
Parameter v1
The control point. Default is new THREE.Vector3().
Parameter v2
The end point. Default is new THREE.Vector3().

property isQuadraticBezierCurve3

readonly isQuadraticBezierCurve3: boolean;

Read-only flag to check if a given object is of type QuadraticBezierCurve3.
Remarks
This is a _constant_ value

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property v0

v0: Vector3;

The start point.

property v1

v1: Vector3;

The control point.

property v2

v2: Vector3;

The end point.

class Quaternion

class Quaternion {}

Implementation of a quaternion. This is used for rotating things without incurring in the dreaded gimbal lock issue, amongst other advantages.
Example 1
const quaternion = new THREE.Quaternion(); quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.PI / 2 ); const vector = new THREE.Vector3( 1, 0, 0 ); vector.applyQuaternion( quaternion );

constructor

constructor(x?: number, y?: number, z?: number, w?: number);

Parameter x
x coordinate
Parameter y
y coordinate
Parameter z
z coordinate
Parameter w
w coordinate

property isQuaternion

readonly isQuaternion: boolean;

property w

w: number;

property x

x: number;

property y

y: number;

property z

z: number;

method [Symbol.iterator]

[Symbol.iterator]: () => Generator<number, void>;

method angleTo

angleTo: (q: Quaternion) => number;

method clone

clone: () => this;

Clones this quaternion.

method conjugate

conjugate: () => this;

method copy

copy: (q: QuaternionLike) => this;

Copies values of q to this quaternion.

method dot

dot: (v: Quaternion) => number;

method equals

equals: (v: Quaternion) => boolean;

method fromArray

fromArray: (array: number[] | ArrayLike<number>, offset?: number) => this;

Sets this quaternion's x, y, z and w value from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array. Default is 0.

method fromBufferAttribute

fromBufferAttribute: (
    attribute: BufferAttribute | InterleavedBufferAttribute,
    index: number
) => this;

Sets x, y, z, w properties of this quaternion from the attribute.
Parameter attribute
the source attribute.
Parameter index
index in the attribute.

method identity

identity: () => this;

method invert

invert: () => this;

Inverts this quaternion.

method length

length: () => number;

Computes length of this quaternion.

method lengthSq

lengthSq: () => number;

method multiply

multiply: (q: Quaternion) => this;

Multiplies this quaternion by b.

method multiplyQuaternions

multiplyQuaternions: (a: Quaternion, b: Quaternion) => this;

Sets this quaternion to a x b Adapted from http://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/code/index.htm.

method multiplyQuaternionsFlat

static multiplyQuaternionsFlat: (
    dst: number[],
    dstOffset: number,
    src0: number[],
    srcOffset: number,
    src1: number[],
    stcOffset1: number
) => number[];

method normalize

normalize: () => this;

Normalizes this quaternion.

method premultiply

premultiply: (q: Quaternion) => this;

method random

random: () => this;

method rotateTowards

rotateTowards: (q: Quaternion, step: number) => this;

method set

set: (x: number, y: number, z: number, w: number) => this;

Sets values of this quaternion.

method setFromAxisAngle

setFromAxisAngle: (axis: Vector3Like, angle: number) => this;

Sets this quaternion from rotation specified by axis and angle. Adapted from http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm. Axis have to be normalized, angle is in radians.

method setFromEuler

setFromEuler: (euler: Euler, update?: boolean) => this;

Sets this quaternion from rotation specified by Euler angles.

method setFromRotationMatrix

setFromRotationMatrix: (m: Matrix4) => this;

Sets this quaternion from rotation component of m. Adapted from http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToQuaternion/index.htm.

method setFromUnitVectors

setFromUnitVectors: (vFrom: Vector3, vTo: Vector3Like) => this;

method slerp

slerp: (qb: Quaternion, t: number) => this;

method slerpFlat

static slerpFlat: (
    dst: number[],
    dstOffset: number,
    src0: number[],
    srcOffset: number,
    src1: number[],
    stcOffset1: number,
    t: number
) => void;

method slerpQuaternions

slerpQuaternions: (qa: Quaternion, qb: Quaternion, t: number) => this;

method toArray

toArray: {
    (array?: number[], offset?: number): number[];
    (array?: QuaternionTuple, offset?: 0): QuaternionTuple;
    (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
};

Returns an array [x, y, z, w], or copies x, y, z and w into the provided array.
Parameter array
(optional) array to store the quaternion to. If this is not provided, a new array will be created.
Parameter offset
(optional) optional offset into the array. The created or provided array.
Copies x, y, z and w into the provided array-like.
Parameter array
array-like to store the quaternion to.
Parameter offset
(optional) optional offset into the array. The provided array-like.

method toJSON

toJSON: () => [number, number, number, number];

This method defines the serialization result of Quaternion. The numerical elements of this quaternion in an array of format [x, y, z, w].

class QuaternionKeyframeTrack

class QuaternionKeyframeTrack extends KeyframeTrack {}

A track for Quaternion keyframe values.

constructor

constructor(
    name: string,
    times: ArrayLike<number>,
    values: ArrayLike<number>,
    interpolation?: InterpolationModes
);

Constructs a new Quaternion keyframe track.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.
Parameter interpolation
The interpolation type.

class QuaternionLinearInterpolant

class QuaternionLinearInterpolant extends Interpolant {}

constructor

constructor(
    parameterPositions: any,
    samplesValues: any,
    sampleSize: number,
    resultBuffer?: any
);

method interpolate_

interpolate_: (i1: number, t0: number, t: number, t1: number) => any;

class RawShaderMaterial

class RawShaderMaterial extends ShaderMaterial {}

This class works just like ShaderMaterial, except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code.
RawShaderMaterial can only be used with WebGLRenderer.

property isRawShaderMaterial

readonly isRawShaderMaterial: boolean;

This flag can be used for type testing.
true

class Ray

class Ray {}

constructor

constructor(origin?: Vector3, direction?: Vector3);

property direction

direction: Vector3;

new THREE.Vector3( 0, 0, - 1 )

property origin

origin: Vector3;

new THREE.Vector3()

method applyMatrix4

applyMatrix4: (matrix4: Matrix4) => Ray;

method at

at: (t: number, target: Vector3) => Vector3;

method clone

clone: () => this;

method closestPointToPoint

closestPointToPoint: (point: Vector3, target: Vector3) => Vector3;

method copy

copy: (ray: Ray) => this;

method distanceSqToPoint

distanceSqToPoint: (point: Vector3) => number;

method distanceSqToSegment

distanceSqToSegment: (
    v0: Vector3,
    v1: Vector3,
    optionalPointOnRay?: Vector3,
    optionalPointOnSegment?: Vector3
) => number;

method distanceToPlane

distanceToPlane: (plane: Plane) => number;

method distanceToPoint

distanceToPoint: (point: Vector3) => number;

method equals

equals: (ray: Ray) => boolean;

method intersectBox

intersectBox: (box: Box3, target: Vector3) => Vector3 | null;

method intersectPlane

intersectPlane: (plane: Plane, target: Vector3) => Vector3 | null;

method intersectsBox

intersectsBox: (box: Box3) => boolean;

method intersectSphere

intersectSphere: (sphere: Sphere, target: Vector3) => Vector3 | null;

method intersectsPlane

intersectsPlane: (plane: Plane) => boolean;

method intersectsSphere

intersectsSphere: (sphere: Sphere) => boolean;

method intersectTriangle

intersectTriangle: (
    a: Vector3,
    b: Vector3,
    c: Vector3,
    backfaceCulling: boolean,
    target: Vector3
) => Vector3 | null;

method isIntersectionBox

isIntersectionBox: (b: any) => any;

Deprecated
Use instead.

method isIntersectionPlane

isIntersectionPlane: (p: any) => any;

Deprecated
Use instead.

method isIntersectionSphere

isIntersectionSphere: (s: any) => any;

Deprecated
Use instead.

method lookAt

lookAt: (v: Vector3) => Ray;

method recast

recast: (t: number) => Ray;

method set

set: (origin: Vector3, direction: Vector3) => Ray;

class Raycaster

class Raycaster {}

This class is designed to assist with raycasting

Remarks

Raycasting is used for mouse picking (working out what objects in the 3d space the mouse is over) amongst other things.

Example 1

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove(event) {
    // calculate pointer position in normalized device coordinates (-1 to +1) for both components
    pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function render() {
    // update the picking ray with the camera and pointer position
    raycaster.setFromCamera(pointer, camera);
    // calculate objects intersecting the picking ray
    const intersects = raycaster.intersectObjects(scene.children);
    for (let i = 0; i & lt; intersects.length; i++) {
        intersects[i].object.material.color.set(0xff0000);
    }
    renderer.render(scene, camera);
}
window.addEventListener('pointermove', onPointerMove);
window.requestAnimationFrame(render);

constructor

constructor(origin?: Vector3, direction?: Vector3, near?: number, far?: number);

This creates a new Raycaster object.
Parameter origin
The origin vector where the ray casts from. Default new Vector3()
Parameter direction
The direction vector that gives direction to the ray. Should be normalized. Default new Vector3(0, 0, -1)
Parameter near
All results returned are further away than near. Near can't be negative. Expects a Float. Default 0
Parameter far
All results returned are closer than far. Far can't be lower than near. Expects a Float. Default Infinity

property camera

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.

property far

far: number;

The far factor of the raycaster. This value indicates which objects can be discarded based on the distance. This value shouldn't be negative and should be larger than the near property.
Remarks
Expects a Float

property layers

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 );

property near

near: number;

The near factor of the raycaster. This value indicates which objects can be discarded based on the distance. This value shouldn't be negative and should be smaller than the far property.
Remarks
Expects a Float

property params

params: RaycasterParameters;

An data object where threshold is the precision of the Raycaster when intersecting objects, in world units.

property ray

ray: Ray;

The Ray used for the raycasting.

method intersectObject

intersectObject: <TIntersected extends Object3D<Object3DEventMap>>(
    object: Object3D,
    recursive?: boolean,
    optionalTarget?: Array<Intersection<TIntersected>>
) => Array<Intersection<TIntersected>>;

Checks all intersection between the ray and the object with or without the descendants
Parameter object
The object to check for intersection with the ray.
Parameter recursive
If true, it also checks all descendants. Otherwise it only checks intersection with the object. Default true
Parameter optionalTarget
Target to set the result. Otherwise a new Array is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;). Default []
Returns
An array of intersections is returned.
Remarks
Raycaster delegates to the raycast method of the passed object, when evaluating whether the ray intersects the object or not This allows meshes to respond differently to ray casting than lines and pointclouds. **Note** that for meshes, faces must be pointed towards the origin of the ray in order to be detected; intersections of the ray passing through the back of a face will not be detected To raycast against both faces of an object, you'll want to set the material's side property to THREE.DoubleSide.
See Also
- .intersectObjects().

method intersectObjects

intersectObjects: <TIntersected extends Object3D<Object3DEventMap>>(
    objects: Object3D[],
    recursive?: boolean,
    optionalTarget?: Array<Intersection<TIntersected>>
) => Array<Intersection<TIntersected>>;

Checks all intersection between the ray and the objects with or without the descendants
Parameter objects
The objects to check for intersection with the ray.
Parameter recursive
If true, it also checks all descendants of the objects. Otherwise it only checks intersection with the objects. Default true
Parameter optionalTarget
Target to set the result. Otherwise a new Array is instantiated. If set, you must clear this array prior to each call (i.e., array.length = 0;). Default []
Returns
An array of intersections is returned.
Remarks
Raycaster delegates to the raycast method of the passed object, when evaluating whether the ray intersects the object or not This allows meshes to respond differently to ray casting than lines and pointclouds. **Note** that for meshes, faces must be pointed towards the origin of the ray in order to be detected; intersections of the ray passing through the back of a face will not be detected To raycast against both faces of an object, you'll want to set the material's side property to THREE.DoubleSide.
See Also
- .intersectObject().

method set

set: (origin: Vector3, direction: Vector3) => void;

Updates the ray with a new origin and direction
Parameter origin
The origin vector where the ray casts from.
Parameter direction
The normalized direction vector that gives direction to the ray.
Remarks
Please note that this method only copies the values from the arguments.

method setFromCamera

setFromCamera: (coords: Vector2, camera: Camera) => void;

Updates the ray with a new origin and direction.
Parameter coords
2D coordinates of the mouse, in normalized device coordinates (NDC)---X and Y components should be between -1 and 1.
Parameter camera
camera from which the ray should originate

method setFromXRController

setFromXRController: (controller: XRTargetRaySpace) => this;

Updates the ray with a new origin and direction.
Parameter controller
The controller to copy the position and direction from.

class RectAreaLight

class RectAreaLight extends Light<undefined> {}

RectAreaLight emits light uniformly across the face a rectangular plane
Remarks
This light type can be used to simulate light sources such as bright windows or strip lighting. Important Notes: - There is no shadow support. - Only MeshStandardMaterial and MeshPhysicalMaterial are supported. - You have to include RectAreaLightUniformsLib into your scene and call init().
Example 1
const width = 10; const height = 10; const intensity = 1; const rectLight = new THREE.RectAreaLight(0xffffff, intensity, width, height); rectLight.position.set(5, 5, 0); rectLight.lookAt(0, 0, 0); scene.add(rectLight) const rectLightHelper = new RectAreaLightHelper(rectLight); rectLight.add(rectLightHelper);
See Also
- Example: {@link https://threejs.org/examples/#webgl_lights_rectarealight | WebGL / RectAreaLight }
- Official Documentation
- Source

constructor

constructor(
    color?: ColorRepresentation,
    intensity?: number,
    width?: number,
    height?: number
);

Creates a new RectAreaLight.
Parameter color
Hexadecimal color of the light. Default 0xffffff _(white)_.
Parameter intensity
The light's intensity, or brightness. Expects a Float. Default 1
Parameter width
Width of the light. Expects a Float. Default 10
Parameter height
Height of the light. Expects a Float. Default 10

property height

height: number;

The height of the light.
Remarks
Expects a Float

property intensity

intensity: number;

The light's intensity.
Remarks
Expects a Float

property isRectAreaLight

readonly isRectAreaLight: boolean;

Read-only flag to check if a given object is of type RectAreaLight.
Remarks
This is a _constant_ value

property power

power: number;

The light's power.
Remarks
Expects a Float

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property width

width: number;

The width of the light.
Remarks
Expects a Float

class RenderTarget

class RenderTarget<
    TTexture extends Texture | Texture[] = Texture
> extends EventDispatcher<{ dispose: {} }> {}

constructor

constructor(width?: number, height?: number, options?: RenderTargetOptions);

property depth

depth: number;

property depthBuffer

depthBuffer: boolean;

true

property depthTexture

depthTexture: DepthTexture;

property height

height: number;

property isRenderTarget

readonly isRenderTarget: boolean;

property multiview

multiview: boolean;

Whether to this target is used in multiview rendering.
false

property resolveDepthBuffer

resolveDepthBuffer: boolean;

Defines whether the depth buffer should be resolved when rendering into a multisampled render target. true

property resolveStencilBuffer

resolveStencilBuffer: boolean;

Defines whether the stencil buffer should be resolved when rendering into a multisampled render target. This property has no effect when is set to false. true

property samples

samples: number;

Defines the count of MSAA samples. Can only be used with WebGL 2. Default is **0**. 0

property scissor

scissor: Vector4;

property scissorTest

scissorTest: boolean;

false

property stencilBuffer

stencilBuffer: boolean;

false

property texture

texture: Texture<unknown> | Texture<unknown>[];

property textures

textures: TTexture[];

property viewport

viewport: Vector4;

property width

width: number;

method clone

clone: () => this;

method copy

copy: (source: RenderTarget) => this;

method dispose

dispose: () => void;

method setSize

setSize: (width: number, height: number, depth?: number) => void;

class RenderTarget3D

class RenderTarget3D extends RenderTarget {}

constructor

constructor(
    width?: number,
    height?: number,
    depth?: number,
    options?: RenderTargetOptions
);

property isRenderTarget3D

readonly isRenderTarget3D: boolean;

class RingGeometry

class RingGeometry extends BufferGeometry {}

A class for generating a two-dimensional ring geometry.

Example 1

const geometry = new THREE.RingGeometry(1, 5, 32);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

constructor

constructor(
    innerRadius?: number,
    outerRadius?: number,
    thetaSegments?: number,
    phiSegments?: number,
    thetaStart?: number,
    thetaLength?: number
);

Create a new instance of RingGeometry
Parameter innerRadius
Expects a Float. Default 0.5.
Parameter outerRadius
Expects a Float. Default 1.
Parameter thetaSegments
Number of segments. A higher number means the ring will be more round. Minimum is 3. Expects a Integer. Default 32.
Parameter phiSegments
Number of segments per ring segment. Minimum is 1. Expects a Integer. Default 1.
Parameter thetaStart
Starting angle. Expects a Float. Default 0.
Parameter thetaLength
Central angle. Expects a Float. Default Math.PI * 2.

property parameters

readonly parameters: {
    readonly innerRadius: number;
    readonly outerRadius: number;
    readonly thetaSegments: number;
    readonly phiSegments: number;
    readonly thetaStart: number;
    readonly thetaLength: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Scene

class Scene<
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

Scenes allow you to set up what and where is to be rendered by three.js
Remarks
This is where you place objects, lights and cameras.
See Also

constructor

constructor();

Create a new Scene object.

property background

background: Texture<unknown> | Color | CubeTexture<unknown>;

Defines the background of the scene.
Remarks
Valid inputs are: - A Color for defining a uniform colored background. - A Texture for defining a (flat) textured background. - Texture cubes (CubeTexture) or equirectangular textures for defining a skybox.

property backgroundBlurriness

backgroundBlurriness: number;

Sets the blurriness of the background. Only influences environment maps assigned to Scene.background.
Remarks
Expects a Float between 0 and 1.

property backgroundIntensity

backgroundIntensity: number;

Attenuates the color of the background. Only applies to background textures.
Remarks
Expects a Float

property backgroundRotation

backgroundRotation: Euler;

The rotation of the background in radians. Only influences environment maps assigned to . Default is (0,0,0).

property environment

environment: Texture<unknown>;

Sets the environment map for all physical materials in the scene. However, it's not possible to overwrite an existing texture assigned to MeshStandardMaterial.envMap.

property environmentIntensity

environmentIntensity: number;

Attenuates the color of the environment. Only influences environment maps assigned to Scene.environment. 1

property environmentRotation

environmentRotation: Euler;

The rotation of the environment map in radians. Only influences physical materials in the scene when is used. Default is (0,0,0).

property fog

fog: Fog | FogExp2;

A fog instance defining the type of fog that affects everything rendered in the scene.

property isScene

readonly isScene: boolean;

Read-only flag to check if a given object is of type Scene.
Remarks
This is a _constant_ value

property overrideMaterial

overrideMaterial: Material;

Forces everything in the Scene to be rendered with the defined material.

property type

type: string;

method toJSON

toJSON: (meta?: JSONMeta) => SceneJSON;

Convert the Scene to three.js JSON Object/Scene format.
Parameter meta
Object containing metadata such as textures or images for the scene.

class ShaderMaterial

class ShaderMaterial extends Material {}

A material rendered with custom shaders. A shader is a small program written in GLSL. that runs on the GPU. You may want to use a custom shader if you need to implement an effect not included with any of the built-in materials.
There are the following notes to bear in mind when using a ShaderMaterial:
- ShaderMaterial can only be used with WebGLRenderer. - Built in attributes and uniforms are passed to the shaders along with your code. If you don't want that, use RawShaderMaterial instead. - You can use the directive #pragma unroll_loop_start and #pragma unroll_loop_end in order to unroll a for loop in GLSL by the shader preprocessor. The directive has to be placed right above the loop. The loop formatting has to correspond to a defined standard. - The loop has to be [normalized](https://en.wikipedia.org/wiki/Normalized_loop). - The loop variable has to be *i*. - The value UNROLLED_LOOP_INDEX will be replaced with the explicitly value of *i* for the given iteration and can be used in preprocessor statements.
const material = new THREE.ShaderMaterial( { uniforms: { time: { value: 1.0 }, resolution: { value: new THREE.Vector2() } }, vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent } );

constructor

constructor(parameters?: ShaderMaterialParameters);

Constructs a new shader material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isShaderMaterial

readonly isShaderMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: ShaderMaterialParameters) => void;

method toJSON

toJSON: (meta?: JSONMeta) => ShaderMaterialJSON;

class ShadowMaterial

class ShadowMaterial extends Material {}

This material can receive shadows, but otherwise is completely transparent.

const geometry = new THREE.PlaneGeometry( 2000, 2000 );
geometry.rotateX( - Math.PI / 2 );

const material = new THREE.ShadowMaterial();
material.opacity = 0.2;

const plane = new THREE.Mesh( geometry, material );
plane.position.y = -200;
plane.receiveShadow = true;
scene.add( plane );

constructor

constructor(parameters?: ShadowMaterialParameters);

Constructs a new shadow material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isShadowMaterial

readonly isShadowMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: ShadowMaterialParameters) => void;

class Shape

class Shape extends Path {}

Defines an arbitrary 2d Shape plane using paths with optional holes

Remarks

It can be used with ExtrudeGeometry, ShapeGeometry, to get points, or to get triangulated faces.

Example 1

const heartShape = new THREE.Shape();
heartShape.moveTo(25, 25);
heartShape.bezierCurveTo(25, 25, 20, 0, 0, 0);
heartShape.bezierCurveTo(-30, 0, -30, 35, -30, 35);
heartShape.bezierCurveTo(-30, 55, -10, 77, 25, 95);
heartShape.bezierCurveTo(60, 77, 80, 55, 80, 35);
heartShape.bezierCurveTo(80, 35, 80, 0, 50, 0);
heartShape.bezierCurveTo(35, 0, 25, 25, 25, 25);
const extrudeSettings = {
    depth: 8,
    bevelEnabled: true,
    bevelSegments: 2,
    steps: 2,
    bevelSize: 1,
    bevelThickness: 1
};
const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial());

constructor

constructor(points?: Vector2[]);

Creates a Shape from the points
Parameter points
Array of Vector2s.
Remarks
The first point defines the offset, then successive points are added to the curves array as LineCurves. If no points are specified, an empty Shape is created and the is set to the origin.

property holes

holes: Path[];

An array of paths that define the holes in the shape.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

method extractPoints

extractPoints: (divisions: number) => { shape: Vector2[]; holes: Vector2[][] };

Call getPoints on the Shape and the holes array
Parameter divisions
The fineness of the result. Expects a Integer

method fromJSON

fromJSON: (json: ShapeJSON) => this;

method getPointsHoles

getPointsHoles: (divisions: number) => Vector2[][];

Get an array of Vector2's that represent the holes in the shape.
Parameter divisions
The fineness of the result. Expects a Integer

method toJSON

toJSON: () => ShapeJSON;

class ShapeGeometry

class ShapeGeometry extends BufferGeometry {}

Creates an one-sided polygonal geometry from one or more path shapes.

Example 1

const x = 0, y = 0;
const heartShape = new THREE.Shape();
heartShape.moveTo(x + 5, y + 5);
heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);
const geometry = new THREE.ShapeGeometry(heartShape);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

constructor

constructor(shapes?: Shape | Shape[], curveSegments?: number);

Create a new instance of ShapeGeometry
Parameter shapes
Array of shapes or a single Shape. Default new Shape([new Vector2(0, 0.5), new Vector2(-0.5, -0.5), new Vector2(0.5, -0.5)]), _a single triangle shape_.
Parameter curveSegments
Number of segments per shape. Expects a Integer. Default 12

property parameters

readonly parameters: {
    readonly shapes: Shape | Shape[];
    readonly curveSegments: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class ShapePath

class ShapePath {}

This class is used to convert a series of shapes to an array of Path's, for example an SVG shape to a path.
See Also
- Official Documentation
- Source

constructor

constructor();

Creates a new ShapePath
Remarks
Unlike a Path, no points are passed in as the ShapePath is designed to be generated after creation.

property color

color: Color;

Color of the shape, by default set to white _(0xffffff)_.

property currentPath

readonly currentPath: Path;

The current Path that is being generated.

property subPaths

subPaths: Path[];

Array of Path'ss.

property type

readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method bezierCurveTo

bezierCurveTo: (
    aCP1x: number,
    aCP1y: number,
    aCP2x: number,
    aCP2y: number,
    aX: number,
    aY: number
) => this;

This creates a bezier curve from the currentPath's offset to _x_ and _y_ with _cp1X_, _cp1Y_ and _cp2X_, _cp2Y_ as control points and updates the currentPath's offset to _x_ and _y_.
Parameter cp1X
Expects a Float
Parameter cp1Y
Expects a Float
Parameter cp2X
Expects a Float
Parameter cp2Y
Expects a Float
Parameter x
Expects a Float
Parameter y
Expects a Float

method lineTo

lineTo: (x: number, y: number) => this;

This creates a line from the currentPath's offset to X and Y and updates the offset to X and Y.
Parameter x
Expects a Float
Parameter y
Expects a Float

method moveTo

moveTo: (x: number, y: number) => this;

Starts a new Path and calls Path.moveTo( x, y ) on that Path
Parameter x
Expects a Float
Parameter y
Expects a Float
Remarks
Also points currentPath to that Path.

method quadraticCurveTo

quadraticCurveTo: (aCPx: number, aCPy: number, aX: number, aY: number) => this;

This creates a quadratic curve from the currentPath's offset to _x_ and _y_ with _cpX_ and _cpY_ as control point and updates the currentPath's offset to _x_ and _y_.
Parameter cpX
Expects a Float
Parameter cpY
Expects a Float
Parameter x
Expects a Float
Parameter y
Expects a Float

method splineThru

splineThru: (pts: Vector2[]) => this;

Connects a new SplineCurve onto the currentPath.
Parameter points
An array of Vector2s

method toShapes

toShapes: (isCCW: boolean) => Shape[];

Converts the subPaths array into an array of Shapes
Parameter isCCW
Changes how solids and holes are generated
Remarks
By default solid shapes are defined clockwise (CW) and holes are defined counterclockwise (CCW) If isCCW is set to true, then those are flipped.

class ShapeUtils

class ShapeUtils {}

A class containing utility functions for shapes.
Remarks
Note that these are all linear functions so it is necessary to calculate separately for x, y (and z, w if present) components of a vector.
See Also
- Official Documentation
- Source

method area

static area: (contour: readonly Vector2Like[]) => number;

Calculate area of a ( 2D ) contour polygon.

method isClockWise

static isClockWise: (pts: readonly Vector2Like[]) => boolean;

Note that this is a linear function so it is necessary to calculate separately for x, y components of a polygon.
Remarks
Used internally by Path, ExtrudeGeometry and ShapeGeometry.

method triangulateShape

static triangulateShape: (
    contour: Vector2Like[],
    holes: Vector2Like[][]
) => number[][];

Used internally by ExtrudeGeometry and ShapeGeometry to calculate faces in shapes with holes.

class Skeleton

class Skeleton {}

Use an array of bones to create a Skeleton that can be used by a SkinnedMesh.

Example 1

// Create a simple "arm"
const bones = [];
const shoulder = new THREE.Bone();
const elbow = new THREE.Bone();
const hand = new THREE.Bone();
shoulder.add(elbow);
elbow.add(hand);
bones.push(shoulder);
bones.push(elbow);
bones.push(hand);
shoulder.position.y = -5;
elbow.position.y = 0;
hand.position.y = 5;
const armSkeleton = new THREE.Skeleton(bones);
See the[page: SkinnedMesh] page
for an example of usage with standard[page: BufferGeometry].

constructor

constructor(bones?: Bone<Object3DEventMap>[], boneInverses?: Matrix4[]);

Creates a new Skeleton.
Parameter bones
The array of bones. Default [].
Parameter boneInverses
An array of Matrix4s. Default [].

property boneInverses

boneInverses: Matrix4[];

An array of Matrix4s that represent the inverse of the matrixWorld of the individual bones.

property boneMatrices

boneMatrices: Float32Array;

The array buffer holding the bone data when using a vertex texture.

property bones

bones: Bone<Object3DEventMap>[];

The array of Bones.
Remarks
Note this is a copy of the original array, not a reference, so you can modify the original array without effecting this one.

property boneTexture

boneTexture: DataTexture;

The DataTexture holding the bone data when using a vertex texture.

property frame

frame: number;

property previousBoneMatrices

previousBoneMatrices: Float32Array;

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

method calculateInverses

calculateInverses: () => void;

Generates the boneInverses array if not provided in the constructor.

method clone

clone: () => Skeleton;

Returns a clone of this Skeleton object.

method computeBoneTexture

computeBoneTexture: () => this;

Computes an instance of DataTexture in order to pass the bone data more efficiently to the shader
Remarks
The texture is assigned to boneTexture.

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method fromJSON

fromJSON: (json: SkeletonJSON, bones: Record<string, Bone>) => void;

method getBoneByName

getBoneByName: (name: string) => undefined | Bone;

Searches through the skeleton's bone array and returns the first with a matching name.
Parameter name
String to match to the Bone's .name property.

method init

init: () => void;

method pose

pose: () => void;

Returns the skeleton to the base pose.

method toJSON

toJSON: () => SkeletonJSON;

method update

update: () => void;

Updates the boneMatrices and boneTexture after changing the bones
Remarks
This is called automatically by the WebGLRenderer if the Skeleton is used with a SkinnedMesh.

class SkeletonHelper

class SkeletonHelper extends LineSegments {}

A helper object to assist with visualizing a Skeleton
Remarks
The helper is rendered using a LineBasicMaterial.
Example 1
const helper = new THREE.SkeletonHelper(skinnedMesh); scene.add(helper);
See Also
- Example: WebGL / animation / skinning / blending
- Example: WebGL / animation / skinning / morph
- Example: WebGL / loader / bvh
- Official Documentation
- Source

constructor

constructor(
    object:
        | Object3D<Object3DEventMap>
        | SkinnedMesh<
              BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
              Material | Material[],
              Object3DEventMap
          >
);

Create a new instance of SkeletonHelper
Parameter object
Usually an instance of SkinnedMesh. However, any instance of Object3D can be used if it represents a hierarchy of Bones (via Object3D.children).

property bones

bones: Bone<Object3DEventMap>[];

The list of bones that the helper renders as Lines.

property isSkeletonHelper

readonly isSkeletonHelper: boolean;

Read-only flag to check if a given object is of type SkeletonHelper.
Remarks
This is a _constant_ value

property matrixAutoUpdate

override matrixAutoUpdate: boolean;

Is set to false, as the helper is using the root.matrixWorld.
See Also
- Object3D.matrixAutoUpdate.

property root

root:
    | Object3D<Object3DEventMap>
    | SkinnedMesh<
          BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
          Material | Material[],
          Object3DEventMap
      >;

The object passed in the constructor.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method setColors

setColors: (color1: Color, color2: Color) => this;

class SkinnedMesh

class SkinnedMesh<
    TGeometry extends BufferGeometry = BufferGeometry,
    TMaterial extends Material | Material[] = Material | Material[],
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Mesh<TGeometry, TMaterial, TEventMap> {}

A mesh that has a Skeleton with bones that can then be used to animate the vertices of the geometry.

Example 1

const geometry = new THREE.CylinderGeometry(5, 5, 5, 5, 15, 5, 30);
// create the skin indices and skin weights manually
// (typically a loader would read this data from a 3D model for you)
const position = geometry.attributes.position;
const vertex = new THREE.Vector3();
const skinIndices = [];
const skinWeights = [];
for (let i = 0; i & lt; position.count; i++) {
    vertex.fromBufferAttribute(position, i);
    // compute skinIndex and skinWeight based on some configuration data
    const y = (vertex.y + sizing.halfHeight);
    const skinIndex = Math.floor(y / sizing.segmentHeight);
    const skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight;
    skinIndices.push(skinIndex, skinIndex + 1, 0, 0);
    skinWeights.push(1 - skinWeight, skinWeight, 0, 0);
}
geometry.setAttribute('skinIndex', new THREE.Uint16BufferAttribute(skinIndices, 4));
geometry.setAttribute('skinWeight', new THREE.Float32BufferAttribute(skinWeights, 4));
// create skinned mesh and skeleton
const mesh = new THREE.SkinnedMesh(geometry, material);
const skeleton = new THREE.Skeleton(bones);
// see example from THREE.Skeleton
const rootBone = skeleton.bones[0];
mesh.add(rootBone);
// bind the skeleton to the mesh
mesh.bind(skeleton);
// move the bones and manipulate the model
skeleton.bones[0].rotation.x = -0.1;
skeleton.bones[1].rotation.x = 0.2;

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    material?: Material | Material[],
    useVertexTexture?: boolean
);

Create a new instance of SkinnedMesh
Parameter geometry
An instance of BufferGeometry. Default `new THREE.BufferGeometry()`.
Parameter material
A single or an array of Material. Default `new THREE.MeshBasicMaterial()`.

property bindMatrix

bindMatrix: Matrix4;

The base matrix that is used for the bound bone transforms.

property bindMatrixInverse

bindMatrixInverse: Matrix4;

The base matrix that is used for resetting the bound bone transforms.

property bindMode

bindMode: BindMode;

Either AttachedBindMode or DetachedBindMode. AttachedBindMode means the skinned mesh shares the same world space as the skeleton. This is not true when using DetachedBindMode which is useful when sharing a skeleton across multiple skinned meshes.

property boundingBox

boundingBox: Box3;

The bounding box of the SkinnedMesh. Can be calculated with .computeBoundingBox(). null

property boundingSphere

boundingSphere: Sphere;

The bounding box of the SkinnedMesh. Can be calculated with .computeBoundingSphere(). null

property isSkinnedMesh

readonly isSkinnedMesh: boolean;

Read-only flag to check if a given object is of type SkinnedMesh.
Remarks
This is a _constant_ value

property skeleton

skeleton: Skeleton;

Skeleton representing the bone hierarchy of the skinned mesh.

property type

override readonly type: string;

Modifiers
- @override

method applyBoneTransform

applyBoneTransform: (index: number, vector: Vector3) => Vector3;

Applies the bone transform associated with the given index to the given position vector
Parameter index
Expects a Integer
Parameter vector
Remarks
Returns the updated vector.

method bind

bind: (skeleton: Skeleton, bindMatrix?: Matrix4) => void;

Bind a skeleton to the skinned mesh
Parameter skeleton
Skeleton created from a Bones tree.
Parameter bindMatrix
Matrix4 that represents the base transform of the skeleton.
Remarks
The bindMatrix gets saved to .bindMatrix property and the .bindMatrixInverse gets calculated.

method computeBoundingBox

computeBoundingBox: () => void;

Computes the bounding box of the skinned mesh, and updates the attribute. The bounding box is not computed by the engine; it must be computed by your app. If the skinned mesh is animated, the bounding box should be recomputed per frame.

method computeBoundingSphere

computeBoundingSphere: () => void;

Computes the bounding sphere of the skinned mesh, and updates the attribute. The bounding sphere is automatically computed by the engine when it is needed, e.g., for ray casting and view frustum culling. If the skinned mesh is animated, the bounding sphere should be recomputed per frame.

method normalizeSkinWeights

normalizeSkinWeights: () => void;

Normalizes the skin weights.

method pose

pose: () => void;

This method sets the skinned mesh in the rest pose (resets the pose).

method toJSON

toJSON: (meta?: JSONMeta) => SkinnedMeshJSON;

class Source

class Source<TData> {}

Represents the data Source of a texture.
See Also
- Official Documentation
- Source

constructor

constructor(data: {});

Create a new instance of Source
Parameter data
The data definition of a texture. Default null

property data

data: {};

The actual data of a texture.
Remarks
The type of this property depends on the texture that uses this instance.

property dataReady

dataReady: boolean;

This property is only relevant when is set to true and provides more control on how texture data should be processed. When dataReady is set to false, the engine performs the memory allocation (if necessary) but does not transfer the data into the GPU memory. true

property id

readonly id: number;

property isSource

readonly isSource: boolean;

Flag to check if a given object is of type Source.
Remarks
This is a _constant_ value

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

property version

version: number;

This starts at 0 and counts how many times .needsUpdate is set to true.
Remarks
Expects a Integer

method getSize

getSize: (target: Vector3) => Vector3;

method toJSON

toJSON: (meta?: string | {}) => SourceJSON;

Convert the data Source to three.js JSON Object/Scene format.
Parameter meta
Optional object containing metadata.

class SourceJSON

class SourceJSON {}

property url

url: SerializedImage | SerializedImage[];

property uuid

uuid: string;

class Sphere

class Sphere {}

constructor

constructor(center?: Vector3, radius?: number);

property center

center: Vector3;

new Vector3()

property isSphere

readonly isSphere: boolean;

Read-only flag to check if a given object is of type Sphere.

property radius

radius: number;

method applyMatrix4

applyMatrix4: (matrix: Matrix4) => Sphere;

method clampPoint

clampPoint: (point: Vector3, target: Vector3) => Vector3;

method clone

clone: () => this;

method containsPoint

containsPoint: (point: Vector3) => boolean;

method copy

copy: (sphere: Sphere) => this;

method distanceToPoint

distanceToPoint: (point: Vector3) => number;

method empty

empty: () => any;

Deprecated
Use instead.

method equals

equals: (sphere: Sphere) => boolean;

method expandByPoint

expandByPoint: (point: Vector3) => this;

method fromJSON

fromJSON: (json: SphereJSON) => this;

method getBoundingBox

getBoundingBox: (target: Box3) => Box3;

method intersectsBox

intersectsBox: (box: Box3) => boolean;

method intersectsPlane

intersectsPlane: (plane: Plane) => boolean;

method intersectsSphere

intersectsSphere: (sphere: Sphere) => boolean;

method isEmpty

isEmpty: () => boolean;

method makeEmpty

makeEmpty: () => this;

method set

set: (center: Vector3, radius: number) => Sphere;

method setFromPoints

setFromPoints: (points: Vector3[], optionalCenter?: Vector3) => Sphere;

method toJSON

toJSON: () => SphereJSON;

method translate

translate: (offset: Vector3) => Sphere;

method union

union: (sphere: Sphere) => this;

class SphereGeometry

class SphereGeometry extends BufferGeometry {}

A class for generating sphere geometries.

Example 1

const geometry = new THREE.SphereGeometry(15, 32, 16);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

constructor

constructor(
    radius?: number,
    widthSegments?: number,
    heightSegments?: number,
    phiStart?: number,
    phiLength?: number,
    thetaStart?: number,
    thetaLength?: number
);

Create a new instance of SphereGeometry
Parameter radius
Sphere radius. Expects a Float. Default 1
Parameter widthSegments
Number of horizontal segments. Minimum value is 3, and the Expects a Integer. Default 32
Parameter heightSegments
Number of vertical segments. Minimum value is 2, and the Expects a Integer. Default 16
Parameter phiStart
Specify horizontal starting angle. Expects a Float. Default 0
Parameter phiLength
Specify horizontal sweep angle size. Expects a Float. Default Math.PI * 2
Parameter thetaStart
Specify vertical starting angle. Expects a Float. Default 0
Parameter thetaLength
Specify vertical sweep angle size. Expects a Float. Default Math.PI
Remarks
The geometry is created by sweeping and calculating vertexes around the **Y** axis (horizontal sweep) and the **Z** axis (vertical sweep) Thus, incomplete spheres (akin to 'sphere slices') can be created through the use of different values of phiStart, phiLength, thetaStart and thetaLength, in order to define the points in which we start (or end) calculating those vertices.

property parameters

readonly parameters: {
    readonly radius: number;
    readonly widthSegments: number;
    readonly heightSegments: number;
    readonly phiStart: number;
    readonly phiLength: number;
    readonly thetaStart: number;
    readonly thetaLength: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Spherical

class Spherical {}

constructor

constructor(radius?: number, phi?: number, theta?: number);

property phi

phi: number;

property radius

radius: number;

property theta

theta: number;

method clone

clone: () => this;

method copy

copy: (other: Spherical) => this;

method makeSafe

makeSafe: () => this;

method set

set: (radius: number, phi: number, theta: number) => this;

method setFromCartesianCoords

setFromCartesianCoords: (x: number, y: number, z: number) => this;

method setFromVector3

setFromVector3: (v: Vector3) => this;

class SphericalHarmonics3

class SphericalHarmonics3 {}

constructor

constructor();

property coefficients

coefficients: Vector3[];

[new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()]

property isSphericalHarmonics3

readonly isSphericalHarmonics3: boolean;

method add

add: (sh: SphericalHarmonics3) => SphericalHarmonics3;

method addScaledSH

addScaledSH: (sh: SphericalHarmonics3, s: number) => SphericalHarmonics3;

method clone

clone: () => this;

method copy

copy: (sh: SphericalHarmonics3) => SphericalHarmonics3;

method equals

equals: (sh: SphericalHarmonics3) => boolean;

method fromArray

fromArray: (array: number[] | ArrayLike<number>, offset?: number) => this;

Sets the values of this spherical harmonics from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array. Default is 0.

method getAt

getAt: (normal: Vector3, target: Vector3) => Vector3;

method getBasisAt

static getBasisAt: (normal: Vector3, shBasis: number[]) => void;

method getIrradianceAt

getIrradianceAt: (normal: Vector3, target: Vector3) => Vector3;

method lerp

lerp: (sh: SphericalHarmonics3, alpha: number) => SphericalHarmonics3;

method scale

scale: (s: number) => SphericalHarmonics3;

method set

set: (coefficients: Vector3[]) => SphericalHarmonics3;

method toArray

toArray: {
    (array?: number[], offset?: number): number[];
    (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
};

Returns an array with the values of this spherical harmonics, or copies them into the provided array.
Parameter array
(optional) array to store the spherical harmonics to. If this is not provided, a new array will be created.
Parameter offset
(optional) optional offset into the array. The created or provided array.
Returns an array with the values of this spherical harmonics, or copies them into the provided array-like.
Parameter array
array-like to store the spherical harmonics to.
Parameter offset
(optional) optional offset into the array-like. The provided array-like.

method zero

zero: () => SphericalHarmonics3;

class SplineCurve

class SplineCurve extends Curve<Vector2> {}

Create a smooth **2D** spline curve from a series of points.

Example 1

// Create a sine-like wave
const curve = new THREE.SplineCurve([
new THREE.Vector2(-10, 0),
new THREE.Vector2(-5, 5),
new THREE.Vector2(0, 0),
new THREE.Vector2(5, -5),
new THREE.Vector2(10, 0)]);
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
});
// Create the final object to add to the scene
const splineObject = new THREE.Line(geometry, material);

constructor

constructor(points?: Vector2[]);

This constructor creates a new SplineCurve.
Parameter points
An array of Vector2 points that define the curve. Default []

property isSplineCurve

readonly isSplineCurve: boolean;

Read-only flag to check if a given object is of type SplineCurve.
Remarks
This is a _constant_ value

property points

points: Vector2[];

The array of Vector2 points that define the curve.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class SpotLight

class SpotLight extends Light<SpotLightShadow> {}

This light gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets.

Example 1

// white {@link SpotLight} shining from the side, modulated by a texture, casting a shadow
const {@link SpotLight} = new THREE.SpotLight(0xffffff);
spotLight.position.set(100, 1000, 100);
spotLight.map = new THREE.TextureLoader().load(url);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
scene.add(spotLight);

constructor

constructor(
    color?: ColorRepresentation,
    intensity?: number,
    distance?: number,
    angle?: number,
    penumbra?: number,
    decay?: number
);

Creates a new SpotLight.
Parameter color
Hexadecimal color of the light. Default 0xffffff _(white)_.
Parameter intensity
Numeric value of the light's strength/intensity. Expects a Float. Default 1.
Parameter distance
Maximum range of the light. Default is 0 (no limit). Expects a Float.
Parameter angle
Maximum angle of light dispersion from its direction whose upper bound is Math.PI/2.
Parameter penumbra
Percent of the SpotLight cone that is attenuated due to penumbra. Takes values between zero and 1. Expects a Float. Default 0.
Parameter decay
The amount the light dims along the distance of the light. Expects a Float. Default 2.

property angle

angle: number;

Maximum extent of the spotlight, in radians, from its direction.
Remarks
Expects a Float

property castShadow

override castShadow: boolean;

If set to true light will cast dynamic shadows.
Remarks
**Warning**: This is expensive and requires tweaking to get shadows looking right. the SpotLightShadow for details.

property decay

decay: number;

The amount the light dims along the distance of the light. In context of physically-correct rendering the default value should not be changed.
Remarks
Expects a Float

property distance

distance: number;

When **Default mode** — When distance is zero, light does not attenuate. When distance is non-zero, light will attenuate linearly from maximum intensity at the light's position down to zero at this distance from the light.
When **legacy lighting mode is disabled** — When distance is zero, light will attenuate according to inverse-square law to infinite distance. When distance is non-zero, light will attenuate according to inverse-square law until near the distance cutoff, where it will then attenuate quickly and smoothly to 0. Inherently, cutoffs are not physically correct.
Remarks
Expects a Float

property intensity

intensity: number;

The light's intensity.
Remarks
Expects a Float

property isSpotLight

readonly isSpotLight: boolean;

Read-only flag to check if a given object is of type SpotLight.
Remarks
This is a _constant_ value

property map

map: Texture<unknown>;

A Texture used to modulate the color of the light. The spot light color is mixed with the _RGB_ value of this texture, with a ratio corresponding to its alpha value. The cookie-like masking effect is reproduced using pixel values (0, 0, 0, 1-cookie_value).
Remarks
**Warning**: SpotLight.map is disabled if SpotLight.castShadow is false.

property penumbra

penumbra: number;

Percent of the SpotLight cone that is attenuated due to penumbra.
Remarks
Expects a Float

property position

readonly position: Vector3;

This is set equal to Object3D.DEFAULT_UP (0, 1, 0), so that the light shines from the top down.

property power

power: number;

The light's power.
Remarks
Expects a Float

property shadow

shadow: SpotLightShadow;

A SpotLightShadow used to calculate shadows for this light.

property target

target: Object3D<Object3DEventMap>;

The SpotLight points from its position to target.position.
Remarks
**Note**: For the target's position to be changed to anything other than the default, it must be added to the scene using
scene.add( light.target );
This is so that the target's matrixWorld gets automatically updated each frame. It is also possible to set the target to be another object in the scene (anything with a position property), like so:
const targetObject = new THREE.Object3D(); scene.add(targetObject); light.target = targetObject;
The SpotLight will now track the target object.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

method toJSON

toJSON: (meta?: JSONMeta) => SpotLightJSON;

class SpotLightHelper

class SpotLightHelper extends Object3D {}

This displays a cone shaped helper object for a SpotLight.

Example 1

const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 10, 10);
scene.add(spotLight);
const {@link SpotLightHelper} = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);

constructor

constructor(light: Light<LightShadow<Camera>>, color?: ColorRepresentation);

Create a new instance of SpotLightHelper
Parameter light
The SpotLight to be visualized.
Parameter color
If this is not the set the helper will take the color of the light. Default light.color

property color

color: ColorRepresentation;

The color parameter passed in the constructor. If this is changed, the helper's color will update the next time update is called.

property cone

cone: LineSegments<
    BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    Material | Material[],
    Object3DEventMap
>;

LineSegments used to visualize the light.

property light

light: Light<LightShadow<Camera>>;

Reference to the SpotLight being visualized.

property matrix

matrix: Matrix4;

Reference to the spotLight's matrixWorld.

property matrixAutoUpdate

override matrixAutoUpdate: boolean;

Is set to false, as the helper is using the light.matrixWorld.
See Also
- Object3D.matrixAutoUpdate.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.
Modifiers
- @override

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method update

update: () => void;

Updates the light helper.

class SpotLightShadow

class SpotLightShadow extends LightShadow<PerspectiveCamera> {}

This is used internally by SpotLights for calculating shadows.

Example 1

//Create a WebGLRenderer and turn on shadows in the renderer
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a SpotLight and turn on shadows for the light
const light = new THREE.SpotLight(0xffffff);
light.castShadow = true; // default false
scene.add(light);
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default
light.shadow.focus = 1; // default
//Create a sphere that cast shadows (but does not receive them)
const sphereGeometry = new THREE.SphereGeometry(5, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({
    color: 0xff0000
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add(sphere);
//Create a plane that receives shadows (but does not cast them)
const planeGeometry = new THREE.PlaneGeometry(20, 20, 32, 32);
const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ff00
})
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
scene.add(plane);
//Create a helper for the shadow camera (optional)
const helper = new THREE.CameraHelper(light.shadow.camera);
scene.add(helper);

property aspect

aspect: number;

property camera

camera: PerspectiveCamera;

The light's view of the world.
Remarks
The fov will track the angle property of the owning SpotLight via the update method. Similarly, the aspect property will track the aspect of the mapSize. If the distance property of the light is set, the far clipping plane will track that, otherwise it defaults to 500.

property focus

focus: number;

Used to focus the shadow camera.
Remarks
The camera's field of view is set as a percentage of the spotlight's field-of-view. Range is [0, 1]. 0`.

property isSpotLightShadow

readonly isSpotLightShadow: boolean;

Read-only flag to check if a given object is of type SpotLightShadow.
Remarks
This is a _constant_ value

class Sprite

class Sprite<
    TEventMap extends Object3DEventMap = Object3DEventMap
> extends Object3D<TEventMap> {}

A Sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.
Remarks
Sprites do not cast shadows, setting castShadow = true will have no effect.
Example 1
const map = new THREE.TextureLoader().load('sprite.png'); const material = new THREE.SpriteMaterial({ map: map }); const {@link Sprite} = new THREE.Sprite(material); scene.add(sprite);
See Also
- Official Documentation
- Source

constructor

constructor(material?: SpriteMaterial);

Creates a new Sprite.
Parameter material
An instance of SpriteMaterial. Default `new SpriteMaterial()`, _with white color_.

property castShadow

override castShadow: boolean;

Whether the object gets rendered into shadow map. No effect in Sprite.

property center

center: Vector2;

The sprite's anchor point, and the point around which the Sprite rotates. A value of (0.5, 0.5) corresponds to the midpoint of the sprite. A value of (0, 0) corresponds to the lower left corner of the sprite.

property count

count: number;

The number of instances of this sprite. Can only be used with WebGPURenderer.
1

property geometry

geometry: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>;

property isSprite

readonly isSprite: boolean;

Read-only flag to check if a given object is of type Sprite.
Remarks
This is a _constant_ value

property material

material: SpriteMaterial;

An instance of SpriteMaterial, defining the object's appearance.

property type

override readonly type: string;

Modifiers
- @override

class SpriteMaterial

class SpriteMaterial extends Material {}

A material for rendering instances of Sprite.

const map = new THREE.TextureLoader().load( 'textures/sprite.png' );
const material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );

const sprite = new THREE.Sprite( material );
sprite.scale.set(200, 200, 1)
scene.add( sprite );

constructor

constructor(parameters?: SpriteMaterialParameters);

Constructs a new sprite material.
Parameter parameters
An object with one or more properties defining the material's appearance. Any property of the material (including any property from inherited materials) can be passed in here. Color values can be passed any type of value accepted by Color#set.

property isSpriteMaterial

readonly isSpriteMaterial: boolean;

This flag can be used for type testing.
true

method setValues

setValues: (values?: SpriteMaterialParameters) => void;

class StereoCamera

class StereoCamera extends Camera {}

Dual PerspectiveCameras used for effects such as 3D Anaglyph or Parallax Barrier.
See Also
- Example: effects / anaglyph
- Example: effects / parallaxbarrier
- Example: effects / stereo
- Official Documentation
- Source

constructor

constructor();

property aspect

aspect: number;

Remarks
Expects a Float

property cameraL

cameraL: PerspectiveCamera;

The Left camera. A PerspectiveCamera added to layer 1
Remarks
Objects to be rendered by the **left** camera must also be added to this layer.

property cameraR

cameraR: PerspectiveCamera;

The Right camera. A PerspectiveCamera added to layer 2
Remarks
Objects to be rendered by the **right** camera must also be added to this layer.

property eyeSep

eyeSep: number;

Remarks
Expects a Float

property type

type: string;

method update

update: (camera: PerspectiveCamera) => void;

Update the stereo cameras based on the camera passed in.
Parameter camera

class StringKeyframeTrack

class StringKeyframeTrack extends KeyframeTrack {}

A track for string keyframe values.

constructor

constructor(name: string, times: ArrayLike<number>, values: ArrayLike<string>);

Constructs a new string keyframe track.
This keyframe track type has no interpolation parameter because the interpolation is always discrete.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.

class TetrahedronGeometry

class TetrahedronGeometry extends PolyhedronGeometry {}

A class for generating a tetrahedron geometries.
See Also
- Official Documentation
- Source

constructor

constructor(radius?: number, detail?: number);

Create a new instance of TetrahedronGeometry
Parameter radius
Radius of the tetrahedron. Expects a Float. Default 1
Parameter detail
Setting this to a value greater than 0 adds vertices making it no longer a tetrahedron. Expects a Integer. Default 0

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Texture

class Texture<TImage = unknown> extends EventDispatcher<{ dispose: {} }> {}

Create a Texture to apply to a surface or as a reflection or refraction map.
Remarks
After the initial use of a texture, its **dimensions**, format, and cannot be changed Instead, call .dispose() on the Texture and instantiate a new Texture.
Example 1
// load a texture, set wrap mode to repeat const texture = new THREE.TextureLoader().load("textures/water.jpg"); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(4, 4);
See Also

constructor

constructor(
    image?: {},
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    format?: PixelFormat,
    type?: TextureDataType,
    anisotropy?: number,
    colorSpace?: ColorSpace
);

This creates a new Texture object.
Parameter image
See .image. Default THREE.Texture.DEFAULT_IMAGE
Parameter mapping
See .mapping. Default THREE.Texture.DEFAULT_MAPPING
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.LinearFilter
Parameter minFilter
See .minFilter. Default THREE.LinearMipmapLinearFilter
Parameter format
See .format. Default THREE.RGBAFormat
Parameter type
See . Default THREE.UnsignedByteType
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY
Parameter colorSpace
See .colorSpace. Default THREE.NoColorSpace

constructor

constructor(
    image: {},
    mapping: Mapping,
    wrapS: Wrapping,
    wrapT: Wrapping,
    magFilter: MagnificationTextureFilter,
    minFilter: MinificationTextureFilter,
    format: PixelFormat,
    type: TextureDataType,
    anisotropy: number
);

Deprecated

property anisotropy

anisotropy: number;

The number of samples taken along the axis through the pixel that has the highest density of texels.
Remarks
This value is usually a power of 2. _value of_ THREE.Texture.DEFAULT_ANISOTROPY. That is normally 1.

property center

center: Vector2;

The point around which rotation occurs.
Remarks
A value of (0.5, 0.5) corresponds to the center of the texture.

property channel

channel: number;

Lets you select the uv attribute to map the texture to. 0 for uv, 1 for uv1, 2 for uv2 and 3 for uv3.

property colorSpace

colorSpace: string;

The {@link Textures | Texture constants} page for details of other color spaces.
Remarks
Textures containing color data should be annotated with or .
See Also
- Texture Constants
- THREE.TextureDataType

property DEFAULT_ANISOTROPY

static DEFAULT_ANISOTROPY: number;

The Global default value for .anisotropy.

property DEFAULT_IMAGE

static DEFAULT_IMAGE: null;

The Global default value for .image.

property DEFAULT_MAPPING

static DEFAULT_MAPPING: Mapping;

The Global default value for .mapping.

property depth

readonly depth: number;

The depth of the texture in pixels.

property flipY

flipY: boolean;

If set to true, the texture is flipped along the vertical axis when uploaded to the GPU.
Remarks
Note that this property has no effect for ImageBitmap. You need to configure on bitmap creation instead. See ImageBitmapLoader.
See Also
- ImageBitmapLoader.

property format

format: AnyPixelFormat;

These define how elements of a 2D texture, or texels, are read by shaders.
Remarks
CompressedPixelFormat expect the _values_ be THREE.CubeTextureMapping
See Also
- Texture Constants
- THREE.PixelFormat

property generateMipmaps

generateMipmaps: boolean;

Whether to generate mipmaps, _(if possible)_ for a texture.
Remarks
Set this to false if you are creating mipmaps manually.

property height

readonly height: number;

The height of the texture in pixels.

property id

readonly id: number;

Unique number for this Texture instance.
Remarks
Expects a Integer

property image

image: {};

An image object, typically created using the TextureLoader.load() method.
Remarks
To use video as a Texture you need to have a playing HTML5 video element as a source for your Texture image and continuously update this Texture as long as video is playing - the VideoTexture class handles this automatically.

property internalFormat

internalFormat: PixelFormatGPU;

The GPU Pixel Format allows the developer to specify how the data is going to be stored on the GPU.
Remarks
Compatible only with WebGL 2 Rendering Context.
See Also
- Texture Constants

property isArrayTexture

isArrayTexture: boolean;

Indicates if a texture should be handled like a texture array.
false

property isRenderTargetTexture

isRenderTargetTexture: boolean;

Indicates whether a texture belongs to a render target or not

property isTexture

readonly isTexture: boolean;

Read-only flag to check if a given object is of type Texture.
Remarks
This is a _constant_ value

property magFilter

magFilter: MagnificationTextureFilter;

How the Texture is sampled when a texel covers more than one pixel.
See Also

property mapping

mapping: AnyMapping;

How the image is applied to the object.
Remarks
CubeTexture expect the _values_ be THREE.CubeTextureMapping
See Also
- Texture Constants

property matrix

matrix: Matrix3;

The uv-transform matrix for the texture.
Remarks
When .matrixAutoUpdate property is false. This matrix may be set manually.
See Also
- .matrixAutoUpdate

property matrixAutoUpdate

matrixAutoUpdate: boolean;

Whether is to update the texture's uv-transform .matrix.
Remarks
Set this to false if you are specifying the uv-transform matrix directly.
See Also
- .matrix

property minFilter

minFilter: MinificationTextureFilter;

How the Texture is sampled when a texel covers less than one pixel.
See Also

property mipmaps

mipmaps:
    | CubeTexture<unknown>[]
    | CompressedTextureMipmap[]
    | HTMLCanvasElement[];

Array of user-specified mipmaps

property name

name: string;

Optional name of the object
Remarks
_(doesn't need to be unique)_.

property offset

offset: Vector2;

How much a single repetition of the texture is offset from the beginning, in each direction **U** and **V**.
Remarks
Typical range is 0.0 to 1.0.

property onUpdate

onUpdate: (texture: Texture) => void;

A callback function, called when the texture is updated _(e.g., when needsUpdate has been set to true and then the texture is used)_.

property pmremVersion

pmremVersion: number;

Indicates whether this texture should be processed by PMREMGenerator or not (only relevant for render target textures)

property premultiplyAlpha

premultiplyAlpha: boolean;

If set to true, the alpha channel, if present, is multiplied into the color channels when the texture is uploaded to the GPU.
Remarks
Note that this property has no effect for ImageBitmap. You need to configure on bitmap creation instead. See ImageBitmapLoader.
See Also
- ImageBitmapLoader.

property renderTarget

renderTarget: RenderTarget<Texture<unknown>>;

property repeat

repeat: Vector2;

How many times the texture is repeated across the surface, in each direction **U** and **V**.
Remarks
If repeat is set greater than 1 in either direction, the corresponding *Wrap* parameter should also be set to THREE.RepeatWrapping or THREE.MirroredRepeatWrapping to achieve the desired tiling effect.
See Also
- wrapS
- wrapT

property rotation

rotation: number;

How much the texture is rotated around the center point, in radians.
Remarks
Positive values are counter-clockwise.

property source

source: Source<TImage>;

The data definition of a texture. A reference to the data source can be shared across textures. This is often useful in context of spritesheets where multiple textures render the same data but with different Texture transformations.

property type

type: TextureDataType;

This must correspond to the .format.
Remarks
THREE.UnsignedByteType, is the type most used by Texture formats.
See Also
- Texture Constants
- THREE.TextureDataType

property unpackAlignment

unpackAlignment: number;

Specifies the alignment requirements for the start of each pixel row in memory.
Remarks
The allowable values are: - 1 (byte-alignment) - 2 (rows aligned to even-numbered bytes) - 4 (word-alignment) - 8 (rows start on double-word boundaries).
See Also
- glPixelStorei for more information.

property updateRanges

updateRanges: { start: number; count: number }[];

This can be used to only update a subregion or specific rows of the texture (for example, just the first 3 rows). Use the addUpdateRange() function to add ranges to this array.

property userData

userData: Record<string, any>;

An object that can be used to store custom data about the texture.
Remarks
It should not hold references to functions as these will not be cloned.

property uuid

uuid: string;

UUID of this object instance.
Remarks
This gets automatically assigned and shouldn't be edited.

property version

version: number;

This starts at 0 and counts how many times .needsUpdate is set to true.
Remarks
Expects a Integer

property width

readonly width: number;

The width of the texture in pixels.

property wrapS

wrapS: Wrapping;

This defines how the Texture is wrapped *horizontally* and corresponds to **U** in UV mapping.
Remarks
for **WEBGL1** - tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL1, not three.js. **WEBGL2** does not have this limitation.
See Also

property wrapT

wrapT: Wrapping;

This defines how the Texture is wrapped *vertically* and corresponds to **V** in UV mapping.
Remarks
for **WEBGL1** - tiling of images in textures only functions if image dimensions are powers of two (2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels. Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL1, not three.js. **WEBGL2** does not have this limitation.
See Also

method addUpdateRange

addUpdateRange: (start: number, count: number) => void;

Adds a range of data in the data texture to be updated on the GPU.
Parameter start
Position at which to start update.
Parameter count
The number of components to update.

method clearUpdateRanges

clearUpdateRanges: () => void;

Clears the update ranges.

method clone

clone: () => this;

Make copy of the texture. Note this is not a "deep copy", the image is shared. Cloning the texture automatically marks it for texture upload.

method copy

copy: (source: Texture<TImage>) => this;

method dispose

dispose: () => void;

Frees the GPU-related resources allocated by this instance
Remarks
Call this method whenever this instance is no longer used in your app.

method setValues

setValues: (values: TextureParameters) => void;

Sets this texture's properties based on values.
Parameter values
A container with texture parameters.

method toJSON

toJSON: (meta?: string | {}) => TextureJSON;

Convert the texture to three.js JSON Object/Scene format.
Parameter meta
Optional object containing metadata.

method transformUv

transformUv: (uv: Vector2) => Vector2;

Transform the **UV** based on the value of this texture's .offset, .repeat, .wrapS, .wrapT and .flipY properties.
Parameter uv

method updateMatrix

updateMatrix: () => void;

Update the texture's **UV-transform** .matrix from the texture properties .offset, .repeat, .rotation and .center.

class TextureLoader

class TextureLoader extends Loader<Texture<HTMLImageElement>> {}

Class for loading a texture. Unlike other loaders, this one emits events instead of using predefined callbacks. So if you're interested in getting notified when things happen, you need to add listeners to the object.

constructor

constructor(manager?: LoadingManager);

method load

load: (
    url: string,
    onLoad?: (data: Texture<HTMLImageElement>) => void,
    onProgress?: (event: ProgressEvent) => void,
    onError?: (err: unknown) => void
) => Texture<HTMLImageElement>;

class Timer

class Timer {}

This class is an alternative to THREE.Clock with a different API design and behavior The goal is to avoid the conceptual flaws that became apparent in THREE.Clock over time.
- Timer has an method that updates its internal state. That makes it possible to call and multiple times per simulation step without getting different values. - The class can make use of the Page Visibility API to avoid large time delta values when the app is inactive (e.g. tab switched or browser hidden).
Example 1
const timer = new Timer();
function animate(timestamp) { requestAnimationFrame(animate); // timestamp is optional timer.update(timestamp); const delta = timer.getDelta(); // do something with delta renderer.render(scene, camera); }
See Also
- https://threejs.org/examples/#webgl_morphtargets_sphere

constructor

constructor();

method connect

connect: (document: Document) => void;

Connects the timer to the given document. Calling this method is not mandatory to use the timer but enables the usage of the Page Visibility API to avoid large time delta values.

method disconnect

disconnect: () => void;

Disconnects the timer from the DOM and also disables the usage of the Page Visibility API.

method dispose

dispose: () => this;

Can be used to free all internal resources. Usually called when the timer instance isn't required anymore.

method getDelta

getDelta: () => number;

Returns the time delta in seconds.

method getElapsed

getElapsed: () => number;

Returns the elapsed time in seconds.

method getTimescale

getTimescale: () => number;

Returns the time scale.

method reset

reset: () => this;

Resets the time computation for the current simulation step.

method setTimescale

setTimescale: (timescale: number) => this;

Sets a time scale that scales the time delta in .

method update

update: (timestamp?: number) => this;

Updates the internal state of the timer. This method should be called once per simulation step and before you perform queries against the timer (e.g. via ).
Parameter timestamp
The current time in milliseconds. Can be obtained from the requestAnimationFrame callback argument. If not provided, the current time will be determined with performance.now.

class TorusGeometry

class TorusGeometry extends BufferGeometry {}

A class for generating torus geometries.

Example 1

const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

constructor

constructor(
    radius?: number,
    tube?: number,
    radialSegments?: number,
    tubularSegments?: number,
    arc?: number
);

Parameter radius
Radius of the torus, from the center of the torus to the center of the tube. Default 1.
Parameter tube
Radius of the tube. Must be smaller than radius. Default is 0.4.
Parameter radialSegments
Default is 12.
Parameter tubularSegments
Default is 48.
Parameter arc
Central angle. Default is Math.PI * 2.

property parameters

readonly parameters: {
    readonly radius: number;
    readonly tube: number;
    readonly radialSegments: number;
    readonly tubularSegments: number;
    readonly arc: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class TorusKnotGeometry

class TorusKnotGeometry extends BufferGeometry {}

Creates a torus knot, the particular shape of which is defined by a pair of coprime integers, p and q If p and q are not coprime, the result will be a torus link.

Example 1

const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
const material = new THREE.MeshBasicMaterial({
    color: 0xffff00
});
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

constructor

constructor(
    radius?: number,
    tube?: number,
    tubularSegments?: number,
    radialSegments?: number,
    p?: number,
    q?: number
);

Create a new instance of TorusKnotGeometry
Parameter radius
Radius of the torus.. Default 1.
Parameter tube
Expects a Float. Default 0.4.
Parameter tubularSegments
Expects a Integer. Default 64.
Parameter radialSegments
Expects a Integer. Default 8.
Parameter p
This value determines, how many times the geometry winds around its axis of rotational symmetry. Expects a Integer. Default 2.
Parameter q
This value determines, how many times the geometry winds around a circle in the interior of the torus. Expects a Integer. Default 3.

property parameters

readonly parameters: {
    readonly radius: number;
    readonly tube: number;
    readonly tubularSegments: number;
    readonly radialSegments: number;
    readonly p: number;
    readonly q: number;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Triangle

class Triangle {}

constructor

constructor(a?: Vector3, b?: Vector3, c?: Vector3);

property a

a: Vector3;

new THREE.Vector3()

property b

b: Vector3;

new THREE.Vector3()

property c

c: Vector3;

new THREE.Vector3()

method clone

clone: () => this;

method closestPointToPoint

closestPointToPoint: (point: Vector3, target: Vector3) => Vector3;

method containsPoint

static containsPoint: (
    point: Vector3,
    a: Vector3,
    b: Vector3,
    c: Vector3
) => boolean;

method copy

copy: (triangle: Triangle) => this;

method equals

equals: (triangle: Triangle) => boolean;

method getArea

getArea: () => number;

method getBarycoord

static getBarycoord: (
    point: Vector3,
    a: Vector3,
    b: Vector3,
    c: Vector3,
    target: Vector3
) => Vector3 | null;

method getInterpolatedAttribute

static getInterpolatedAttribute: {
    (
        attr: BufferAttribute | InterleavedBufferAttribute,
        i1: number,
        i2: number,
        i3: number,
        barycoord: Vector3,
        target: Vector2
    ): Vector2;
    (
        attr: BufferAttribute | InterleavedBufferAttribute,
        i1: number,
        i2: number,
        i3: number,
        barycoord: Vector3,
        target: Vector3
    ): Vector3;
    (
        attr: BufferAttribute | InterleavedBufferAttribute,
        i1: number,
        i2: number,
        i3: number,
        barycoord: Vector3,
        target: Vector4
    ): Vector4;
};

method getInterpolation

static getInterpolation: {
    (
        point: Vector3,
        p1: Vector3,
        p2: Vector3,
        p3: Vector3,
        v1: Vector2,
        v2: Vector2,
        v3: Vector2,
        target: Vector2
    ): Vector2 | null;
    (
        point: Vector3,
        p1: Vector3,
        p2: Vector3,
        p3: Vector3,
        v1: Vector3,
        v2: Vector3,
        v3: Vector3,
        target: Vector3
    ): Vector3;
    (
        point: Vector3,
        p1: Vector3,
        p2: Vector3,
        p3: Vector3,
        v1: Vector4,
        v2: Vector4,
        v3: Vector4,
        target: Vector4
    ): Vector4;
};

method getMidpoint

getMidpoint: (target: Vector3) => Vector3;

method getNormal

static getNormal: (
    a: Vector3,
    b: Vector3,
    c: Vector3,
    target: Vector3
) => Vector3;

method getPlane

getPlane: (target: Plane) => Plane;

method intersectsBox

intersectsBox: (box: Box3) => boolean;

method isFrontFacing

static isFrontFacing: (
    a: Vector3,
    b: Vector3,
    c: Vector3,
    direction: Vector3
) => boolean;

method set

set: (a: Vector3, b: Vector3, c: Vector3) => Triangle;

method setFromAttributeAndIndices

setFromAttributeAndIndices: (
    attribute: BufferAttribute | InterleavedBufferAttribute,
    i0: number,
    i1: number,
    i2: number
) => this;

method setFromPointsAndIndices

setFromPointsAndIndices: (
    points: Vector3[],
    i0: number,
    i1: number,
    i2: number
) => this;

class TubeGeometry

class TubeGeometry extends BufferGeometry {}

Creates a tube that extrudes along a 3d curve.

Example 1

class CustomSinCurve extends THREE.Curve {
    constructor(scale = 1) {
        super();
        this.scale = scale;
    }
    getPoint(t, optionalTarget = new THREE.Vector3()) {
        const tx = t * 3 - 1.5;
        const ty = Math.sin(2 * Math.PI * t);
        const tz = 0;
        return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
    }
}
const path = new CustomSinCurve(10);
const geometry = new THREE.TubeGeometry(path, 20, 2, 8, false);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

constructor

constructor(
    path?: Curve<Vector3>,
    tubularSegments?: number,
    radius?: number,
    radialSegments?: number,
    closed?: boolean
);

Create a new instance of TubeGeometry
Parameter path
A 3D path that inherits from the Curve base class. Default new THREE.QuadraticBezierCurve3(new Vector3(-1, -1, 0 ), new Vector3(-1, 1, 0), new Vector3(1, 1, 0)).
Parameter tubularSegments
The number of segments that make up the tube. Expects a Integer. Default 64.
Parameter radius
The radius of the tube. Expects a Float. Default 1.
Parameter radialSegments
The number of segments that make up the cross-section. Expects a Integer. Default 8.
Parameter closed
Is the tube open or closed. Default false.

property binormals

binormals: Vector3[];

An array of Vector3 binormals

property normals

normals: Vector3[];

An array of Vector3 normals

property parameters

readonly parameters: {
    readonly path: Curve<Vector3>;
    readonly tubularSegments: number;
    readonly radius: number;
    readonly radialSegments: number;
    readonly closed: boolean;
};

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property tangents

tangents: Vector3[];

An array of Vector3 tangents

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class Uint16BufferAttribute

class Uint16BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Uint16BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Uint16Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Uint32BufferAttribute

class Uint32BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Uint32BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Uint32Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Uint8BufferAttribute

class Uint8BufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Uint8BufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Uint8Array. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Uint8ClampedBufferAttribute

class Uint8ClampedBufferAttribute extends BufferAttribute {}

A BufferAttribute for TypedArray
See Also
- BufferAttribute for details and for inherited methods and properties.
- Official Documentation
- Source

constructor

constructor(
    array: number | ArrayLike<number> | Iterable<number> | ArrayBuffer,
    itemSize: number,
    normalized?: boolean
);

This creates a new Uint8ClampedBufferAttribute object.
Parameter array
This can be a typed or untyped (normal) array or an integer length. An array value will be converted to Uint8ClampedArray. If a length is given a new TypedArray will created, initialized with all elements set to zero.
Parameter itemSize
the number of values of the array that should be associated with a particular vertex. For instance, if this attribute is storing a 3-component vector (such as a _position_, _normal_, or _color_), then itemSize should be 3.
Parameter normalized
Applies to integer data only. Indicates how the underlying data in the buffer maps to the values in the GLSL code. For instance, if array is an instance of UInt16Array, and normalized is true, the values 0 - +65535 in the array data will be mapped to 0.0f - +1.0f in the GLSL attribute. An Int16Array (signed) would map from -32768 - +32767 to -1.0f - +1.0f. If normalized is false, the values will be converted to floats unmodified, i.e. 32767 becomes 32767.0f. Default false.
See Also
- BufferAttribute

class Uniform

class Uniform<T = any> {}

Uniforms are global GLSL variables. They are passed to shader programs.
Example 1
When declaring a uniform of a ShaderMaterial, it is declared by value or by object.
uniforms: { time: { value: 1.0 }, resolution: new Uniform(new Vector2()) };
See Also
- Example: WebGL2 / nodes / materials / instance / uniform
- Example: WebGPU / instance / uniform
- Official Documentation
- Source

constructor

constructor(value: {});

Create a new instance of Uniform
Parameter value
An object containing the value to set up the uniform. It's type must be one of the Uniform Types described above.

property value

value: {};

Current value of the uniform.

method clone

clone: () => Uniform<T>;

Returns a clone of this uniform.
Remarks
If the uniform's value property is an Object with a clone() method, this is used, otherwise the value is copied by assignment Array values are **shared** between cloned Uniforms.

class UniformsGroup

class UniformsGroup extends EventDispatcher<{ dispose: {} }> {}

See Also
- Example: WebGL2 / UBO
- Source

constructor

constructor();

property id

id: number;

property isUniformsGroup

readonly isUniformsGroup: boolean;

property uniforms

uniforms: (Uniform<any> | Uniform<any>[])[];

property usage

usage: Usage;

method add

add: (uniform: Uniform | Uniform[]) => this;

method clone

clone: () => UniformsGroup;

method copy

copy: (source: UniformsGroup) => this;

method dispose

dispose: () => this;

method remove

remove: (uniform: Uniform | Uniform[]) => this;

method setName

setName: (name: string) => this;

method setUsage

setUsage: (value: Usage) => this;

class Vector2

class Vector2 {}

2D vector.

constructor

constructor(x?: number, y?: number);

property height

height: number;

property isVector2

readonly isVector2: boolean;

property width

width: number;

property x

x: number;

property y

y: number;

method [Symbol.iterator]

[Symbol.iterator]: () => Iterator<number>;

Iterating through a Vector2 instance will yield its components (x, y) in the corresponding order.

method add

add: (v: Vector2Like) => this;

Adds v to this vector.

method addScalar

addScalar: (s: number) => this;

Adds the scalar value s to this vector's x and y values.

method addScaledVector

addScaledVector: (v: Vector2Like, s: number) => this;

Adds the multiple of v and s to this vector.

method addVectors

addVectors: (a: Vector2Like, b: Vector2Like) => this;

Sets this vector to a + b.

method angle

angle: () => number;

computes the angle in radians with respect to the positive x-axis

method angleTo

angleTo: (v: Vector2) => number;

Returns the angle between this vector and vector v in radians.

method applyMatrix3

applyMatrix3: (m: Matrix3) => this;

Multiplies this vector (with an implicit 1 as the 3rd component) by m.

method ceil

ceil: () => this;

The x and y components of the vector are rounded up to the nearest integer value.

method clamp

clamp: (min: Vector2Like, max: Vector2Like) => this;

If this vector's x or y value is greater than the max vector's x or y value, it is replaced by the corresponding value. If this vector's x or y value is less than the min vector's x or y value, it is replaced by the corresponding value.
Parameter min
the minimum x and y values.
Parameter max
the maximum x and y values in the desired range.

method clampLength

clampLength: (min: number, max: number) => this;

If this vector's length is greater than the max value, it is replaced by the max value. If this vector's length is less than the min value, it is replaced by the min value.
Parameter min
the minimum value the length will be clamped to.
Parameter max
the maximum value the length will be clamped to.

method clampScalar

clampScalar: (min: number, max: number) => this;

If this vector's x or y values are greater than the max value, they are replaced by the max value. If this vector's x or y values are less than the min value, they are replaced by the min value.
Parameter min
the minimum value the components will be clamped to.
Parameter max
the maximum value the components will be clamped to.

method clone

clone: () => this;

Returns a new Vector2 instance with the same x and y values.

method copy

copy: (v: Vector2Like) => this;

Copies value of v to this vector.

method cross

cross: (v: Vector2Like) => number;

Computes cross product of this vector and v.

method distanceTo

distanceTo: (v: Vector2Like) => number;

Computes distance of this vector to v.

method distanceToSquared

distanceToSquared: (v: Vector2Like) => number;

Computes squared distance of this vector to v.

method divide

divide: (v: Vector2Like) => this;

Divides this vector by v.

method divideScalar

divideScalar: (s: number) => this;

Divides this vector by scalar s. Set vector to ( 0, 0 ) if s == 0.

method dot

dot: (v: Vector2Like) => number;

Computes dot product of this vector and v.

method equals

equals: (v: Vector2Like) => boolean;

Checks for strict equality of this vector and v.

method floor

floor: () => this;

The components of the vector are rounded down to the nearest integer value.

method fromArray

fromArray: (array: number[] | ArrayLike<number>, offset?: number) => this;

Sets this vector's x and y value from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array. Default is 0.

method fromBufferAttribute

fromBufferAttribute: (attribute: BufferAttribute, index: number) => this;

Sets this vector's x and y values from the attribute.
Parameter attribute
the source attribute.
Parameter index
index in the attribute.

method getComponent

getComponent: (index: number) => number;

Gets a component of this vector.

method length

length: () => number;

Computes length of this vector.

method lengthSq

lengthSq: () => number;

Computes squared length of this vector.

method lerp

lerp: (v: Vector2Like, alpha: number) => this;

Linearly interpolates between this vector and v, where alpha is the distance along the line - alpha = 0 will be this vector, and alpha = 1 will be v.
Parameter v
vector to interpolate towards.
Parameter alpha
interpolation factor in the closed interval [0, 1].

method lerpVectors

lerpVectors: (v1: Vector2Like, v2: Vector2Like, alpha: number) => this;

Sets this vector to be the vector linearly interpolated between v1 and v2 where alpha is the distance along the line connecting the two vectors - alpha = 0 will be v1, and alpha = 1 will be v2.
Parameter v1
the starting vector.
Parameter v2
vector to interpolate towards.
Parameter alpha
interpolation factor in the closed interval [0, 1].

method manhattanDistanceTo

manhattanDistanceTo: (v: Vector2Like) => number;

Computes the Manhattan length (distance) from this vector to the given vector v
see Wikipedia: Taxicab Geometry

method manhattanLength

manhattanLength: () => number;

Computes the Manhattan length of this vector.
see Wikipedia: Taxicab Geometry

method max

max: (v: Vector2Like) => this;

If this vector's x or y value is less than v's x or y value, replace that value with the corresponding max value.

method min

min: (v: Vector2Like) => this;

If this vector's x or y value is greater than v's x or y value, replace that value with the corresponding min value.

method multiply

multiply: (v: Vector2Like) => this;

Multiplies this vector by v.

method multiplyScalar

multiplyScalar: (scalar: number) => this;

Multiplies this vector by scalar s.

method negate

negate: () => this;

Inverts this vector.

method normalize

normalize: () => this;

Normalizes this vector.

method random

random: () => this;

Sets this vector's x and y from Math.random

method rotateAround

rotateAround: (center: Vector2Like, angle: number) => this;

Rotates the vector around center by angle radians.
Parameter center
the point around which to rotate.
Parameter angle
the angle to rotate, in radians.

method round

round: () => this;

The components of the vector are rounded to the nearest integer value.

method roundToZero

roundToZero: () => this;

The components of the vector are rounded towards zero (up if negative, down if positive) to an integer value.

method set

set: (x: number, y: number) => this;

Sets value of this vector.

method setComponent

setComponent: (index: number, value: number) => this;

Sets a component of this vector.

method setLength

setLength: (length: number) => this;

Normalizes this vector and multiplies it by l.

method setScalar

setScalar: (scalar: number) => this;

Sets the x and y values of this vector both equal to scalar.

method setX

setX: (x: number) => this;

Sets X component of this vector.

method setY

setY: (y: number) => this;

Sets Y component of this vector.

method sub

sub: (v: Vector2Like) => this;

Subtracts v from this vector.

method subScalar

subScalar: (s: number) => this;

Subtracts s from this vector's x and y components.

method subVectors

subVectors: (a: Vector2Like, b: Vector2Like) => this;

Sets this vector to a - b.

method toArray

toArray: {
    (array?: number[], offset?: number): number[];
    (array?: Vector2Tuple, offset?: 0): Vector2Tuple;
    (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
};

Returns an array [x, y], or copies x and y into the provided array.
Parameter array
(optional) array to store the vector to. If this is not provided, a new array will be created.
Parameter offset
(optional) optional offset into the array. The created or provided array.
Copies x and y into the provided array-like.
Parameter array
array-like to store the vector to.
Parameter offset
(optional) optional offset into the array. The provided array-like.

class Vector3

class Vector3 {}

3D vector.
see https://github.com/mrdoob/three.js/blob/master/src/math/Vector3.js
Example 1
const a = new THREE.Vector3( 1, 0, 0 ); const b = new THREE.Vector3( 0, 1, 0 ); const c = new THREE.Vector3(); c.crossVectors( a, b );

constructor

constructor(x?: number, y?: number, z?: number);

property isVector3

readonly isVector3: boolean;

property x

x: number;

property y

y: number;

property z

z: number;

method [Symbol.iterator]

[Symbol.iterator]: () => Iterator<number>;

Iterating through a Vector3 instance will yield its components (x, y, z) in the corresponding order.

method add

add: (v: Vector3Like) => this;

Adds v to this vector.

method addScalar

addScalar: (s: number) => this;

method addScaledVector

addScaledVector: (v: Vector3, s: number) => this;

method addVectors

addVectors: (a: Vector3Like, b: Vector3Like) => this;

Sets this vector to a + b.

method angleTo

angleTo: (v: Vector3) => number;

method applyAxisAngle

applyAxisAngle: (axis: Vector3, angle: number) => this;

method applyEuler

applyEuler: (euler: Euler) => this;

method applyMatrix3

applyMatrix3: (m: Matrix3) => this;

method applyMatrix4

applyMatrix4: (m: Matrix4) => this;

method applyNormalMatrix

applyNormalMatrix: (m: Matrix3) => this;

method applyQuaternion

applyQuaternion: (q: QuaternionLike) => this;

method ceil

ceil: () => this;

method clamp

clamp: (min: Vector3Like, max: Vector3Like) => this;

method clampLength

clampLength: (min: number, max: number) => this;

method clampScalar

clampScalar: (min: number, max: number) => this;

method clone

clone: () => this;

Clones this vector.

method copy

copy: (v: Vector3Like) => this;

Copies value of v to this vector.

method cross

cross: (v: Vector3Like) => this;

Sets this vector to cross product of itself and v.

method crossVectors

crossVectors: (a: Vector3Like, b: Vector3Like) => this;

Sets this vector to cross product of a and b.

method distanceTo

distanceTo: (v: Vector3Like) => number;

Computes distance of this vector to v.

method distanceToSquared

distanceToSquared: (v: Vector3Like) => number;

Computes squared distance of this vector to v.

method divide

divide: (v: Vector3Like) => this;

method divideScalar

divideScalar: (s: number) => this;

Divides this vector by scalar s. Set vector to ( 0, 0, 0 ) if s == 0.

method dot

dot: (v: Vector3Like) => number;

Computes dot product of this vector and v.

method equals

equals: (v: Vector3Like) => boolean;

Checks for strict equality of this vector and v.

method floor

floor: () => this;

method fromArray

fromArray: (array: number[] | ArrayLike<number>, offset?: number) => this;

Sets this vector's x, y and z value from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array. Default is 0.

method fromBufferAttribute

fromBufferAttribute: (
    attribute: BufferAttribute | InterleavedBufferAttribute,
    index: number
) => this;

method getComponent

getComponent: (index: number) => number;

method length

length: () => number;

Computes length of this vector.

method lengthSq

lengthSq: () => number;

Computes squared length of this vector.

method lerp

lerp: (v: Vector3Like, alpha: number) => this;

method lerpVectors

lerpVectors: (v1: Vector3Like, v2: Vector3Like, alpha: number) => this;

method manhattanDistanceTo

manhattanDistanceTo: (v: Vector3Like) => number;

Computes the Manhattan length (distance) from this vector to the given vector v
see Wikipedia: Taxicab Geometry

method manhattanLength

manhattanLength: () => number;

Computes the Manhattan length of this vector.
see Wikipedia: Taxicab Geometry

method max

max: (v: Vector3Like) => this;

method min

min: (v: Vector3Like) => this;

method multiply

multiply: (v: Vector3Like) => this;

method multiplyScalar

multiplyScalar: (s: number) => this;

Multiplies this vector by scalar s.

method multiplyVectors

multiplyVectors: (a: Vector3Like, b: Vector3Like) => this;

method negate

negate: () => this;

Inverts this vector.

method normalize

normalize: () => this;

Normalizes this vector.

method project

project: (camera: Camera) => this;

method projectOnPlane

projectOnPlane: (planeNormal: Vector3) => this;

method projectOnVector

projectOnVector: (v: Vector3) => this;

method random

random: () => this;

Sets this vector's x, y and z from Math.random

method randomDirection

randomDirection: () => this;

method reflect

reflect: (vector: Vector3Like) => this;

method round

round: () => this;

method roundToZero

roundToZero: () => this;

method set

set: (x: number, y: number, z: number) => this;

Sets value of this vector.

method setComponent

setComponent: (index: number, value: number) => this;

method setFromColor

setFromColor: (color: RGB) => this;

Sets this vector's x, y and z components from the r, g, and b components of the specified color.

method setFromCylindrical

setFromCylindrical: (s: Cylindrical) => this;

method setFromCylindricalCoords

setFromCylindricalCoords: (radius: number, theta: number, y: number) => this;

method setFromEuler

setFromEuler: (e: Euler) => this;

Sets this vector's x, y and z components from the x, y, and z components of the specified .

method setFromMatrix3Column

setFromMatrix3Column: (matrix: Matrix3, index: number) => this;

method setFromMatrixColumn

setFromMatrixColumn: (matrix: Matrix4, index: number) => this;

method setFromMatrixPosition

setFromMatrixPosition: (m: Matrix4) => this;

method setFromMatrixScale

setFromMatrixScale: (m: Matrix4) => this;

method setFromSpherical

setFromSpherical: (s: Spherical) => this;

method setFromSphericalCoords

setFromSphericalCoords: (r: number, phi: number, theta: number) => this;

method setLength

setLength: (l: number) => this;

Normalizes this vector and multiplies it by l.

method setScalar

setScalar: (scalar: number) => this;

Sets all values of this vector.

method setX

setX: (x: number) => this;

Sets x value of this vector.

method setY

setY: (y: number) => this;

Sets y value of this vector.

method setZ

setZ: (z: number) => this;

Sets z value of this vector.

method sub

sub: (v: Vector3Like) => this;

Subtracts v from this vector.

method subScalar

subScalar: (s: number) => this;

method subVectors

subVectors: (a: Vector3Like, b: Vector3Like) => this;

Sets this vector to a - b.

method toArray

toArray: {
    (array?: number[], offset?: number): number[];
    (array?: Vector3Tuple, offset?: 0): Vector3Tuple;
    (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
};

Returns an array [x, y, z], or copies x, y and z into the provided array.
Parameter array
(optional) array to store the vector to. If this is not provided, a new array will be created.
Parameter offset
(optional) optional offset into the array. The created or provided array.
Copies x, y and z into the provided array-like.
Parameter array
array-like to store the vector to.
Parameter offset
(optional) optional offset into the array-like. The provided array-like.

method transformDirection

transformDirection: (m: Matrix4) => this;

method unproject

unproject: (camera: Camera) => this;

class Vector4

class Vector4 {}

4D vector.

constructor

constructor(x?: number, y?: number, z?: number, w?: number);

property height

height: number;

property isVector4

readonly isVector4: boolean;

property w

w: number;

property width

width: number;

property x

x: number;

property y

y: number;

property z

z: number;

method [Symbol.iterator]

[Symbol.iterator]: () => Iterator<number>;

Iterating through a Vector4 instance will yield its components (x, y, z, w) in the corresponding order.

method add

add: (v: Vector4Like) => this;

Adds v to this vector.

method addScalar

addScalar: (scalar: number) => this;

method addScaledVector

addScaledVector: (v: Vector4Like, s: number) => this;

method addVectors

addVectors: (a: Vector4Like, b: Vector4Like) => this;

Sets this vector to a + b.

method applyMatrix4

applyMatrix4: (m: Matrix4) => this;

method ceil

ceil: () => this;

method clamp

clamp: (min: Vector4Like, max: Vector4Like) => this;

method clampScalar

clampScalar: (min: number, max: number) => this;

method clone

clone: () => this;

Clones this vector.

method copy

copy: (v: Vector4Like) => this;

Copies value of v to this vector.

method divide

divide: (v: Vector4Like) => this;

method divideScalar

divideScalar: (s: number) => this;

Divides this vector by scalar s. Set vector to ( 0, 0, 0 ) if s == 0.

method dot

dot: (v: Vector4Like) => number;

Computes dot product of this vector and v.

method equals

equals: (v: Vector4Like) => boolean;

Checks for strict equality of this vector and v.

method floor

floor: () => this;

method fromArray

fromArray: (array: number[] | ArrayLike<number>, offset?: number) => this;

Sets this vector's x, y, z and w value from the provided array or array-like.
Parameter array
the source array or array-like.
Parameter offset
(optional) offset into the array. Default is 0.

method fromBufferAttribute

fromBufferAttribute: (attribute: BufferAttribute, index: number) => this;

method getComponent

getComponent: (index: number) => number;

method length

length: () => number;

Computes length of this vector.

method lengthSq

lengthSq: () => number;

Computes squared length of this vector.

method lerp

lerp: (v: Vector4Like, alpha: number) => this;

Linearly interpolate between this vector and v with alpha factor.

method lerpVectors

lerpVectors: (v1: Vector4Like, v2: Vector4Like, alpha: number) => this;

method manhattanLength

manhattanLength: () => number;

Computes the Manhattan length of this vector.
see Wikipedia: Taxicab Geometry

method max

max: (v: Vector4Like) => this;

method min

min: (v: Vector4Like) => this;

method multiply

multiply: (v: Vector4Like) => this;

method multiplyScalar

multiplyScalar: (s: number) => this;

Multiplies this vector by scalar s.

method negate

negate: () => this;

Inverts this vector.

method normalize

normalize: () => this;

Normalizes this vector.

method random

random: () => this;

Sets this vector's x, y, z and w from Math.random

method round

round: () => this;

method roundToZero

roundToZero: () => this;

method set

set: (x: number, y: number, z: number, w: number) => this;

Sets value of this vector.

method setAxisAngleFromQuaternion

setAxisAngleFromQuaternion: (q: QuaternionLike) => this;

http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToAngle/index.htm
Parameter q
is assumed to be normalized

method setAxisAngleFromRotationMatrix

setAxisAngleFromRotationMatrix: (m: Matrix4) => this;

http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToAngle/index.htm
Parameter m
assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)

method setComponent

setComponent: (index: number, value: number) => this;

method setFromMatrixPosition

setFromMatrixPosition: (m: Matrix4) => this;

Sets this vector to the position elements of the [transformation matrix]https://en.wikipedia.org/wiki/Transformation_matrix m.

method setLength

setLength: (length: number) => this;

Normalizes this vector and multiplies it by l.

method setScalar

setScalar: (scalar: number) => this;

Sets all values of this vector.

method setW

setW: (w: number) => this;

Sets w component of this vector.

method setX

setX: (x: number) => this;

Sets X component of this vector.

method setY

setY: (y: number) => this;

Sets Y component of this vector.

method setZ

setZ: (z: number) => this;

Sets Z component of this vector.

method sub

sub: (v: Vector4Like) => this;

Subtracts v from this vector.

method subScalar

subScalar: (s: number) => this;

method subVectors

subVectors: (a: Vector4Like, b: Vector4Like) => this;

Sets this vector to a - b.

method toArray

toArray: {
    (array?: number[], offset?: number): number[];
    (array?: Vector4Tuple, offset?: 0): Vector4Tuple;
    (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
};

Returns an array [x, y, z, w], or copies x, y, z and w into the provided array.
Parameter array
(optional) array to store the vector to. If this is not provided, a new array will be created.
Parameter offset
(optional) optional offset into the array. The created or provided array.
Copies x, y, z and w into the provided array-like.
Parameter array
array-like to store the vector to.
Parameter offset
(optional) optional offset into the array-like. The provided array-like.

class VectorKeyframeTrack

class VectorKeyframeTrack extends KeyframeTrack {}

A track for vector keyframe values.

constructor

constructor(
    name: string,
    times: ArrayLike<number>,
    values: ArrayLike<number>,
    interpolation?: InterpolationModes
);

Constructs a new vector keyframe track.
Parameter name
The keyframe track's name.
Parameter times
A list of keyframe times.
Parameter values
A list of keyframe values.
Parameter interpolation
The interpolation type.

class VideoFrameTexture

class VideoFrameTexture extends VideoTexture<VideoFrame | {}> {}

constructor

constructor(
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    format?: PixelFormat,
    type?: TextureDataType,
    anisotropy?: number
);

method setFrame

setFrame: (frame: unknown) => void;

class VideoTexture

class VideoTexture<TVideo = HTMLVideoElement> extends Texture<TVideo> {}

Creates a texture for use with a video.
Remarks
Note: After the initial use of a texture, the video cannot be changed Instead, call .dispose() on the texture and instantiate a new one.
Example 1
// assuming you have created a HTML video element with id="video" const video = document.getElementById('video'); const texture = new THREE.VideoTexture(video);
See Also
- Example: materials / video
- Example: materials / video / webcam
- Example: video / kinect
- Example: video / panorama / equirectangular
- Example: vr / video
- Official Documentation
- Source

constructor

constructor(
    video: {},
    mapping?: Mapping,
    wrapS?: Wrapping,
    wrapT?: Wrapping,
    magFilter?: MagnificationTextureFilter,
    minFilter?: MinificationTextureFilter,
    format?: PixelFormat,
    type?: TextureDataType,
    anisotropy?: number
);

Create a new instance of VideoTexture
Parameter video
The video element to use as the texture.
Parameter mapping
See .mapping. Default THREE.Texture.DEFAULT_MAPPING
Parameter wrapS
See .wrapS. Default THREE.ClampToEdgeWrapping
Parameter wrapT
See .wrapT. Default THREE.ClampToEdgeWrapping
Parameter magFilter
See .magFilter. Default THREE.LinearFilter
Parameter minFilter
See .minFilter. Default THREE.LinearFilter
Parameter format
See .format. Default THREE.RGBAFormat
Parameter type
See . Default THREE.UnsignedByteType
Parameter anisotropy
See .anisotropy. Default THREE.Texture.DEFAULT_ANISOTROPY

property generateMipmaps

generateMipmaps: boolean;

Modifiers
- @override

property isVideoTexture

readonly isVideoTexture: boolean;

Read-only flag to check if a given object is of type VideoTexture.
Remarks
This is a _constant_ value

property magFilter

magFilter: MagnificationTextureFilter;

Modifiers
- @override

property minFilter

minFilter: MinificationTextureFilter;

Modifiers
- @override

method update

update: () => void;

This is called automatically and sets .needsUpdate to true every time a new frame is available.

class WebGL3DRenderTarget

class WebGL3DRenderTarget extends WebGLRenderTarget {}

Represents a three-dimensional render target.

constructor

constructor(
    width?: number,
    height?: number,
    depth?: number,
    options?: RenderTargetOptions
);

Creates a new WebGL3DRenderTarget.
Parameter width
the width of the render target, in pixels. Default is 1.
Parameter height
the height of the render target, in pixels. Default is 1.
Parameter depth
the depth of the render target. Default is 1.
Parameter options
optional object that holds texture parameters for an auto-generated target texture and depthBuffer/stencilBuffer booleans. See WebGLRenderTarget for details.

property isWebGL3DRenderTarget

readonly isWebGL3DRenderTarget: boolean;

property texture

texture: Data3DTexture;

The texture property is overwritten with an instance of Data3DTexture.

property textures

textures: Data3DTexture[];

class WebGLArrayRenderTarget

class WebGLArrayRenderTarget extends WebGLRenderTarget {}

This type of render target represents an array of textures.

constructor

constructor(
    width?: number,
    height?: number,
    depth?: number,
    options?: RenderTargetOptions
);

Creates a new WebGLArrayRenderTarget.
Parameter width
the width of the render target, in pixels. Default is 1.
Parameter height
the height of the render target, in pixels. Default is 1.
Parameter depth
the depth/layer count of the render target. Default is 1.
Parameter options
optional object that holds texture parameters for an auto-generated target texture and depthBuffer/stencilBuffer booleans. See WebGLRenderTarget for details.

property isWebGLArrayRenderTarget

readonly isWebGLArrayRenderTarget: boolean;

property texture

texture: DataArrayTexture;

The texture property is overwritten with an instance of DataArrayTexture.

property textures

textures: DataArrayTexture[];

class WebGLAttributes

class WebGLAttributes {}

constructor

constructor(gl: WebGLRenderingContext | WebGL2RenderingContext);

method get

get: (
    attribute: BufferAttribute | InterleavedBufferAttribute | GLBufferAttribute
) =>
    | {
          buffer: WebGLBuffer;
          type: number;
          bytesPerElement: number;
          version: number;
          size: number;
      }
    | undefined;

method remove

remove: (
    attribute: BufferAttribute | InterleavedBufferAttribute | GLBufferAttribute
) => void;

method update

update: (
    attribute: BufferAttribute | InterleavedBufferAttribute | GLBufferAttribute,
    bufferType: number
) => void;

class WebGLBindingStates

class WebGLBindingStates {}

constructor

constructor(gl: WebGLRenderingContext, attributes: WebGLAttributes);

method disableUnusedAttributes

disableUnusedAttributes: () => void;

method dispose

dispose: () => void;

method enableAttribute

enableAttribute: (attribute: number) => void;

method initAttributes

initAttributes: () => void;

method releaseStatesOfGeometry

releaseStatesOfGeometry: () => void;

method releaseStatesOfProgram

releaseStatesOfProgram: () => void;

method reset

reset: () => void;

method resetDefaultState

resetDefaultState: () => void;

method setup

setup: (
    object: Object3D,
    material: Material,
    program: WebGLProgram,
    geometry: BufferGeometry,
    index: BufferAttribute
) => void;

class WebGLBufferRenderer

class WebGLBufferRenderer {}

constructor

constructor(
    gl: WebGLRenderingContext,
    extensions: WebGLExtensions,
    info: WebGLInfo
);

property render

render: (start: any, count: number) => void;

property renderInstances

renderInstances: (start: any, count: number, primcount: number) => void;

property renderMultiDraw

renderMultiDraw: (
    starts: Int32Array,
    counts: Int32Array,
    drawCount: number
) => void;

property renderMultiDrawInstances

renderMultiDrawInstances: (
    starts: Int32Array,
    counts: Int32Array,
    drawCount: number,
    primcount: Int32Array
) => void;

property setMode

setMode: (value: any) => void;

class WebGLCapabilities

class WebGLCapabilities {}

constructor

constructor(
    gl: WebGLRenderingContext,
    extensions: any,
    parameters: WebGLCapabilitiesParameters
);

property getMaxAnisotropy

getMaxAnisotropy: () => number;

property getMaxPrecision

getMaxPrecision: (precision: string) => string;

property isWebGL2

readonly isWebGL2: boolean;

property logarithmicDepthBuffer

logarithmicDepthBuffer: boolean;

property maxAttributes

maxAttributes: number;

property maxCubemapSize

maxCubemapSize: number;

property maxFragmentUniforms

maxFragmentUniforms: number;

property maxSamples

maxSamples: number;

property maxTextures

maxTextures: number;

property maxTextureSize

maxTextureSize: number;

property maxVaryings

maxVaryings: number;

property maxVertexTextures

maxVertexTextures: number;

property maxVertexUniforms

maxVertexUniforms: number;

property precision

precision: string;

property reversedDepthBuffer

reversedDepthBuffer: boolean;

property samples

samples: number;

property textureFormatReadable

textureFormatReadable: (textureFormat: PixelFormat) => boolean;

property textureTypeReadable

textureTypeReadable: (textureType: TextureDataType) => boolean;

class WebGLClipping

class WebGLClipping {}

constructor

constructor(properties: WebGLProperties);

property numIntersection

numIntersection: number;

property numPlanes

numPlanes: number;

property uniform

uniform: { value: any; needsUpdate: boolean };

method beginShadows

beginShadows: () => void;

method endShadows

endShadows: () => void;

method init

init: (planes: any[], enableLocalClipping: boolean) => boolean;

method setGlobalState

setGlobalState: (planes: Plane[], camera: Camera) => void;

method setState

setState: (material: Material, camera: Camera, useCache: boolean) => void;

class WebGLColorBuffer

class WebGLColorBuffer {}

method reset

reset: () => void;

method setClear

setClear: (
    r: number,
    g: number,
    b: number,
    a: number,
    premultipliedAlpha: boolean
) => void;

method setLocked

setLocked: (lock: boolean) => void;

method setMask

setMask: (colorMask: boolean) => void;

class WebGLCubeMaps

class WebGLCubeMaps {}

constructor

constructor(renderer: WebGLRenderer);

method dispose

dispose: () => void;

method get

get: (texture: any) => any;

class WebGLCubeRenderTarget

class WebGLCubeRenderTarget extends WebGLRenderTarget {}

constructor

constructor(size?: number, options?: RenderTargetOptions);

property texture

texture: CubeTexture<unknown>;

property textures

textures: CubeTexture<unknown>[];

method clear

clear: (
    renderer: WebGLRenderer,
    color: boolean,
    depth: boolean,
    stencil: boolean
) => void;

method fromEquirectangularTexture

fromEquirectangularTexture: (renderer: WebGLRenderer, texture: Texture) => this;

class WebGLCubeUVMaps

class WebGLCubeUVMaps {}

constructor

constructor(renderer: WebGLRenderer);

method dispose

dispose: () => void;

method get

get: <T>(texture: T) => T extends Texture ? Texture : T;

class WebGLDepthBuffer

class WebGLDepthBuffer {}

constructor

constructor();

method getReversed

getReversed: () => boolean;

method reset

reset: () => void;

method setClear

setClear: (depth: number) => void;

method setFunc

setFunc: (depthFunc: DepthModes) => void;

method setLocked

setLocked: (lock: boolean) => void;

method setMask

setMask: (depthMask: boolean) => void;

method setReversed

setReversed: (value: boolean) => void;

method setTest

setTest: (depthTest: boolean) => void;

class WebGLExtensions

class WebGLExtensions {}

constructor

constructor(gl: WebGLRenderingContext);

method get

get: (name: string) => any;

method has

has: (name: string) => boolean;

method init

init: () => void;

class WebGLGeometries

class WebGLGeometries {}

constructor

constructor(
    gl: WebGLRenderingContext,
    attributes: WebGLAttributes,
    info: WebGLInfo
);

method get

get: (object: Object3D, geometry: BufferGeometry) => BufferGeometry;

method getWireframeAttribute

getWireframeAttribute: (geometry: BufferGeometry) => BufferAttribute;

method update

update: (geometry: BufferGeometry) => void;

class WebGLIndexedBufferRenderer

class WebGLIndexedBufferRenderer {}

constructor

constructor(gl: WebGLRenderingContext, extensions: any, info: any);

property render

render: (start: any, count: number) => void;

property renderInstances

renderInstances: (start: any, count: number, primcount: number) => void;

property renderMultiDraw

renderMultiDraw: (
    starts: Int32Array,
    counts: Int32Array,
    drawCount: number
) => void;

property renderMultiDrawInstances

renderMultiDrawInstances: (
    starts: Int32Array,
    counts: Int32Array,
    drawCount: number,
    primcount: Int32Array
) => void;

property setIndex

setIndex: (index: any) => void;

property setMode

setMode: (value: any) => void;

class WebGLInfo

class WebGLInfo {}

An object with a series of statistical information about the graphics board memory and the rendering process.

constructor

constructor(gl: WebGLRenderingContext);

property autoReset

autoReset: boolean;

true

property memory

memory: { geometries: number; textures: number };

{ geometries: 0, textures: 0 }

property programs

programs: WebGLProgram[];

null

property render

render: {
    calls: number;
    frame: number;
    lines: number;
    points: number;
    triangles: number;
};

{ frame: 0, calls: 0, triangles: 0, points: 0, lines: 0 }

method reset

reset: () => void;

method update

update: (count: number, mode: number, instanceCount: number) => void;

class WebGLLights

class WebGLLights {}

constructor

constructor(extensions: WebGLExtensions);

property state

state: WebGLLightsState;

method get

get: (light: any) => any;

method setup

setup: (lights: any) => void;

method setupView

setupView: (lights: any, camera: any) => void;

class WebGLObjects

class WebGLObjects {}

constructor

constructor(
    gl: WebGLRenderingContext,
    geometries: any,
    attributes: any,
    info: any
);

method dispose

dispose: () => void;

method update

update: (object: any) => any;

class WebGLProgram

class WebGLProgram {}

constructor

constructor(renderer: WebGLRenderer, cacheKey: string, parameters: {});

property attributes

attributes: any;

Deprecated
Use instead.

property cacheKey

cacheKey: string;

property fragmentShader

fragmentShader: WebGLShader;

property id

id: number;

property name

name: string;

property program

program: any;

property uniforms

uniforms: any;

Deprecated
Use instead.

property usedTimes

usedTimes: number;

property vertexShader

vertexShader: WebGLShader;

method destroy

destroy: () => void;

method getAttributes

getAttributes: () => any;

method getUniforms

getUniforms: () => WebGLUniforms;

class WebGLPrograms

class WebGLPrograms {}

constructor

constructor(
    renderer: WebGLRenderer,
    cubemaps: WebGLCubeMaps,
    extensions: WebGLExtensions,
    capabilities: WebGLCapabilities,
    bindingStates: WebGLBindingStates,
    clipping: WebGLClipping
);

property programs

programs: WebGLProgram[];

method acquireProgram

acquireProgram: (
    parameters: WebGLProgramParametersWithUniforms,
    cacheKey: string
) => WebGLProgram;

method getParameters

getParameters: (
    material: Material,
    lights: WebGLLightsState,
    shadows: Light[],
    scene: Scene,
    object: Object3D
) => WebGLProgramParameters;

method getProgramCacheKey

getProgramCacheKey: (parameters: WebGLProgramParameters) => string;

method getUniforms

getUniforms: (material: Material) => { [uniform: string]: IUniform<any> };

method releaseProgram

releaseProgram: (program: WebGLProgram) => void;

class WebGLProperties

class WebGLProperties {}

constructor

constructor();

property dispose

dispose: () => void;

property get

get: (object: unknown) => unknown;

property has

has: (object: unknown) => boolean;

property remove

remove: (object: unknown) => void;

property update

update: (object: unknown, key: unknown, value: unknown) => unknown;

class WebGLRenderer

class WebGLRenderer {}

The WebGL renderer displays your beautifully crafted scenes using WebGL, if your device supports it. This renderer has way better performance than CanvasRenderer.
see src/renderers/WebGLRenderer.js

constructor

constructor(parameters?: WebGLRendererParameters);

parameters is an optional object with properties defining the renderer's behavior. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.

property autoClear

autoClear: boolean;

Defines whether the renderer should automatically clear its output before rendering. true

property autoClearColor

autoClearColor: boolean;

If autoClear is true, defines whether the renderer should clear the color buffer. Default is true. true

property autoClearDepth

autoClearDepth: boolean;

If autoClear is true, defines whether the renderer should clear the depth buffer. Default is true. true

property autoClearStencil

autoClearStencil: boolean;

If autoClear is true, defines whether the renderer should clear the stencil buffer. Default is true. true

property capabilities

capabilities: WebGLCapabilities;

property clippingPlanes

clippingPlanes: Plane[];

[]

property compile

compile: (
    scene: Object3D,
    camera: Camera,
    targetScene?: Scene | null
) => Set<Material>;

Compiles all materials in the scene with the camera. This is useful to precompile shaders before the first rendering. If you want to add a 3D object to an existing scene, use the third optional parameter for applying the target scene. Note that the (target) scene's lighting should be configured before calling this method.

property compileAsync

compileAsync: (
    scene: Object3D,
    camera: Camera,
    targetScene?: Scene | null
) => Promise<Object3D>;

Asynchronous version of compile(). The method returns a Promise that resolves when the given scene can be rendered without unnecessary stalling due to shader compilation. This method makes use of the KHR_parallel_shader_compile WebGL extension.

property coordinateSystem

readonly coordinateSystem: number;

property debug

debug: WebGLDebug;

Debug configurations. { checkShaderErrors: true }

property domElement

domElement: HTMLCanvasElement;

A Canvas where the renderer draws its output. This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page. document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' )

property extensions

extensions: WebGLExtensions;

property info

info: WebGLInfo;

property localClippingEnabled

localClippingEnabled: boolean;

false

property outputColorSpace

outputColorSpace: string;

Color space used for output to HTMLCanvasElement. Supported values are SRGBColorSpace and LinearSRGBColorSpace. THREE.SRGBColorSpace.

property properties

properties: WebGLProperties;

property renderLists

renderLists: WebGLRenderLists;

property shadowMap

shadowMap: WebGLShadowMap;

property shadowMapCullFace

shadowMapCullFace: CullFace;

Deprecated
Use WebGLShadowMap#cullFace.shadowMap.cullFace instead.

property shadowMapEnabled

shadowMapEnabled: boolean;

Deprecated
Use WebGLShadowMap#enabled.shadowMap.enabled instead.

property shadowMapType

shadowMapType: ShadowMapType;

Deprecated
Use instead.

property sortObjects

sortObjects: boolean;

Defines whether the renderer should sort objects. Default is true. true

property state

state: WebGLState;

property toneMapping

toneMapping: ToneMapping;

THREE.NoToneMapping

property toneMappingExposure

toneMappingExposure: number;

property transmissionResolutionScale

transmissionResolutionScale: number;

The normalized resolution scale for the transmission render target, measured in percentage of viewport dimensions. Lowering this value can result in significant improvements to MeshPhysicalMaterial transmission performance. Default is 1.

property vr

vr: boolean;

Deprecated
Use WebGLRenderer#xr.xr instead.

property xr

xr: WebXRManager;

method animate

animate: (callback: () => void) => void;

Deprecated
Use instead.

method clear

clear: (color?: boolean, depth?: boolean, stencil?: boolean) => void;

Tells the renderer to clear its color, depth or stencil drawing buffer(s). Arguments default to true

method clearColor

clearColor: () => void;

method clearDepth

clearDepth: () => void;

method clearStencil

clearStencil: () => void;

method clearTarget

clearTarget: (
    renderTarget: WebGLRenderTarget,
    color: boolean,
    depth: boolean,
    stencil: boolean
) => void;

method copyFramebufferToTexture

copyFramebufferToTexture: (
    texture: Texture,
    position?: Vector2 | null,
    level?: number
) => void;

Copies a region of the currently bound framebuffer into the selected mipmap level of the selected texture. This region is defined by the size of the destination texture's mip level, offset by the input position.
Parameter texture
Specifies the destination texture.
Parameter position
Specifies the pixel offset from which to copy out of the framebuffer.
Parameter level
Specifies the destination mipmap level of the texture.

method copyTextureToTexture

copyTextureToTexture: (
    srcTexture: Texture,
    dstTexture: Texture,
    srcRegion?: Box2 | Box3 | null,
    dstPosition?: Vector2 | Vector3 | null,
    srcLevel?: number,
    dstLevel?: number
) => void;

Copies the pixels of a texture in the bounds [srcRegion]Box3 in the destination texture starting from the given position. 2D Texture, 3D Textures, or a mix of the two can be used as source and destination texture arguments for copying between layers of 3d textures
The depthTexture and texture property of render targets are supported as well.
When using render target textures as srcTexture and dstTexture, you must make sure both render targets are initialized e.g. via ().
Parameter srcTexture
Specifies the source texture.
Parameter dstTexture
Specifies the destination texture.
Parameter srcRegion
Specifies the bounds
Parameter dstPosition
Specifies the pixel offset into the dstTexture where the copy will occur.
Parameter srcLevel
Specifies the source mipmap level of the texture.
Parameter dstLevel
Specifies the destination mipmap level of the texture.

method dispose

dispose: () => void;

method enableScissorTest

enableScissorTest: (boolean: any) => any;

Deprecated
Use instead.

method forceContextLoss

forceContextLoss: () => void;

method forceContextRestore

forceContextRestore: () => void;

method getActiveCubeFace

getActiveCubeFace: () => number;

Returns the current active cube face.

method getActiveMipmapLevel

getActiveMipmapLevel: () => number;

Returns the current active mipmap level.

method getClearAlpha

getClearAlpha: () => number;

Returns a float with the current clear alpha. Ranges from 0 to 1.

method getClearColor

getClearColor: (target: Color) => Color;

Returns a THREE.Color instance with the current clear color.

method getContext

getContext: () => WebGLRenderingContext | WebGL2RenderingContext;

Return the WebGL context.

method getContextAttributes

getContextAttributes: () => any;

method getCurrentRenderTarget

getCurrentRenderTarget: () => WebGLRenderTarget | null;

Deprecated
Use instead.

method getCurrentViewport

getCurrentViewport: (target: Vector4) => Vector4;

method getDrawingBufferSize

getDrawingBufferSize: (target: Vector2) => Vector2;

method getMaxAnisotropy

getMaxAnisotropy: () => number;

Deprecated
Use instead.

method getPixelRatio

getPixelRatio: () => number;

method getPrecision

getPrecision: () => string;

Deprecated
Use WebGLCapabilities#precision.capabilities.precision instead.

method getRenderTarget

getRenderTarget: () => WebGLRenderTarget | null;

Returns the current render target. If no render target is set, null is returned.

method getScissor

getScissor: (target: Vector4) => Vector4;

Copies the scissor area into target.

method getScissorTest

getScissorTest: () => boolean;

Returns true if scissor test is enabled; returns false otherwise.

method getSize

getSize: (target: Vector2) => Vector2;

method getViewport

getViewport: (target: Vector4) => Vector4;

Copies the viewport into target.

method initRenderTarget

initRenderTarget: (target: WebGLRenderTarget) => void;

Initializes the given WebGLRenderTarget memory. Useful for initializing a render target so data can be copied into it using WebGLRenderer.copyTextureToTexture before it has been rendered to.
Parameter target

method initTexture

initTexture: (texture: Texture) => void;

Initializes the given texture. Can be used to preload a texture rather than waiting until first render (which can cause noticeable lags due to decode and GPU upload overhead).
Parameter texture
The texture to Initialize.

method readRenderTargetPixels

readRenderTargetPixels: (
    renderTarget: WebGLRenderTarget | WebGLRenderTarget<Texture[]>,
    x: number,
    y: number,
    width: number,
    height: number,
    buffer: TypedArray,
    activeCubeFaceIndex?: number,
    textureIndex?: number
) => void;

method readRenderTargetPixelsAsync

readRenderTargetPixelsAsync: (
    renderTarget: WebGLRenderTarget | WebGLRenderTarget<Texture[]>,
    x: number,
    y: number,
    width: number,
    height: number,
    buffer: TypedArray,
    activeCubeFaceIndex?: number,
    textureIndex?: number
) => Promise<TypedArray>;

method render

render: (scene: Object3D, camera: Camera) => void;

Render a scene or an object using a camera. The render is done to a previously specified WebGLRenderTarget#renderTarget.renderTarget set by calling WebGLRenderer#setRenderTarget.setRenderTarget or to the canvas as usual.
By default render buffers are cleared before rendering but you can prevent this by setting the property to false. If you want to prevent only certain buffers being cleared you can set either the , or properties to false. To forcibly clear one ore more buffers call WebGLRenderer#clear.clear.

method renderBufferDirect

renderBufferDirect: (
    camera: Camera,
    scene: Scene,
    geometry: BufferGeometry,
    material: Material,
    object: Object3D,
    geometryGroup: any
) => void;

method resetGLState

resetGLState: () => void;

Deprecated
Use instead.

method resetState

resetState: () => void;

Can be used to reset the internal WebGL state.

method setAnimationLoop

setAnimationLoop: (callback: XRFrameRequestCallback | null) => void;

A build in function that can be used instead of requestAnimationFrame. For WebXR projects this function must be used.
Parameter callback
The function will be called every available frame. If null is passed it will stop any already ongoing animation.

method setClearAlpha

setClearAlpha: (alpha: number) => void;

method setClearColor

setClearColor: (color: ColorRepresentation, alpha?: number) => void;

Sets the clear color, using color for the color and alpha for the opacity.

method setDrawingBufferSize

setDrawingBufferSize: (
    width: number,
    height: number,
    pixelRatio: number
) => void;

method setEffects

setEffects: (effects: Effect[] | null) => void;

method setOpaqueSort

setOpaqueSort: (method: (a: any, b: any) => number) => void;

Sets the custom opaque sort function for the WebGLRenderLists. Pass null to use the default painterSortStable function.

method setPixelRatio

setPixelRatio: (value: number) => void;

method setRenderTarget

setRenderTarget: (
    renderTarget: WebGLRenderTarget | WebGLRenderTarget<Texture[]> | null,
    activeCubeFace?: number,
    activeMipmapLevel?: number
) => void;

Sets the active render target.
Parameter renderTarget
The that needs to be activated. When null is given, the canvas is set as the active render target instead.
Parameter activeCubeFace
Specifies the active cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) of WebGLCubeRenderTarget.
Parameter activeMipmapLevel
Specifies the active mipmap level.

method setScissor

setScissor: (
    x: Vector4 | number,
    y?: number,
    width?: number,
    height?: number
) => void;

Sets the scissor area from (x, y) to (x + width, y + height).

method setScissorTest

setScissorTest: (enable: boolean) => void;

Enable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.

method setSize

setSize: (width: number, height: number, updateStyle?: boolean) => void;

Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).

method setTransparentSort

setTransparentSort: (method: (a: any, b: any) => number) => void;

Sets the custom transparent sort function for the WebGLRenderLists. Pass null to use the default reversePainterSortStable function.

method setViewport

setViewport: (
    x: Vector4 | number,
    y?: number,
    width?: number,
    height?: number
) => void;

Sets the viewport to render from (x, y) to (x + width, y + height). (x, y) is the lower-left corner of the region.

method supportsBlendMinMax

supportsBlendMinMax: () => any;

Deprecated
Use instead.

method supportsCompressedTexturePVRTC

supportsCompressedTexturePVRTC: () => any;

Deprecated
Use instead.

method supportsCompressedTextureS3TC

supportsCompressedTextureS3TC: () => any;

Deprecated
Use instead.

method supportsFloatTextures

supportsFloatTextures: () => any;

Deprecated
Use instead.

method supportsHalfFloatTextures

supportsHalfFloatTextures: () => any;

Deprecated
Use instead.

method supportsInstancedArrays

supportsInstancedArrays: () => any;

Deprecated
Use instead.

method supportsStandardDerivatives

supportsStandardDerivatives: () => any;

Deprecated
Use instead.

method supportsVertexTextures

supportsVertexTextures: () => any;

Deprecated
Use WebGLCapabilities#vertexTextures.capabilities.vertexTextures instead.

class WebGLRenderList

class WebGLRenderList {}

constructor

constructor(properties: WebGLProperties);

property opaque

opaque: RenderItem[];

[]

property transmissive

transmissive: RenderItem[];

[]

property transparent

transparent: RenderItem[];

[]

method finish

finish: () => void;

method init

init: () => void;

method push

push: (
    object: Object3D,
    geometry: BufferGeometry | null,
    material: Material,
    groupOrder: number,
    z: number,
    group: Group | null
) => void;

method sort

sort: (
    opaqueSort: (a: any, b: any) => number,
    transparentSort: (a: any, b: any) => number
) => void;

method unshift

unshift: (
    object: Object3D,
    geometry: BufferGeometry | null,
    material: Material,
    groupOrder: number,
    z: number,
    group: Group | null
) => void;

class WebGLRenderLists

class WebGLRenderLists {}

constructor

constructor(properties: WebGLProperties);

method dispose

dispose: () => void;

method get

get: (scene: Scene, renderCallDepth: number) => WebGLRenderList;

class WebGLRenderTarget

class WebGLRenderTarget<
    TTexture extends Texture | Texture[] = Texture
> extends RenderTarget<TTexture> {}

constructor

constructor(width?: number, height?: number, options?: RenderTargetOptions);

property isWebGLRenderTarget

readonly isWebGLRenderTarget: boolean;

class WebGLShadowMap

class WebGLShadowMap {}

constructor

constructor(
    _renderer: WebGLRenderer,
    _objects: WebGLObjects,
    _capabilities: WebGLCapabilities
);

property autoUpdate

autoUpdate: boolean;

true

property cullFace

cullFace: any;

Deprecated
Use Material#shadowSide instead.

property enabled

enabled: boolean;

false

property needsUpdate

needsUpdate: boolean;

false

property type

type: ShadowMapType;

THREE.PCFShadowMap

method render

render: (shadowsArray: Light[], scene: Scene, camera: Camera) => void;

class WebGLState

class WebGLState {}

constructor

constructor(gl: WebGLRenderingContext, extensions: WebGLExtensions);

property buffers

buffers: {
    color: WebGLColorBuffer;
    depth: WebGLDepthBuffer;
    stencil: WebGLStencilBuffer;
};

method activeTexture

activeTexture: (webglSlot: number) => void;

method bindFramebuffer

bindFramebuffer: (target: number, framebuffer: WebGLFramebuffer | null) => void;

method bindTexture

bindTexture: (webglType: number, webglTexture: any) => void;

method compressedTexImage2D

compressedTexImage2D: (
    target: number,
    level: number,
    internalformat: number,
    width: number,
    height: number,
    border: number,
    data: ArrayBufferView
) => void;

method disable

disable: (id: number) => void;

method drawBuffers

drawBuffers: (
    renderTarget: WebGLRenderTarget | null,
    framebuffer: WebGLFramebuffer | null
) => void;

method enable

enable: (id: number) => void;

method reset

reset: () => void;

method scissor

scissor: (scissor: Vector4) => void;

method setBlending

setBlending: (
    blending: Blending,
    blendEquation?: BlendingEquation,
    blendSrc?: BlendingSrcFactor,
    blendDst?: BlendingDstFactor,
    blendEquationAlpha?: BlendingEquation,
    blendSrcAlpha?: BlendingSrcFactor,
    blendDstAlpha?: BlendingDstFactor,
    premultiplyAlpha?: boolean
) => void;

method setCullFace

setCullFace: (cullFace: CullFace) => void;

method setFlipSided

setFlipSided: (flipSided: boolean) => void;

method setLineWidth

setLineWidth: (width: number) => void;

method setMaterial

setMaterial: (
    material: Material,
    frontFaceCW: boolean,
    hardwareClippingPlanes: number
) => void;

method setPolygonOffset

setPolygonOffset: (
    polygonoffset: boolean,
    factor?: number,
    units?: number
) => void;

method setScissorTest

setScissorTest: (scissorTest: boolean) => void;

method texImage2D

texImage2D: {
    (
        target: number,
        level: number,
        internalformat: number,
        width: number,
        height: number,
        border: number,
        format: number,
        type: number,
        pixels: ArrayBufferView | null
    ): void;
    (
        target: number,
        level: number,
        internalformat: number,
        format: number,
        type: number,
        source: any
    ): void;
};

method texImage3D

texImage3D: (
    target: number,
    level: number,
    internalformat: number,
    width: number,
    height: number,
    depth: number,
    border: number,
    format: number,
    type: number,
    pixels: any
) => void;

method unbindTexture

unbindTexture: () => void;

method useProgram

useProgram: (program: any) => boolean;

method viewport

viewport: (viewport: Vector4) => void;

class WebGLStencilBuffer

class WebGLStencilBuffer {}

constructor

constructor();

method reset

reset: () => void;

method setClear

setClear: (stencil: number) => void;

method setFunc

setFunc: (stencilFunc: number, stencilRef: number, stencilMask: number) => void;

method setLocked

setLocked: (lock: boolean) => void;

method setMask

setMask: (stencilMask: number) => void;

method setOp

setOp: (stencilFail: number, stencilZFail: number, stencilZPass: number) => void;

method setTest

setTest: (stencilTest: boolean) => void;

class WebGLTextures

class WebGLTextures {}

constructor

constructor(
    gl: WebGLRenderingContext,
    extensions: WebGLExtensions,
    state: WebGLState,
    properties: WebGLProperties,
    capabilities: WebGLCapabilities,
    utils: WebGLUtils,
    info: WebGLInfo
);

method allocateTextureUnit

allocateTextureUnit: () => void;

method resetTextureUnits

resetTextureUnits: () => void;

method safeSetTexture2D

safeSetTexture2D: (texture: any, slot: number) => void;

method safeSetTextureCube

safeSetTextureCube: (texture: any, slot: number) => void;

method setTexture2D

setTexture2D: (texture: any, slot: number) => void;

method setTexture2DArray

setTexture2DArray: (texture: any, slot: number) => void;

method setTexture3D

setTexture3D: (texture: any, slot: number) => void;

method setTextureCube

setTextureCube: (texture: any, slot: number) => void;

method setupRenderTarget

setupRenderTarget: (renderTarget: any) => void;

method updateMultisampleRenderTarget

updateMultisampleRenderTarget: (renderTarget: any) => void;

method updateRenderTargetMipmap

updateRenderTargetMipmap: (renderTarget: any) => void;

class WebGLUniforms

class WebGLUniforms {}

constructor

constructor(gl: WebGLRenderingContext, program: WebGLProgram);

method seqWithValue

static seqWithValue: (seq: any, values: any[]) => any[];

method setOptional

setOptional: (gl: WebGLRenderingContext, object: any, name: string) => void;

method setValue

setValue: (
    gl: WebGLRenderingContext,
    name: string,
    value: any,
    textures: WebGLTextures
) => void;

method upload

static upload: (
    gl: WebGLRenderingContext,
    seq: any,
    values: any[],
    textures: WebGLTextures
) => void;

class WebGLUtils

class WebGLUtils {}

constructor

constructor(
    gl: WebGLRenderingContext | WebGL2RenderingContext,
    extensions: WebGLExtensions
);

method convert

convert: (
    p: PixelFormat | CompressedPixelFormat | TextureDataType,
    colorSpace?: string
) => number | null;

class WebXRController

class WebXRController {}

constructor

constructor();

method connect

connect: (inputSource: XRInputSource) => this;

method disconnect

disconnect: (inputSource: XRInputSource) => this;

method dispatchEvent

dispatchEvent: (event: {
    type: XRControllerEventType;
    data?: XRInputSource;
}) => this;

method getGripSpace

getGripSpace: () => XRGripSpace;

method getHandSpace

getHandSpace: () => XRHandSpace;

method getTargetRaySpace

getTargetRaySpace: () => XRTargetRaySpace;

method update

update: (
    inputSource: XRInputSource,
    frame: XRFrame,
    referenceSpace: XRReferenceSpace
) => this;

class WebXRDepthSensing

class WebXRDepthSensing {}

constructor

constructor();

property depthFar

depthFar: number;

property depthNear

depthNear: number;

property mesh

mesh: Mesh<
    BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>,
    Material | Material[],
    Object3DEventMap
>;

property texture

texture: ExternalTexture;

method getDepthTexture

getDepthTexture: () => ExternalTexture | null;

method getMesh

getMesh: (cameraXR: WebXRArrayCamera) => Mesh | null;

method init

init: (depthData: XRWebGLDepthInformation, renderState: XRRenderState) => void;

method reset

reset: () => void;

class WebXRManager

class WebXRManager extends EventDispatcher<WebXRManagerEventMap> {}

constructor

constructor(renderer: WebGLRenderer, gl: WebGLRenderingContext);

property cameraAutoUpdate

cameraAutoUpdate: boolean;

true

property dispose

dispose: () => void;

property enabled

enabled: boolean;

false

property getBaseLayer

getBaseLayer: () => XRWebGLLayer | XRProjectionLayer;

property getBinding

getBinding: () => XRWebGLBinding;

property getCamera

getCamera: () => WebXRArrayCamera;

property getCameraTexture

getCameraTexture: (xrCamera: WebXRCamera) => ExternalTexture | undefined;

property getController

getController: (index: number) => XRTargetRaySpace;

property getControllerGrip

getControllerGrip: (index: number) => XRGripSpace;

property getDepthSensingMesh

getDepthSensingMesh: () => Mesh | null;

property getDepthTexture

getDepthTexture: () => ExternalTexture | null;

property getEnvironmentBlendMode

getEnvironmentBlendMode: () => XREnvironmentBlendMode | undefined;

property getFoveation

getFoveation: () => number | undefined;

property getFrame

getFrame: () => XRFrame;

property getHand

getHand: (index: number) => XRHandSpace;

property getReferenceSpace

getReferenceSpace: () => XRReferenceSpace | null;

property getSession

getSession: () => XRSession | null;

property hasDepthSensing

hasDepthSensing: () => boolean;

property isPresenting

isPresenting: boolean;

false

property setAnimationLoop

setAnimationLoop: (callback: XRFrameRequestCallback | null) => void;

property setFoveation

setFoveation: (value: number) => void;

property setFramebufferScaleFactor

setFramebufferScaleFactor: (value: number) => void;

property setReferenceSpace

setReferenceSpace: (value: XRReferenceSpace) => void;

property setReferenceSpaceType

setReferenceSpaceType: (value: XRReferenceSpaceType) => void;

property setSession

setSession: (value: XRSession | null) => Promise<void>;

property updateCamera

updateCamera: (camera: PerspectiveCamera) => void;

class WireframeGeometry

class WireframeGeometry<
    TBufferGeometry extends BufferGeometry = BufferGeometry
> extends BufferGeometry {}

This can be used as a helper object to view a geometry as a wireframe.

Example 1

const geometry = new THREE.SphereGeometry(100, 100, 100);
const wireframe = new THREE.WireframeGeometry(geometry);
const line = new THREE.LineSegments(wireframe);
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;
scene.add(line);

constructor

constructor(
    geometry?: BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>
);

Create a new instance of WireframeGeometry
Parameter geometry
Any geometry object. Default null.

property parameters

readonly parameters: { readonly geometry: TBufferGeometry };

An object with a property for each of the constructor parameters.
Remarks
Any modification after instantiation does not change the geometry.

property type

override readonly type: string;

A Read-only _string_ to check if this object type.
Remarks
Sub-classes will update this value.

class XRGripSpace

class XRGripSpace extends Group<WebXRSpaceEventMap> {}

property angularVelocity

readonly angularVelocity: Vector3;

property hasAngularVelocity

hasAngularVelocity: boolean;

property hasLinearVelocity

hasLinearVelocity: boolean;

property linearVelocity

readonly linearVelocity: Vector3;

class XRHandSpace

class XRHandSpace extends Group<WebXRSpaceEventMap> {}

property inputState

readonly inputState: XRHandInputState;

property joints

readonly joints: Partial<XRHandJoints>;

class XRJointSpace

class XRJointSpace extends Group {}

property jointRadius

readonly jointRadius: number;

class XRTargetRaySpace

class XRTargetRaySpace extends Group<WebXRSpaceEventMap> {}

property angularVelocity

readonly angularVelocity: Vector3;

property hasAngularVelocity

hasAngularVelocity: boolean;

property hasLinearVelocity

hasLinearVelocity: boolean;

property linearVelocity

readonly linearVelocity: Vector3;

Interfaces

interface AnimationClipJSON

interface AnimationClipJSON {}

property blendMode

blendMode: AnimationBlendMode;

property duration

duration: number;

property name

name: string;

property tracks

tracks: KeyframeTrackJSON[];

property uuid

uuid: string;

interface AnimationMixerEventMap

interface AnimationMixerEventMap {}

property finished

finished: { action: AnimationAction; direction: number };

property loop

loop: { action: AnimationAction; loopDelta: number };

interface AnimationMixerStats

interface AnimationMixerStats {}

property actions

actions: {
    readonly total: number;
    readonly inUse: number;
};

property bindings

bindings: {
    readonly total: number;
    readonly inUse: number;
};

property controlInterpolants

controlInterpolants: {
    readonly total: number;
    readonly inUse: number;
};

interface BaseEvent

interface BaseEvent<TEventType extends string = string> {}

The minimal basic Event that can be dispatched by a .

property type

readonly type: TEventType;

interface BatchedMeshGeometryRange

interface BatchedMeshGeometryRange {}

property count

count: number;

property indexCount

indexCount: number;

property indexStart

indexStart: number;

property reservedIndexCount

reservedIndexCount: number;

property reservedVertexCount

reservedVertexCount: number;

property start

start: number;

property vertexCount

vertexCount: number;

property vertexStart

vertexStart: number;

interface Box3JSON

interface Box3JSON {}

property max

max: number[];

property min

min: number[];

interface BufferAttributeJSON

interface BufferAttributeJSON {}

property array

array: number[];

property itemSize

itemSize: number;

property name

name?: string;

property normalized

normalized: boolean;

property type

type: string;

property usage

usage?: Usage;

interface BufferGeometryEventMap

interface BufferGeometryEventMap {}

property dispose

dispose: {};

interface BufferGeometryJSON

interface BufferGeometryJSON {}

property data

data?: {
    attributes: Record<string, BufferAttributeJSON>;

    index?: { type: string; array: number[] };

    morphAttributes?: Record<string, BufferAttributeJSON[]>;
    morphTargetsRelative?: boolean;

    groups?: GeometryGroup[];

    boundingSphere?: { center: Vector3Tuple; radius: number };
};

property metadata

metadata?: { version: number; type: string; generator: string };

property name

name?: string;

property type

type: string;

property userData

userData?: Record<string, unknown>;

property uuid

uuid: string;

interface ColorManagement

interface ColorManagement {}

property colorSpaceToWorking

colorSpaceToWorking: (color: Color, sourceColorSpace: string) => Color;

property convert

convert: (
    color: Color,
    sourceColorSpace: string,
    targetColorSpace: string
) => Color;

property define

define: (colorSpaces: Record<string, ColorSpaceDefinition>) => void;

property enabled

enabled: boolean;

true

property fromWorkingColorSpace

fromWorkingColorSpace: (color: Color, targetColorSpace: string) => Color;

Deprecated
.fromWorkingColorSpace() has been renamed to .workingToColorSpace().

property getLuminanceCoefficients

getLuminanceCoefficients: (
    target: Vector3,
    colorSpace?: string
) => [number, number, number];

property getPrimaries

getPrimaries: (
    colorSpace: string
) => [number, number, number, number, number, number];

property getTransfer

getTransfer: (colorSpace: string) => ColorSpaceTransfer;

property spaces

spaces: Record<string, ColorSpaceDefinition>;

property toWorkingColorSpace

toWorkingColorSpace: (color: Color, sourceColorSpace: string) => Color;

Deprecated
.toWorkingColorSpace() has been renamed to .colorSpaceToWorking().

property workingColorSpace

workingColorSpace: string;

LinearSRGBColorSpace

property workingToColorSpace

workingToColorSpace: (color: Color, targetColorSpace: string) => Color;

interface ColorSpaceDefinition

interface ColorSpaceDefinition {}

property fromXYZ

fromXYZ: Matrix3;

property luminanceCoefficients

luminanceCoefficients: [number, number, number];

property outputColorSpaceConfig

outputColorSpaceConfig?: {
    drawingBufferColorSpace: string;
    toneMappingNode?: 'extended' | 'standard';
};

property primaries

primaries: [number, number, number, number, number, number];

property toXYZ

toXYZ: Matrix3;

property transfer

transfer: ColorSpaceTransfer;

property whitePoint

whitePoint: [number, number];

property workingColorSpaceConfig

workingColorSpaceConfig?: { unpackColorSpace: string };

interface CompressedArrayTextureImageData

interface CompressedArrayTextureImageData extends CompressedTextureImageData {}

property depth

depth: number;

interface CompressedTextureImageData

interface CompressedTextureImageData {}

property height

height: number;

property width

width: number;

interface CompressedTextureMipmap

interface CompressedTextureMipmap {}

property data

data: TypedArray;

property height

height: number;

property width

width: number;

interface CubeCameraRenderer

interface CubeCameraRenderer {}

property coordinateSystem

coordinateSystem: CoordinateSystem;

property xr

xr: {
    enabled: boolean;
};

method getActiveCubeFace

getActiveCubeFace: () => number;

method getActiveMipmapLevel

getActiveMipmapLevel: () => number;

method getRenderTarget

getRenderTarget: () => RenderTarget | null;

method render

render: (scene: Object3D, camera: Camera) => void;

method setRenderTarget

setRenderTarget: (
    renderTarget: WebGLCubeRenderTarget | null,
    activeCubeFace?: number,
    activeMipmapLevel?: number
) => void;

interface CurveJSON

interface CurveJSON {}

property arcLengthDivisions

arcLengthDivisions: number;

property metadata

metadata: { version: number; type: string; generator: string };

property type

type: string;

interface CurvePathJSON

interface CurvePathJSON extends CurveJSON {}

property autoClose

autoClose: boolean;

property curves

curves: CurveJSON[];

interface Data3DTextureImageData

interface Data3DTextureImageData {}

property data

data: TypedArray | null;

property depth

depth: number;

property height

height: number;

property width

width: number;

interface DataArrayTextureImageData

interface DataArrayTextureImageData {}

property data

data: TypedArray | null;

property depth

depth: number;

property height

height: number;

property width

width: number;

interface DataTextureImageData

interface DataTextureImageData {}

property data

data: TypedArray | null;

property height

height: number;

property width

width: number;

interface DepthTextureImageData

interface DepthTextureImageData {}

property depth

depth: number;

property height

height: number;

property width

width: number;

interface DirectionalLightJSON

interface DirectionalLightJSON extends LightJSON {}

property shadow

shadow: LightShadowJSON;

property target

target: string;

interface Effect

interface Effect {}

method render

render: (
    renderer: WebGLRenderer,
    writeBuffer: WebGLRenderTarget,
    readBuffer: WebGLRenderTarget,
    deltaTime: number,
    maskActive: boolean
) => void;

method setSize

setSize: (width: number, height: number) => void;

interface Event

interface Event<TEventType extends string = string, TTarget = unknown> {}

The minimal expected contract of a fired Event that was dispatched by a .

property target

readonly target: TTarget;

property type

readonly type: TEventType;

interface ExtrudeGeometryOptions

interface ExtrudeGeometryOptions {}

property bevelEnabled

bevelEnabled?: boolean | undefined;

Turn on bevel. Applying beveling to the shape.

property bevelOffset

bevelOffset?: number | undefined;

Distance from the shape outline that the bevel starts. Expects a Float.

property bevelSegments

bevelSegments?: number | undefined;

Number of bevel layers/segments. Expects a Integer.

property bevelSize

bevelSize?: number | undefined;

Distance from the shape outline that the bevel extends Expects a Float.

property bevelThickness

bevelThickness?: number | undefined;

How deep into the original shape the bevel goes. Expects a Float.

property curveSegments

curveSegments?: number | undefined;

Number of points on the curves. Expects a Integer.

property depth

depth?: number | undefined;

Depth to extrude the shape.

property extrudePath

extrudePath?: Curve<Vector3> | undefined;

A 3D spline path along which the shape should be extruded.
Remarks
Bevels not supported for path extrusion.

property steps

steps?: number | undefined;

Number of points used for subdividing segments along the depth of the extruded spline.

property UVGenerator

UVGenerator?: UVGenerator | undefined;

A object that provides UV generator functions.

interface Face

interface Face {}

property a

a: number;

property b

b: number;

property c

c: number;

property materialIndex

materialIndex: number;

property normal

normal: Vector3;

interface FogExp2JSON

interface FogExp2JSON {}

property color

color: number;

property density

density: number;

property name

name: string;

property type

type: string;

interface FogJSON

interface FogJSON {}

property color

color: number;

property far

far: number;

property name

name: string;

property near

near: number;

property type

type: string;

interface FramebufferTextureImageData

interface FramebufferTextureImageData {}

property height

height: number;

property width

width: number;

interface GeometryGroup

interface GeometryGroup {}

property count

count: number;

Specifies how many vertices (or indices) are included.
Remarks
Expects a Integer

property materialIndex

materialIndex?: number | undefined;

Specifies the material array index to use.
Remarks
Expects a Integer

property start

start: number;

Specifies the first element in this draw call – the first vertex for non-indexed geometry, otherwise the first triangle index.
Remarks
Expects a Integer

interface HemisphereLightJSON

interface HemisphereLightJSON extends LightJSON {}

property groundColor

groundColor: number;

interface HSL

interface HSL {}

property h

h: number;

property l

l: number;

property s

s: number;

interface InstancedMeshEventMap

interface InstancedMeshEventMap extends Object3DEventMap {}

property dispose

dispose: {};

interface InstancedMeshJSON

interface InstancedMeshJSON extends MeshJSONObject {}

property object

object: InstancedMeshJSONObject;

interface InstancedMeshJSONObject

interface InstancedMeshJSONObject extends MeshJSONObject {}

property count

count: number;

property instanceColor

instanceColor?: BufferAttributeJSON;

property instanceMatrix

instanceMatrix: BufferAttributeJSON;

interface Intersection

interface Intersection<TIntersected extends Object3D = Object3D> {}

property barycoord

barycoord?: Vector3 | null;

property batchId

batchId?: number;

property distance

distance: number;

Distance between the origin of the ray and the intersection

property distanceToRay

distanceToRay?: number | undefined;

Some objects (f.e. Points) provide the distance of the intersection to the nearest point on the ray. For other objects it will be undefined

property face

face?: Face | null | undefined;

Intersected face

property faceIndex

faceIndex?: number | null | undefined;

Index of the intersected face

property index

index?: number | undefined;

property instanceId

instanceId?: number | undefined;

The index number of the instance where the ray intersects the InstancedMesh

property normal

normal?: Vector3;

property object

object: TIntersected;

The intersected object

property point

point: Vector3;

Point of intersection, in world coordinates

property pointOnLine

pointOnLine?: Vector3;

property uv

uv?: Vector2 | undefined;

property uv1

uv1?: Vector2 | undefined;

interface IUniform

interface IUniform<TValue = any> {}

property value

value: TValue;

interface JSONMeta

interface JSONMeta {}

property animations

animations: Record<string, AnimationClipJSON>;

property geometries

geometries: Record<string, BufferGeometryJSON>;

property images

images: Record<string, SourceJSON>;

property materials

materials: Record<string, MaterialJSON>;

property nodes

nodes: Record<string, unknown>;

property shapes

shapes: Record<string, ShapeJSON>;

property skeletons

skeletons: Record<string, SkeletonJSON>;

property textures

textures: Record<string, TextureJSON>;

interface KeyframeTrackJSON

interface KeyframeTrackJSON {}

property interpolation

interpolation?: InterpolationModes;

property name

name: string;

property times

times: number[];

property type

type: string;

property values

values: number[];

interface LightEventMap

interface LightEventMap extends Object3DEventMap {}

property dispose

dispose: {};

interface LightJSON

interface LightJSON extends Object3DJSON {}

property color

color: number;

property intensity

intensity: number;

interface LightProbeJSON

interface LightProbeJSON extends LightJSON {}

property sh

sh: number[];

interface LightShadow

interface LightShadow {}

property shadowNode

shadowNode?: Node;

interface LightShadowJSON

interface LightShadowJSON {}

property bias

bias?: number;

property camera

camera: Omit<Object3DJSONObject, 'matrix'>;

property intensity

intensity?: number;

property mapSize

mapSize?: Vector2Tuple;

property normalBias

normalBias?: number;

property radius

radius?: number;

interface LineBasicMaterial

interface LineBasicMaterial extends LineBasicMaterialProperties {}

interface LineBasicMaterialParameters

interface LineBasicMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<LineBasicMaterialProperties>
    > {}

interface LineBasicMaterialProperties

interface LineBasicMaterialProperties extends MaterialProperties {}

property color

color: Color;

Color of the material.
(1,1,1)

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property linecap

linecap: 'butt' | 'round' | 'square';

Defines appearance of line ends.
Can only be used with SVGRenderer.
'round'

property linejoin

linejoin: 'round' | 'bevel' | 'miter';

Defines appearance of line joints.
Can only be used with SVGRenderer.
'round'

property linewidth

linewidth: number;

Controls line thickness or lines.
Can only be used with SVGRenderer. WebGL and WebGPU ignore this setting and always render line primitives with a width of one pixel.
1

property map

map: Texture | null;

Sets the color of the lines using data from a texture. The texture map color is modulated by the diffuse color.
null

interface LineBasicMaterialProperties

interface LineBasicMaterialProperties extends LineBasicNodeMaterialNodeProperties {}

interface LineDashedMaterial

interface LineDashedMaterial extends LineDashedMaterialProperties {}

interface LineDashedMaterialParameters

interface LineDashedMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<LineDashedMaterialProperties>
    > {}

interface LineDashedMaterialProperties

interface LineDashedMaterialProperties extends LineBasicMaterialProperties {}

property dashSize

dashSize: number;

The size of the dash. This is both the gap with the stroke.
3

property gapSize

gapSize: number;

The size of the gap.
1

property scale

scale: number;

The scale of the dashed part of a line.
1

interface LineDashedMaterialProperties

interface LineDashedMaterialProperties
    extends LineDashedNodeMaterialNodeProperties {}

interface LODJSON

interface LODJSON extends Object3DJSON {}

property object

object: LODJSONObject;

interface LODJSONObject

interface LODJSONObject extends Object3DJSONObject {}

property autoUpdate

autoUpdate?: boolean;

property levels

levels: Array<{
    object: string;
    distance: number;
    hysteresis: number;
}>;

interface Material

interface Material extends MaterialProperties {}

interface MaterialJSON

interface MaterialJSON {}

property alphaHash

alphaHash?: boolean;

property alphaMap

alphaMap?: string;

property alphaTest

alphaTest?: number;

property alphaToCoverage

alphaToCoverage?: boolean;

property anisotropy

anisotropy?: number;

property anisotropyMap

anisotropyMap?: string;

property anisotropyRotation

anisotropyRotation?: number;

property aoMap

aoMap?: string;

property aoMapIntensity

aoMapIntensity?: number;

property attenuationColor

attenuationColor?: number;

property attenuationDistance

attenuationDistance?: number;

property blendAlpha

blendAlpha?: number;

property blendColor

blendColor?: number;

property blendDst

blendDst?: BlendingDstFactor;

property blendDstAlpha

blendDstAlpha?: number | null;

property blendEquation

blendEquation?: BlendingEquation;

property blendEquationAlpha

blendEquationAlpha?: number | null;

property blending

blending?: Blending;

property blendSrc

blendSrc?: BlendingSrcFactor;

property blendSrcAlpha

blendSrcAlpha?: number | null;

property bumpMap

bumpMap?: string;

property bumpScale

bumpScale?: number;

property clearcoat

clearcoat?: number;

property clearcoatMap

clearcoatMap?: string;

property clearcoatNormalMap

clearcoatNormalMap?: string;

property clearcoatNormalScale

clearcoatNormalScale?: Vector2Tuple;

property clearcoatRoughness

clearcoatRoughness?: number;

property clearcoatRoughnessMap

clearcoatRoughnessMap?: string;

property color

color?: number;

property colorWrite

colorWrite?: boolean;

property combine

combine?: Combine;

property dashSize

dashSize?: number;

property depthFunc

depthFunc?: DepthModes;

property depthTest

depthTest?: boolean;

property depthWrite

depthWrite?: boolean;

property dispersion

dispersion?: number;

property displacementBias

displacementBias?: number;

property displacementMap

displacementMap?: string;

property displacementScale

displacementScale?: number;

property dithering

dithering?: boolean;

property emissive

emissive?: number;

property emissiveIntensity

emissiveIntensity?: number;

property emissiveMap

emissiveMap?: string;

property envMap

envMap?: string;

property envMapIntensity

envMapIntensity?: number;

property envMapRotation

envMapRotation?: EulerTuple;

property flatShading

flatShading?: boolean;

property fog

fog?: boolean;

property forceSinglePass

forceSinglePass?: boolean;

property gapSize

gapSize?: number;

property gradientMap

gradientMap?: string;

property images

images?: SourceJSON[];

property iridescence

iridescence?: number;

property iridescenceIOR

iridescenceIOR?: number;

property iridescenceMap

iridescenceMap?: string;

property iridescenceThicknessMap

iridescenceThicknessMap?: string;

property iridescenceThicknessRange

iridescenceThicknessRange?: number;

property lightMap

lightMap?: string;

property lightMapIntensity

lightMapIntensity?: number;

property linewidth

linewidth?: number;

property map

map?: string;

property matcap

matcap?: string;

property metadata

metadata: { version: number; type: string; generator: string };

property metalness

metalness?: number;

property metalnessMap

metalnessMap?: string;

property name

name?: string;

property normalMap

normalMap?: string;

property normalMapType

normalMapType?: NormalMapTypes;

property normalScale

normalScale?: Vector2Tuple;

property opacity

opacity?: number;

property polygonOffset

polygonOffset?: boolean;

property polygonOffsetFactor

polygonOffsetFactor?: number;

property polygonOffsetUnits

polygonOffsetUnits?: number;

property premultipliedAlpha

premultipliedAlpha?: boolean;

property reflectivity

reflectivity?: number;

property refractionRatio

refractionRatio?: number;

property rotation

rotation?: number;

property roughness

roughness?: number;

property roughnessMap

roughnessMap?: string;

property scale

scale?: number;

property shadowSide

shadowSide?: number;

property sheen

sheen?: number;

property sheenColor

sheenColor?: number;

property sheenRoughness

sheenRoughness?: number;

property shininess

shininess?: number;

property side

side?: Side;

property size

size?: number;

property sizeAttenuation

sizeAttenuation?: boolean;

property specular

specular?: number;

property specularColor

specularColor?: number;

property specularColorMap

specularColorMap?: string;

property specularIntensity

specularIntensity?: number;

property specularIntensityMap

specularIntensityMap?: string;

property specularMap

specularMap?: string;

property stencilFail

stencilFail?: StencilOp;

property stencilFunc

stencilFunc?: StencilFunc;

property stencilFuncMask

stencilFuncMask?: number;

property stencilRef

stencilRef?: number;

property stencilWrite

stencilWrite?: boolean;

property stencilWriteMask

stencilWriteMask?: number;

property stencilZFail

stencilZFail?: StencilOp;

property stencilZPass

stencilZPass?: StencilOp;

property textures

textures?: Array<Omit<TextureJSON, 'metadata'>>;

property thickness

thickness?: number;

property thicknessMap

thicknessMap?: string;

property toneMapped

toneMapped?: boolean;

property transmission

transmission?: number;

property transmissionMap

transmissionMap?: string;

property transparent

transparent?: boolean;

property type

type: string;

property userData

userData?: Record<string, unknown>;

property uuid

uuid: string;

property vertexColors

vertexColors?: boolean;

property visible

visible?: boolean;

property wireframe

wireframe?: boolean;

property wireframeLinecap

wireframeLinecap?: string;

property wireframeLinejoin

wireframeLinejoin?: string;

property wireframeLinewidth

wireframeLinewidth?: number;

interface MaterialParameters

interface MaterialParameters
    extends Partial<MapColorPropertiesToColorRepresentations<MaterialProperties>> {}

interface MaterialProperties

interface MaterialProperties {}

property allowOverride

allowOverride: boolean;

Whether it's possible to override the material with Scene#overrideMaterial or not.
true

property alphaHash

alphaHash: boolean;

Enables alpha hashed transparency, an alternative to Material#transparent or Material#alphaTest. The material will not be rendered if opacity is lower than a random threshold. Randomization introduces some grain or noise, but approximates alpha blending without the associated problems of sorting. Using TAA can reduce the resulting noise.
false

property alphaToCoverage

alphaToCoverage: boolean;

Whether alpha to coverage should be enabled or not. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with *antialias* parameter set to true). Enabling this will smooth aliasing on clip plane edges and alphaTest-clipped edges.
false

property blendAlpha

blendAlpha: number;

Represents the alpha value of the constant blend color.
This property has only an effect when using custom blending with ConstantAlpha or OneMinusConstantAlpha.
0

property blendColor

blendColor: Color;

Represents the RGB values of the constant blend color.
This property has only an effect when using custom blending with ConstantColor or OneMinusConstantColor.
(0,0,0)

property blendDst

blendDst: BlendingDstFactor;

Defines the blending destination factor.
OneMinusSrcAlphaFactor

property blendDstAlpha

blendDstAlpha: BlendingDstFactor | null;

Defines the blending destination alpha factor.
null

property blendEquation

blendEquation: BlendingEquation;

Defines the blending equation.
AddEquation

property blendEquationAlpha

blendEquationAlpha: BlendingEquation | null;

Defines the blending equation of the alpha channel.
null

property blending

blending: Blending;

Defines the blending type of the material.
It must be set to CustomBlending if custom blending properties like Material#blendSrc, Material#blendDst or Material#blendEquation should have any effect.
NormalBlending

property blendSrc

blendSrc: BlendingSrcFactor;

Defines the blending source factor.
SrcAlphaFactor

property blendSrcAlpha

blendSrcAlpha: BlendingSrcFactor | null;

Defines the blending source alpha factor.
null

property clipIntersection

clipIntersection: boolean;

Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.
false

property clippingPlanes

clippingPlanes: Array<Plane> | null;

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply to the objects this material is attached to. Points in space whose signed distance to the plane is negative are clipped (not rendered). This requires WebGLRenderer#localClippingEnabled to be true.
null

property clipShadows

clipShadows: boolean;

Defines whether to clip shadows according to the clipping planes specified on this material.
false

property colorWrite

colorWrite: boolean;

Whether to render the material's color.
This can be used in conjunction with Object3D#renderOder to create invisible objects that occlude other objects.
true

property depthFunc

depthFunc: DepthModes;

Defines the depth function.
LessEqualDepth

property depthTest

depthTest: boolean;

Whether to have depth test enabled when rendering this material. When the depth test is disabled, the depth write will also be implicitly disabled.
true

property depthWrite

depthWrite: boolean;

Whether rendering this material has any effect on the depth buffer.
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
true

property dithering

dithering: boolean;

Whether to apply dithering to the color to remove the appearance of banding.
false

property forceSinglePass

forceSinglePass: boolean;

Whether double-sided, transparent objects should be rendered with a single pass or not.
The engine renders double-sided, transparent objects with two draw calls (back faces first, then front faces) to mitigate transparency artifacts. There are scenarios however where this approach produces no quality gains but still doubles draw calls e.g. when rendering flat vegetation like grass sprites. In these cases, set the forceSinglePass flag to true to disable the two pass rendering to avoid performance issues.
false

property name

name: string;

The name of the material.

property opacity

opacity: number;

Defines how transparent the material is. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.
If the Material#transparent is not set to true, the material will remain fully opaque and this value will only affect its color.
1

property polygonOffset

polygonOffset: boolean;

Whether to use polygon offset or not. When enabled, each fragment's depth value will be offset after it is interpolated from the depth values of the appropriate vertices. The offset is added before the depth test is performed and before the value is written into the depth buffer.
Can be useful for rendering hidden-line images, for applying decals to surfaces, and for rendering solids with highlighted edges.
false

property polygonOffsetFactor

polygonOffsetFactor: number;

Specifies a scale factor that is used to create a variable depth offset for each polygon.
0

property polygonOffsetUnits

polygonOffsetUnits: number;

Is multiplied by an implementation-specific value to create a constant depth offset.
0

property precision

precision: ('highp' | 'mediump' | 'lowp') | null;

Override the renderer's default precision for this material.
null

property premultipliedAlpha

premultipliedAlpha: boolean;

Whether to premultiply the alpha (transparency) value.
false

property shadowSide

shadowSide: Side | null;

Defines which side of faces cast shadows. If null, the side casting shadows is determined as follows:
- When Material#side is set to FrontSide, the back side cast shadows. - When Material#side is set to BackSide, the front side cast shadows. - When Material#side is set to DoubleSide, both sides cast shadows.
null

property side

side: Side;

Defines which side of faces will be rendered - front, back or both.
FrontSide

property stencilFail

stencilFail: StencilOp;

Which stencil operation to perform when the comparison function returns false.
KeepStencilOp

property stencilFunc

stencilFunc: StencilFunc;

The stencil comparison function to use.
AlwaysStencilFunc

property stencilFuncMask

stencilFuncMask: number;

The bit mask to use when comparing against the stencil buffer.
0xff

property stencilRef

stencilRef: number;

The value to use when performing stencil comparisons or stencil operations.
0

property stencilWrite

stencilWrite: boolean;

Whether stencil operations are performed against the stencil buffer. In order to perform writes or comparisons against the stencil buffer this value must be true.
false

property stencilWriteMask

stencilWriteMask: number;

The bit mask to use when writing to the stencil buffer.
0xff

property stencilZFail

stencilZFail: StencilOp;

Which stencil operation to perform when the comparison function returns true but the depth test fails.
KeepStencilOp

property stencilZPass

stencilZPass: StencilOp;

Which stencil operation to perform when the comparison function returns true and the depth test passes.
KeepStencilOp

property toneMapped

toneMapped: boolean;

Defines whether this material is tone mapped according to the renderer's tone mapping setting.
It is ignored when rendering to a render target or using post processing or when using WebGPURenderer. In all these cases, all materials are honored by tone mapping.
true

property transparent

transparent: boolean;

Defines whether this material is transparent. This has an effect on rendering as transparent objects need special treatment and are rendered after non-transparent objects.
When set to true, the extent to which the material is transparent is controlled by Material#opacity.
false

property userData

userData: Record<string, any>;

An object that can be used to store custom data about the Material. It should not hold references to functions as these will not be cloned.

property vertexColors

vertexColors: boolean;

If set to true, vertex colors should be used.
The engine supports RGB and RGBA vertex colors depending on whether a three (RGB) or four (RGBA) component color buffer attribute is used.
false

property visible

visible: boolean;

Defines whether 3D objects using this material are visible.
true

index signature

set alphaTest(value: number);

index signature

get alphaTest(): number;

Sets the alpha value to be used when running an alpha test. The material will not be rendered if the opacity is lower than this value.
0

interface MeshBasicMaterial

interface MeshBasicMaterial extends MeshBasicMaterialProperties {}

interface MeshBasicMaterialParameters

interface MeshBasicMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshBasicMaterialProperties>
    > {}

interface MeshBasicMaterialProperties

interface MeshBasicMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property aoMap

aoMap: Texture | null;

The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
null

property aoMapIntensity

aoMapIntensity: number;

Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's red channel is also 1, ambient light is fully occluded on a surface.
1

property color

color: Color;

Color of the material.
(1,1,1)

property combine

combine: Combine;

How to combine the result of the surface's color with the environment map, if any.
When set to MixOperation, the MeshBasicMaterial#reflectivity is used to blend between the two colors.
MultiplyOperation

property envMap

envMap: Texture | null;

The environment map.
null

property envMapRotation

envMapRotation: Euler;

The rotation of the environment map in radians.
(0,0,0)

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property lightMap

lightMap: Texture | null;

The light map. Requires a second set of UVs.
null

property lightMapIntensity

lightMapIntensity: number;

Intensity of the baked light.
1

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property reflectivity

reflectivity: number;

How much the environment map affects the surface. The valid range is between 0 (no reflections) and 1 (full reflections).
1

property refractionRatio

refractionRatio: number;

The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping modes CubeRefractionMapping and EquirectangularRefractionMapping. The refraction ratio should not exceed 1.
0.98

property specularMap

specularMap: Texture | null;

Specular map used by the material.
null

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinecap

wireframeLinecap: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe ends.
Can only be used with SVGRenderer.
'round'

property wireframeLinejoin

wireframeLinejoin: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe joints.
Can only be used with SVGRenderer.
'round'

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
Can only be used with SVGRenderer.
1

interface MeshBasicMaterialProperties

interface MeshBasicMaterialProperties extends MeshBasicNodeMaterialNodeProperties {}

interface MeshDepthMaterial

interface MeshDepthMaterial extends MeshDepthMaterialProperties {}

interface MeshDepthMaterialParameters

interface MeshDepthMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshDepthMaterialProperties>
    > {}

interface MeshDepthMaterialProperties

interface MeshDepthMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property depthPacking

depthPacking: DepthPackingStrategies;

Type for depth packing.
BasicDepthPacking

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest.
null

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
WebGL and WebGPU ignore this property and always render 1 pixel wide lines.
1

interface MeshDistanceMaterial

interface MeshDistanceMaterial extends MeshDistanceMaterialProperties {}

interface MeshDistanceMaterialParameters

interface MeshDistanceMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshDistanceMaterialProperties>
    > {}

interface MeshDistanceMaterialProperties

interface MeshDistanceMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest.
null

interface MeshJSON

interface MeshJSON extends Object3DJSON {}

property object

object: MeshJSONObject;

interface MeshJSONObject

interface MeshJSONObject extends Object3DJSONObject {}

property geometry

geometry: string;

interface MeshLambertMaterial

interface MeshLambertMaterial extends MeshLambertMaterialProperties {}

interface MeshLambertMaterialParameters

interface MeshLambertMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshLambertMaterialProperties>
    > {}

interface MeshLambertMaterialProperties

interface MeshLambertMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property aoMap

aoMap: Texture | null;

The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
null

property aoMapIntensity

aoMapIntensity: number;

Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's red channel is also 1, ambient light is fully occluded on a surface.
1

property bumpMap

bumpMap: Texture | null;

The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored.
null

property bumpScale

bumpScale: number;

How much the bump map affects the material. Typical range is [0,1].
1

property color

color: Color;

Color of the material.
(1,1,1)

property combine

combine: Combine;

How to combine the result of the surface's color with the environment map, if any.
When set to MixOperation, the MeshBasicMaterial#reflectivity is used to blend between the two colors.
MultiplyOperation

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property emissive

emissive: Color;

Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
(0,0,0)

property emissiveIntensity

emissiveIntensity: number;

Intensity of the emissive light. Modulates the emissive color.
1

property emissiveMap

emissiveMap: Texture | null;

Set emissive (glow) map. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.
null

property envMap

envMap: Texture | null;

The environment map.
null

property envMapRotation

envMapRotation: Euler;

The rotation of the environment map in radians.
(0,0,0)

property flatShading

flatShading: boolean;

Whether the material is rendered with flat shading or not.
false

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property lightMap

lightMap: Texture | null;

The light map. Requires a second set of UVs.
null

property lightMapIntensity

lightMapIntensity: number;

Intensity of the baked light.
1

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property normalMap

normalMap: Texture | null;

The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting. In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.
null

property normalMapType

normalMapType: NormalMapTypes;

The type of normal map.
TangentSpaceNormalMap

property normalScale

normalScale: Vector2;

How much the normal map affects the material. Typical value range is [0,1].
(1,1)

property reflectivity

reflectivity: number;

How much the environment map affects the surface. The valid range is between 0 (no reflections) and 1 (full reflections).
1

property refractionRatio

refractionRatio: number;

The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping modes CubeRefractionMapping and EquirectangularRefractionMapping. The refraction ratio should not exceed 1.
0.98

property specularMap

specularMap: Texture | null;

Specular map used by the material.
null

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinecap

wireframeLinecap: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe ends.
Can only be used with SVGRenderer.
'round'

property wireframeLinejoin

wireframeLinejoin: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe joints.
Can only be used with SVGRenderer.
'round'

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
Can only be used with SVGRenderer.
1

interface MeshLambertMaterialProperties

interface MeshLambertMaterialProperties
    extends MeshLambertNodeMaterialNodeProperties {}

interface MeshMatcapMaterial

interface MeshMatcapMaterial extends MeshMatcapMaterialProperties {}

interface MeshMatcapMaterialParameters

interface MeshMatcapMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshMatcapMaterialProperties>
    > {}

interface MeshMatcapMaterialProperties

interface MeshMatcapMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property bumpMap

bumpMap: Texture | null;

The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored.
null

property bumpScale

bumpScale: number;

How much the bump map affects the material. Typical range is [0,1].
1

property color

color: Color;

Color of the material.
(1,1,1)

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property flatShading

flatShading: boolean;

Whether the material is rendered with flat shading or not.
false

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property matcap

matcap: Texture | null;

The matcap map.
null

property normalMap

normalMap: Texture | null;

The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting. In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.
null

property normalMapType

normalMapType: NormalMapTypes;

The type of normal map.
TangentSpaceNormalMap

property normalScale

normalScale: Vector2;

How much the normal map affects the material. Typical value range is [0,1].
(1,1)

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
Can only be used with SVGRenderer.
1

interface MeshMatcapMaterialProperties

interface MeshMatcapMaterialProperties
    extends MeshMatcapNodeMaterialNodeProperties {}

interface MeshNormalMaterial

interface MeshNormalMaterial extends MeshNormalMaterialProperties {}

interface MeshNormalMaterialParameters

interface MeshNormalMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshNormalMaterialProperties>
    > {}

interface MeshNormalMaterialProperties

interface MeshNormalMaterialProperties extends MaterialProperties {}

property bumpMap

bumpMap: Texture | null;

The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored.
null

property bumpScale

bumpScale: number;

How much the bump map affects the material. Typical range is [0,1].
1

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property flatShading

flatShading: boolean;

Whether the material is rendered with flat shading or not.
false

property normalMap

normalMap: Texture | null;

The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting. In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.
null

property normalMapType

normalMapType: NormalMapTypes;

The type of normal map.
TangentSpaceNormalMap

property normalScale

normalScale: Vector2;

How much the normal map affects the material. Typical value range is [0,1].
(1,1)

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
WebGL and WebGPU ignore this property and always render 1 pixel wide lines.
1

interface MeshNormalMaterialProperties

interface MeshNormalMaterialProperties
    extends MeshNormalNodeMaterialNodeProperties {}

interface MeshPhongMaterial

interface MeshPhongMaterial extends MeshPhongMaterialProperties {}

interface MeshPhongMaterialParameters

interface MeshPhongMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshPhongMaterialProperties>
    > {}

interface MeshPhongMaterialProperties

interface MeshPhongMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property aoMap

aoMap: Texture | null;

The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
null

property aoMapIntensity

aoMapIntensity: number;

Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's red channel is also 1, ambient light is fully occluded on a surface.
1

property bumpMap

bumpMap: Texture | null;

The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored.
null

property bumpScale

bumpScale: number;

How much the bump map affects the material. Typical range is [0,1].
1

property color

color: Color;

Color of the material.
(1,1,1)

property combine

combine: Combine;

How to combine the result of the surface's color with the environment map, if any.
When set to MixOperation, the MeshBasicMaterial#reflectivity is used to blend between the two colors.
MultiplyOperation

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property emissive

emissive: Color;

Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
(0,0,0)

property emissiveIntensity

emissiveIntensity: number;

Intensity of the emissive light. Modulates the emissive color.
1

property emissiveMap

emissiveMap: Texture | null;

Set emissive (glow) map. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.
null

property envMap

envMap: Texture | null;

The environment map.
null

property envMapRotation

envMapRotation: Euler;

The rotation of the environment map in radians.
(0,0,0)

property flatShading

flatShading: boolean;

Whether the material is rendered with flat shading or not.
false

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property lightMap

lightMap: Texture | null;

The light map. Requires a second set of UVs.
null

property lightMapIntensity

lightMapIntensity: number;

Intensity of the baked light.
1

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property normalMap

normalMap: Texture | null;

The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting. In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.
null

property normalMapType

normalMapType: NormalMapTypes;

The type of normal map.
TangentSpaceNormalMap

property normalScale

normalScale: Vector2;

How much the normal map affects the material. Typical value range is [0,1].
(1,1)

property reflectivity

reflectivity: number;

How much the environment map affects the surface. The valid range is between 0 (no reflections) and 1 (full reflections).
1

property refractionRatio

refractionRatio: number;

The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping modes CubeRefractionMapping and EquirectangularRefractionMapping. The refraction ratio should not exceed 1.
0.98

property shininess

shininess: number;

How shiny the specular highlight is; a higher value gives a sharper highlight.
30

property specular

specular: Color;

Specular color of the material. The default color is set to 0x111111 (very dark grey)
This defines how shiny the material is and the color of its shine.

property specularMap

specularMap: Texture | null;

The specular map value affects both how much the specular surface highlight contributes and how much of the environment map affects the surface.
null

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinecap

wireframeLinecap: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe ends.
Can only be used with SVGRenderer.
'round'

property wireframeLinejoin

wireframeLinejoin: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe joints.
Can only be used with SVGRenderer.
'round'

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
Can only be used with SVGRenderer.
1

interface MeshPhongMaterialProperties

interface MeshPhongMaterialProperties extends MeshPhongNodeMaterialNodeProperties {}

interface MeshPhysicalMaterial

interface MeshPhysicalMaterial extends MeshPhysicalMaterialProperties {}

interface MeshPhysicalMaterialParameters

interface MeshPhysicalMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshPhysicalMaterialProperties>
    > {}

interface MeshPhysicalMaterialProperties

interface MeshPhysicalMaterialProperties extends MeshStandardMaterialProperties {}

property anisotropyMap

anisotropyMap: Texture | null;

Red and green channels represent the anisotropy direction in [-1, 1] tangent, bitangent space, to be rotated by anisotropyRotation. The blue channel contains strength as [0, 1] to be multiplied by anisotropy.
null

property anisotropyRotation

anisotropyRotation: number;

The rotation of the anisotropy in tangent, bitangent space, measured in radians counter-clockwise from the tangent. When anisotropyMap is present, this property provides additional rotation to the vectors in the texture.
1

property attenuationColor

attenuationColor: Color;

The color that white light turns into due to absorption when reaching the attenuation distance.
(1,1,1)

property attenuationDistance

attenuationDistance: number;

Density of the medium given as the average distance that light travels in the medium before interacting with a particle. The value is given in world space units, and must be greater than zero.
Infinity

property clearcoatMap

clearcoatMap: Texture | null;

The red channel of this texture is multiplied against clearcoat, for per-pixel control over a coating's intensity.
null

property clearcoatNormalMap

clearcoatNormalMap: Texture | null;

Can be used to enable independent normals for the clear coat layer.
null

property clearcoatNormalScale

clearcoatNormalScale: Vector2;

How much clearcoatNormalMap affects the clear coat layer, from (0,0) to (1,1).
(1,1)

property clearcoatRoughness

clearcoatRoughness: number;

Roughness of the clear coat layer, from 0.0 to 1.0.
0

property clearcoatRoughnessMap

clearcoatRoughnessMap: Texture | null;

The green channel of this texture is multiplied against clearcoatRoughness, for per-pixel control over a coating's roughness.
null

property ior

ior: number;

Index-of-refraction for non-metallic materials, from 1.0 to 2.333.
1.5

property iridescenceIOR

iridescenceIOR: number;

Strength of the iridescence RGB color shift effect, represented by an index-of-refraction. Between 1.0 to 2.333.
1.3

property iridescenceMap

iridescenceMap: Texture | null;

The red channel of this texture is multiplied against iridescence, for per-pixel control over iridescence.
null

property iridescenceThicknessMap

iridescenceThicknessMap: Texture | null;

A texture that defines the thickness of the iridescence layer, stored in the green channel. Minimum and maximum values of thickness are defined by iridescenceThicknessRange array: - 0.0 in the green channel will result in thickness equal to first element of the array. - 1.0 in the green channel will result in thickness equal to second element of the array. - Values in-between will linearly interpolate between the elements of the array.
null

property iridescenceThicknessRange

iridescenceThicknessRange: [number, number];

Array of exactly 2 elements, specifying minimum and maximum thickness of the iridescence layer. Thickness of iridescence layer has an equivalent effect of the one thickness has on ior.
[100,400]

property sheenColor

sheenColor: Color;

The sheen tint.
(0,0,0)

property sheenColorMap

sheenColorMap: Texture | null;

The RGB channels of this texture are multiplied against sheenColor, for per-pixel control over sheen tint.
null

property sheenRoughness

sheenRoughness: number;

Roughness of the sheen layer, from 0.0 to 1.0.
1

property sheenRoughnessMap

sheenRoughnessMap: Texture | null;

The alpha channel of this texture is multiplied against sheenRoughness, for per-pixel control over sheen roughness.
null

property specularColor

specularColor: Color;

Tints the specular reflection at normal incidence for non-metals only.
(1,1,1)

property specularColorMap

specularColorMap: Texture | null;

The RGB channels of this texture are multiplied against specularColor, for per-pixel control over specular color.
null

property specularIntensity

specularIntensity: number;

A float that scales the amount of specular reflection for non-metals only. When set to zero, the model is effectively Lambertian. From 0.0 to 1.0.
1

property specularIntensityMap

specularIntensityMap: Texture | null;

The alpha channel of this texture is multiplied against specularIntensity, for per-pixel control over specular intensity.
null

property thickness

thickness: number;

The thickness of the volume beneath the surface. The value is given in the coordinate space of the mesh. If the value is 0 the material is thin-walled. Otherwise the material is a volume boundary.
0

property thicknessMap

thicknessMap: Texture | null;

A texture that defines the thickness, stored in the green channel. This will be multiplied by thickness.
null

property transmissionMap

transmissionMap: Texture | null;

The red channel of this texture is multiplied against transmission, for per-pixel control over optical transparency.
null

index signature

set anisotropy(value: number);

index signature

get anisotropy(): number;

The anisotropy strength, from 0.0 to 1.0.
0

index signature

set clearcoat(value: number);

index signature

get clearcoat(): number;

Represents the intensity of the clear coat layer, from 0.0 to 1.0. Use clear coat related properties to enable multilayer materials that have a thin translucent layer over the base layer.
0

index signature

set iridescence(value: number);

index signature

get iridescence(): number;

The intensity of the iridescence layer, simulating RGB color shift based on the angle between the surface and the viewer, from 0.0 to 1.0.
0

index signature

set dispersion(value: number);

index signature

get dispersion(): number;

Defines the strength of the angular separation of colors (chromatic aberration) transmitting through a relatively clear volume. Any value zero or larger is valid, the typical range of realistic values is [0, 1]. This property can be only be used with transmissive objects.
0

index signature

set sheen(value: number);

index signature

get sheen(): number;

The intensity of the sheen layer, from 0.0 to 1.0.
0

index signature

set transmission(value: number);

index signature

get transmission(): number;

Degree of transmission (or optical transparency), from 0.0 to 1.0.
Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are fully transmissive. The transmission property can be used to model these materials.
When transmission is non-zero, opacity should be set to 1.
0

index signature

get reflectivity(): number;

Degree of reflectivity, from 0.0 to 1.0. Default is 0.5, which corresponds to an index-of-refraction of 1.5.
This models the reflectivity of non-metallic materials. It has no effect when metalness is 1.0
MeshPhysicalMaterial#reflectivity 0.5

index signature

set reflectivity(reflectivity: number);

interface MeshPhysicalMaterialProperties

interface MeshPhysicalMaterialProperties
    extends MeshPhysicalNodeMaterialNodeProperties {}

interface MeshStandardMaterial

interface MeshStandardMaterial extends MeshStandardMaterialProperties {}

interface MeshStandardMaterialParameters

interface MeshStandardMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshStandardMaterialProperties>
    > {}

interface MeshStandardMaterialProperties

interface MeshStandardMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property aoMap

aoMap: Texture | null;

The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
null

property aoMapIntensity

aoMapIntensity: number;

Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's red channel is also 1, ambient light is fully occluded on a surface.
1

property bumpMap

bumpMap: Texture | null;

The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored.
null

property bumpScale

bumpScale: number;

How much the bump map affects the material. Typical range is [0,1].
1

property color

color: Color;

Color of the material.
(1,1,1)

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property emissive

emissive: Color;

Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
(0,0,0)

property emissiveIntensity

emissiveIntensity: number;

Intensity of the emissive light. Modulates the emissive color.
1

property emissiveMap

emissiveMap: Texture | null;

Set emissive (glow) map. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.
null

property envMap

envMap: Texture | null;

The environment map. To ensure a physically correct rendering, environment maps are internally pre-processed with PMREMGenerator.
null

property envMapIntensity

envMapIntensity: number;

Scales the effect of the environment map by multiplying its color.
1

property envMapRotation

envMapRotation: Euler;

The rotation of the environment map in radians.
(0,0,0)

property flatShading

flatShading: boolean;

Whether the material is rendered with flat shading or not.
false

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property lightMap

lightMap: Texture | null;

The light map. Requires a second set of UVs.
null

property lightMapIntensity

lightMapIntensity: number;

Intensity of the baked light.
1

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property metalness

metalness: number;

How much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, with nothing (usually) in between. A value between 0.0 and 1.0 could be used for a rusty metal look. If metalnessMap is also provided, both values are multiplied.
0

property metalnessMap

metalnessMap: Texture | null;

The blue channel of this texture is used to alter the metalness of the material.
null

property normalMap

normalMap: Texture | null;

The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting. In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.
null

property normalMapType

normalMapType: NormalMapTypes;

The type of normal map.
TangentSpaceNormalMap

property normalScale

normalScale: Vector2;

How much the normal map affects the material. Typical value range is [0,1].
(1,1)

property roughness

roughness: number;

How rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse. If roughnessMap is also provided, both values are multiplied.
1

property roughnessMap

roughnessMap: Texture | null;

The green channel of this texture is used to alter the roughness of the material.
null

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinecap

wireframeLinecap: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe ends.
Can only be used with SVGRenderer.
'round'

property wireframeLinejoin

wireframeLinejoin: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe joints.
Can only be used with SVGRenderer.
'round'

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
Can only be used with SVGRenderer.
1

interface MeshStandardMaterialProperties

interface MeshStandardMaterialProperties
    extends MeshStandardNodeMaterialNodeProperties {}

interface MeshToonMaterial

interface MeshToonMaterial extends MeshToonMaterialProperties {}

interface MeshToonMaterialParameters

interface MeshToonMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<MeshToonMaterialProperties>
    > {}

interface MeshToonMaterialProperties

interface MeshToonMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property aoMap

aoMap: Texture | null;

The red channel of this texture is used as the ambient occlusion map. Requires a second set of UVs.
null

property aoMapIntensity

aoMapIntensity: number;

Intensity of the ambient occlusion effect. Range is [0,1], where 0 disables ambient occlusion. Where intensity is 1 and the AO map's red channel is also 1, ambient light is fully occluded on a surface.
1

property bumpMap

bumpMap: Texture | null;

The texture to create a bump map. The black and white values map to the perceived depth in relation to the lights. Bump doesn't actually affect the geometry of the object, only the lighting. If a normal map is defined this will be ignored.
null

property bumpScale

bumpScale: number;

How much the bump map affects the material. Typical range is [0,1].
1

property color

color: Color;

Color of the material.
(1,1,1)

property displacementBias

displacementBias: number;

The offset of the displacement map's values on the mesh's vertices. The bias is added to the scaled sample of the displacement map. Without a displacement map set, this value is not applied.
0

property displacementMap

displacementMap: Texture | null;

The displacement map affects the position of the mesh's vertices. Unlike other maps which only affect the light and shade of the material the displaced vertices can cast shadows, block other objects, and otherwise act as real geometry. The displacement texture is an image where the value of each pixel (white being the highest) is mapped against, and repositions, the vertices of the mesh.
null

property displacementScale

displacementScale: number;

How much the displacement map affects the mesh (where black is no displacement, and white is maximum displacement). Without a displacement map set, this value is not applied.
0

property emissive

emissive: Color;

Emissive (light) color of the material, essentially a solid color unaffected by other lighting.
(0,0,0)

property emissiveIntensity

emissiveIntensity: number;

Intensity of the emissive light. Modulates the emissive color.
1

property emissiveMap

emissiveMap: Texture | null;

Set emissive (glow) map. The emissive map color is modulated by the emissive color and the emissive intensity. If you have an emissive map, be sure to set the emissive color to something other than black.
null

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property gradientMap

gradientMap: Texture | null;

Gradient map for toon shading. It's required to set Texture#minFilter and Texture#magFilter to when using this type of texture.
null

property lightMap

lightMap: Texture | null;

The light map. Requires a second set of UVs.
null

property lightMapIntensity

lightMapIntensity: number;

Intensity of the baked light.
1

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property normalMap

normalMap: Texture | null;

The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting. In case the material has a normal map authored using the left handed convention, the y component of normalScale should be negated to compensate for the different handedness.
null

property normalMapType

normalMapType: NormalMapTypes;

The type of normal map.
TangentSpaceNormalMap

property normalScale

normalScale: Vector2;

How much the normal map affects the material. Typical value range is [0,1].
(1,1)

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinecap

wireframeLinecap: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe ends.
Can only be used with SVGRenderer.
'round'

property wireframeLinejoin

wireframeLinejoin: 'round' | 'bevel' | 'miter';

Defines appearance of wireframe joints.
Can only be used with SVGRenderer.
'round'

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
Can only be used with SVGRenderer.
1

interface MeshToonMaterialProperties

interface MeshToonMaterialProperties extends MeshToonNodeMaterialNodeProperties {}

interface MixerControlInterpolant

interface MixerControlInterpolant extends LinearInterpolant {}

interface MorphTarget

interface MorphTarget {}

property name

name: string;

property vertices

vertices: Vector3[];

interface Object3D

interface Object3D {}

property count

count?: number | undefined;

property occlusionTest

occlusionTest?: boolean | undefined;

property static

static?: boolean | undefined;

interface Object3DEventMap

interface Object3DEventMap {}

property added

added: {};

Fires when the object has been added to its parent object.

property childadded

childadded: { child: Object3D };

Fires when a new child object has been added.

property childremoved

childremoved: { child: Object3D };

Fires when a new child object has been removed.

property removed

removed: {};

Fires when the object has been removed from its parent object.

interface Object3DJSON

interface Object3DJSON {}

property metadata

metadata?: { version: number; type: string; generator: string };

property object

object: Object3DJSONObject;

interface Object3DJSONObject

interface Object3DJSONObject {}

property animations

animations?: string[];

property castShadow

castShadow?: boolean;

property children

children?: string[];

property frustumCulled

frustumCulled?: boolean;

property layers

layers: number;

property material

material?: string | string[];

property matrix

matrix: Matrix4Tuple;

property matrixAutoUpdate

matrixAutoUpdate?: boolean;

property name

name?: string;

property receiveShadow

receiveShadow?: boolean;

property renderOrder

renderOrder?: number;

property type

type: string;

property up

up: Vector3Tuple;

property userData

userData?: Record<string, unknown>;

property uuid

uuid: string;

property visible

visible?: boolean;

interface OffscreenCanvas

interface OffscreenCanvas extends EventTarget {}

Shim for OffscreenCanvas.

interface OrthographicCameraJSON

interface OrthographicCameraJSON extends Object3DJSON {}

property object

object: OrthographicCameraJSONObject;

interface OrthographicCameraJSONObject

interface OrthographicCameraJSONObject extends Object3DJSONObject {}

property bottom

bottom: number;

property far

far: number;

property left

left: number;

property near

near: number;

property right

right: number;

property top

top: number;

property view

view?: {
    enabled: boolean;
    fullWidth: number;
    fullHeight: number;
    offsetX: number;
    offsetY: number;
    width: number;
    height: number;
};

property zoom

zoom: number;

interface ParseTrackNameResults

interface ParseTrackNameResults {}

property nodeName

nodeName: string;

property objectIndex

objectIndex: string;

property objectName

objectName: string;

property propertyIndex

propertyIndex: string;

property propertyName

propertyName: string;

interface PathJSON

interface PathJSON extends CurvePathJSON {}

property currentPoint

currentPoint: Vector2Tuple;

interface PerspectiveCameraJSON

interface PerspectiveCameraJSON extends Object3DJSON {}

property object

object: PerspectiveCameraJSONObject;

interface PerspectiveCameraJSONObject

interface PerspectiveCameraJSONObject extends Object3DJSONObject {}

property aspect

aspect: number;

property far

far: number;

property filmGauge

filmGauge: number;

property filmOffset

filmOffset: number;

property focus

focus: number;

property fov

fov: number;

property near

near: number;

property view

view?: {
    enabled: boolean;
    fullWidth: number;
    fullHeight: number;
    offsetX: number;
    offsetY: number;
    width: number;
    height: number;
};

property zoom

zoom: number;

interface PMREMGeneratorOptions

interface PMREMGeneratorOptions {}

property position

position?: Vector3 | undefined;

property size

size?: number | undefined;

interface PointLightJSON

interface PointLightJSON extends LightJSON {}

property decay

decay: number;

property distance

distance: number;

property shadow

shadow: LightShadowJSON;

interface PointsMaterial

interface PointsMaterial extends PointsMaterialProperties {}

interface PointsMaterialParameters

interface PointsMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<PointsMaterialProperties>
    > {}

interface PointsMaterialProperties

interface PointsMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property color

color: Color;

Color of the material.
(1,1,1)

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property size

size: number;

Defines the size of the points in pixels.
Might be capped if the value exceeds hardware dependent parameters like [gl.ALIASED_POINT_SIZE_RANGE](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getParamete).
1

property sizeAttenuation

sizeAttenuation: boolean;

Specifies whether size of individual points is attenuated by the camera depth (perspective camera only).
true

interface PointsMaterialProperties

interface PointsMaterialProperties extends PointsNodeMaterialNodeProperties {}

interface QuaternionLike

interface QuaternionLike {}

property w

readonly w: number;

property x

readonly x: number;

property y

readonly y: number;

property z

readonly z: number;

interface RaycasterParameters

interface RaycasterParameters {}

property Line

Line: { threshold: number };

property Line2

Line2?: { threshold: number };

property LOD

LOD: any;

property Mesh

Mesh: any;

property Points

Points: { threshold: number };

property Sprite

Sprite: any;

interface RenderItem

interface RenderItem {}

property geometry

geometry: BufferGeometry | null;

property group

group: Group | null;

property groupOrder

groupOrder: number;

property id

id: number;

property material

material: Material;

property object

object: Object3D;

property program

program: WebGLProgram;

property renderOrder

renderOrder: number;

property z

z: number;

interface RenderTargetOptions

interface RenderTargetOptions extends TextureParameters {}

property count

count?: number | undefined;

property depth

depth?: number | undefined;

property depthBuffer

depthBuffer?: boolean | undefined;

property depthTexture

depthTexture?: DepthTexture | null | undefined;

property multiview

multiview?: boolean | undefined;

property resolveDepthBuffer

resolveDepthBuffer?: boolean | undefined;

property resolveStencilBuffer

resolveStencilBuffer?: boolean | undefined;

property samples

samples?: number | undefined;

Defines the count of MSAA samples. Can only be used with WebGL 2. Default is **0**. 0

property stencilBuffer

stencilBuffer?: boolean | undefined;

interface RGB

interface RGB {}

property b

b: number;

property g

g: number;

property r

r: number;

interface Scene

interface Scene {}

property backgroundNode

backgroundNode?: Node | null | undefined;

property environmentNode

environmentNode?: Node | null | undefined;

property fogNode

fogNode?: Node | null | undefined;

interface SceneJSON

interface SceneJSON extends Object3DJSON {}

property object

object: SceneJSONObject;

interface SceneJSONObject

interface SceneJSONObject extends Object3DJSONObject {}

property backgroundBlurriness

backgroundBlurriness?: number;

property backgroundIntensity

backgroundIntensity?: number;

property backgroundRotation

backgroundRotation: EulerTuple;

property environmentIntensity

environmentIntensity?: number;

property environmentRotation

environmentRotation: EulerTuple;

property fog

fog?: FogJSON | FogExp2JSON;

interface ShaderLibShader

interface ShaderLibShader {}

property fragmentShader

fragmentShader: string;

property uniforms

uniforms: { [uniform: string]: IUniform };

property vertexShader

vertexShader: string;

interface ShaderMaterial

interface ShaderMaterial extends ShaderMaterialProperties {}

property defines

defines: Record<string, unknown>;

interface ShaderMaterialJSON

interface ShaderMaterialJSON extends MaterialJSON {}

property clipping

clipping: boolean;

property defines

defines?: Record<string, unknown>;

property extensions

extensions?: Record<string, boolean>;

property fragmentShader

fragmentShader: string;

property glslVersion

glslVersion: number | null;

property lights

lights: boolean;

property uniforms

uniforms: Record<string, ShaderMaterialUniformJSON>;

property vertexShader

vertexShader: string;

interface ShaderMaterialParameters

interface ShaderMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<ShaderMaterialProperties>
    > {}

interface ShaderMaterialProperties

interface ShaderMaterialProperties extends MaterialProperties {}

property clipping

clipping: boolean;

Defines whether this material supports clipping; true to let the renderer pass the clippingPlanes uniform.
false

property defaultAttributeValues

defaultAttributeValues: {
    color: [number, number, number];
    uv: [number, number];
    uv1: [number, number];
};

When the rendered geometry doesn't include these attributes but the material does, these default values will be passed to the shaders. This avoids errors when buffer data is missing.
- color: [ 1, 1, 1 ] - uv: [ 0, 0 ] - uv1: [ 0, 0 ]

property defines

defines: Record<string, unknown>;

Defines custom constants using #define directives within the GLSL code for both the vertex shader and the fragment shader; each key/value pair yields another directive.
defines: { FOO: 15, BAR: true }
Yields the lines:
#define FOO 15 #define BAR true

property extensions

extensions: {
    clipCullDistance: boolean;
    multiDraw: boolean;
};

This object allows to enable certain WebGL 2 extensions.
- clipCullDistance: set to true to use vertex shader clipping - multiDraw: set to true to use vertex shader multi_draw / enable gl_DrawID

property fog

fog: boolean;

Defines whether the material color is affected by global fog settings; true to pass fog uniforms to the shader.
Setting this property to true requires the definition of fog uniforms. It is recommended to use UniformsUtils.merge() to combine the custom shader uniforms with predefined fog uniforms.
const material = new ShaderMaterial( { uniforms: UniformsUtils.merge( [ UniformsLib[ 'fog' ], shaderUniforms ] ); vertexShader: vertexShader, fragmentShader: fragmentShader, fog: true } );
false

property fragmentShader

fragmentShader: string;

Fragment shader GLSL code. This is the actual code for the shader.

property glslVersion

glslVersion: GLSLVersion | null;

Defines the GLSL version of custom shader code.
null

property index0AttributeName

index0AttributeName: string | undefined;

If set, this calls [gl.bindAttribLocation](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bindAttribLocation) to bind a generic vertex index to an attribute variable.
undefined

property lights

lights: boolean;

Defines whether this material uses lighting; true to pass uniform data related to lighting to this shader.
false

property linewidth

linewidth: number;

Controls line thickness or lines.
WebGL and WebGPU ignore this setting and always render line primitives with a width of one pixel.
1

property uniforms

uniforms: { [uniform: string]: IUniform };

An object of the form:
{ "uniform1": { value: 1.0 }, "uniform2": { value: 2 } }
specifying the uniforms to be passed to the shader code; keys are uniform names, values are definitions of the form
{ value: 1.0 }
where value is the value of the uniform. Names must match the name of the uniform, as defined in the GLSL code. Note that uniforms are refreshed on every frame, so updating the value of the uniform will immediately update the value available to the GLSL code.

property uniformsGroups

uniformsGroups: Array<UniformsGroup>;

An array holding uniforms groups for configuring UBOs.

property uniformsNeedUpdate

uniformsNeedUpdate: boolean;

Can be used to force a uniform update while changing uniforms in Object3D#onBeforeRender.
false

property vertexShader

vertexShader: string;

Vertex shader GLSL code. This is the actual code for the shader.

property wireframe

wireframe: boolean;

Renders the geometry as a wireframe.
false

property wireframeLinewidth

wireframeLinewidth: number;

Controls the thickness of the wireframe.
WebGL and WebGPU ignore this property and always render 1 pixel wide lines.
1

interface ShadowMaterial

interface ShadowMaterial extends ShadowMaterialProperties {}

interface ShadowMaterialParameters

interface ShadowMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<ShadowMaterialProperties>
    > {}

interface ShadowMaterialProperties

interface ShadowMaterialProperties extends MaterialProperties {}

property color

color: Color;

Color of the material.
(0,0,0)

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

interface ShadowMaterialProperties

interface ShadowMaterialProperties extends ShadowNodeMaterialNodeProperties {}

interface ShapeJSON

interface ShapeJSON extends PathJSON {}

property holes

holes: PathJSON[];

property uuid

uuid: string;

interface SkeletonJSON

interface SkeletonJSON {}

property boneInverses

boneInverses: Matrix4Tuple[];

property bones

bones: string[];

property metadata

metadata: { version: number; type: string; generator: string };

property uuid

uuid: string;

interface SkinnedMeshJSON

interface SkinnedMeshJSON extends MeshJSON {}

property object

object: SkinnedMeshJSONObject;

interface SkinnedMeshJSONObject

interface SkinnedMeshJSONObject extends MeshJSONObject {}

property bindMatrix

bindMatrix: Matrix4Tuple;

property bindMode

bindMode: BindMode;

property skeleton

skeleton?: string;

interface SphereJSON

interface SphereJSON {}

property center

center: number[];

property radius

radius: number;

interface SpotLightJSON

interface SpotLightJSON extends LightJSON {}

property angle

angle: number;

property decay

decay: number;

property distance

distance: number;

property map

map?: string | undefined;

property penumbra

penumbra: number;

property shadow

shadow: LightShadowJSON;

property target

target: string;

interface SpriteMaterial

interface SpriteMaterial extends SpriteMaterialProperties {}

interface SpriteMaterialParameters

interface SpriteMaterialParameters
    extends Partial<
        MapColorPropertiesToColorRepresentations<SpriteMaterialProperties>
    > {}

interface SpriteMaterialProperties

interface SpriteMaterialProperties extends MaterialProperties {}

property alphaMap

alphaMap: Texture | null;

The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.
null

property color

color: Color;

Color of the material.
(1,1,1)

property fog

fog: boolean;

Whether the material is affected by fog or not.
true

property map

map: Texture | null;

The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map color is modulated by the diffuse color.
null

property rotation

rotation: number;

The rotation of the sprite in radians.
0

property sizeAttenuation

sizeAttenuation: boolean;

Specifies whether size of the sprite is attenuated by the camera depth (perspective camera only).
true

interface SpriteMaterialProperties

interface SpriteMaterialProperties extends SpriteNodeMaterialNodeProperties {}

interface TextureJSON

interface TextureJSON {}

property anisotropy

anisotropy: number;

property center

center: [x: number, y: number];

property channel

channel: number;

property colorSpace

colorSpace: string;

property flipY

flipY: boolean;

property format

format: AnyPixelFormat;

property generateMipmaps

generateMipmaps: boolean;

property image

image: string;

property internalFormat

internalFormat: PixelFormatGPU | null;

property magFilter

magFilter: MagnificationTextureFilter;

property mapping

mapping: AnyMapping;

property metadata

metadata: { version: number; type: string; generator: string };

property minFilter

minFilter: MinificationTextureFilter;

property name

name: string;

property offset

offset: [x: number, y: number];

property premultiplyAlpha

premultiplyAlpha: boolean;

property repeat

repeat: [x: number, y: number];

property rotation

rotation: number;

property type

type: TextureDataType;

property unpackAlignment

unpackAlignment: number;

property userData

userData?: Record<string, unknown>;

property uuid

uuid: string;

property wrap

wrap: [wrapS: number, wrapT: number];

interface TextureParameters

interface TextureParameters {}

property anisotropy

anisotropy?: number | undefined;

property colorSpace

colorSpace?: ColorSpace | undefined;

property flipY

flipY?: boolean | undefined;

property format

format?: PixelFormat | undefined;

property generateMipmaps

generateMipmaps?: boolean | undefined;

property internalFormat

internalFormat?: PixelFormatGPU | null | undefined;

property magFilter

magFilter?: MagnificationTextureFilter | undefined;

property mapping

mapping?: AnyMapping | undefined;

property minFilter

minFilter?: MinificationTextureFilter | undefined;

property type

type?: TextureDataType | undefined;

property wrapR

wrapR?: Wrapping | undefined;

property wrapS

wrapS?: Wrapping | undefined;

property wrapT

wrapT?: Wrapping | undefined;

interface UVGenerator

interface UVGenerator {}

method generateSideWallUV

generateSideWallUV: (
    geometry: ExtrudeGeometry,
    vertices: number[],
    indexA: number,
    indexB: number,
    indexC: number,
    indexD: number
) => Vector2[];

method generateTopUV

generateTopUV: (
    geometry: ExtrudeGeometry,
    vertices: number[],
    indexA: number,
    indexB: number,
    indexC: number
) => Vector2[];

interface Vector2Like

interface Vector2Like {}

property x

readonly x: number;

property y

readonly y: number;

interface Vector3Like

interface Vector3Like {}

property x

readonly x: number;

property y

readonly y: number;

property z

readonly z: number;

interface Vector4Like

interface Vector4Like {}

property w

readonly w: number;

property x

readonly x: number;

property y

readonly y: number;

property z

readonly z: number;

interface WebGLCapabilitiesParameters

interface WebGLCapabilitiesParameters {}

property logarithmicDepthBuffer

logarithmicDepthBuffer?: boolean | undefined;

default is false.

property precision

precision?: string | undefined;

shader precision. Can be "highp", "mediump" or "lowp".

property reversedDepthBuffer

reversedDepthBuffer?: boolean | undefined;

default is false.

interface WebGLDebug

interface WebGLDebug {}

property checkShaderErrors

checkShaderErrors: boolean;

Enables error checking and reporting when shader programs are being compiled.

property onShaderError

onShaderError:
    | ((
          gl: WebGLRenderingContext,
          program: WebGLProgram,
          glVertexShader: WebGLShader,
          glFragmentShader: WebGLShader
      ) => void)
    | null;

A callback function that can be used for custom error reporting. The callback receives the WebGL context, an instance of WebGLProgram as well two instances of WebGLShader representing the vertex and fragment shader. Assigning a custom function disables the default error reporting. null

interface WebGLLightsState

interface WebGLLightsState {}

property ambient

ambient: number[];

property directional

directional: any[];

property directionalShadow

directionalShadow: any[];

property directionalShadowMap

directionalShadowMap: any[];

property directionalShadowMatrix

directionalShadowMatrix: any[];

property hash

hash: {
    directionalLength: number;
    pointLength: number;
    spotLength: number;
    rectAreaLength: number;
    hemiLength: number;

    numDirectionalShadows: number;
    numPointShadows: number;
    numSpotShadows: number;
    numSpotMaps: number;

    numLightProbes: number;
};

property hemi

hemi: any[];

property numLightProbes

numLightProbes: number;

property numSpotLightShadowsWithMaps

numSpotLightShadowsWithMaps: number;

property point

point: any[];

property pointShadow

pointShadow: any[];

property pointShadowMap

pointShadowMap: any[];

property pointShadowMatrix

pointShadowMatrix: any[];

property probe

probe: any[];

property rectArea

rectArea: any[];

property spot

spot: any[];

property spotShadow

spotShadow: any[];

property spotShadowMap

spotShadowMap: any[];

property spotShadowMatrix

spotShadowMatrix: any[];

property version

version: number;

interface WebGLProgramParameters

interface WebGLProgramParameters {}

property alphaHash

alphaHash: boolean;

property alphaMap

alphaMap: boolean;

property alphaMapUv

alphaMapUv: string | false;

property alphaTest

alphaTest: boolean;

property alphaToCoverage

alphaToCoverage: boolean;

property anisotropy

anisotropy: boolean;

property anisotropyMap

anisotropyMap: boolean;

property anisotropyMapUv

anisotropyMapUv: string | false;

property aoMap

aoMap: boolean;

property aoMapUv

aoMapUv: string | false;

property batching

batching: boolean;

property batchingColor

batchingColor: boolean;

property bumpMap

bumpMap: boolean;

property bumpMapUv

bumpMapUv: string | false;

property clearcoat

clearcoat: boolean;

property clearcoatMap

clearcoatMap: boolean;

property clearcoatMapUv

clearcoatMapUv: string | false;

property clearcoatNormalMap

clearcoatNormalMap: boolean;

property clearcoatNormalMapUv

clearcoatNormalMapUv: string | false;

property clearcoatRoughnessMap

clearcoatRoughnessMap: boolean;

property clearcoatRoughnessMapUv

clearcoatRoughnessMapUv: string | false;

property combine

combine: Combine | undefined;

property customFragmentShaderID

customFragmentShaderID: string | undefined;

property customProgramCacheKey

customProgramCacheKey: string;

property customVertexShaderID

customVertexShaderID: string | undefined;

property decodeVideoTexture

decodeVideoTexture: boolean;

property decodeVideoTextureEmissive

decodeVideoTextureEmissive: boolean;

property defines

defines: { [define: string]: string | number | boolean } | undefined;

property depthPacking

depthPacking: DepthPackingStrategies | 0;

property dispersion

dispersion: boolean;

property displacementMap

displacementMap: boolean;

property displacementMapUv

displacementMapUv: string | false;

property dithering

dithering: boolean;

property doubleSided

doubleSided: boolean;

property emissiveMap

emissiveMap: boolean;

property emissiveMapUv

emissiveMapUv: string | false;

property envMap

envMap: boolean;

property envMapCubeUVHeight

envMapCubeUVHeight: number | null;

property envMapMode

envMapMode: Mapping | false;

property extensionClipCullDistance

extensionClipCullDistance: boolean;

property extensionMultiDraw

extensionMultiDraw: boolean;

property flatShading

flatShading: boolean;

property flipSided

flipSided: boolean;

property fog

fog: boolean;

property fogExp2

fogExp2: boolean;

property fragmentShader

fragmentShader: string;

property glslVersion

glslVersion: GLSLVersion | null | undefined;

property gradientMap

gradientMap: boolean;

property index0AttributeName

index0AttributeName: string | undefined;

property instancing

instancing: boolean;

property instancingColor

instancingColor: boolean;

property instancingMorph

instancingMorph: boolean;

property iridescence

iridescence: boolean;

property iridescenceMap

iridescenceMap: boolean;

property iridescenceMapUv

iridescenceMapUv: string | false;

property iridescenceThicknessMap

iridescenceThicknessMap: boolean;

property iridescenceThicknessMapUv

iridescenceThicknessMapUv: string | false;

property isRawShaderMaterial

isRawShaderMaterial: boolean;

property lightMap

lightMap: boolean;

property lightMapUv

lightMapUv: string | false;

property logarithmicDepthBuffer

logarithmicDepthBuffer: boolean;

property map

map: boolean;

property mapUv

mapUv: string | false;

property matcap

matcap: boolean;

property metalnessMap

metalnessMap: boolean;

property metalnessMapUv

metalnessMapUv: string | false;

property morphColors

morphColors: boolean;

property morphNormals

morphNormals: boolean;

property morphTargets

morphTargets: boolean;

property morphTargetsCount

morphTargetsCount: number;

property morphTextureStride

morphTextureStride: number;

property normalMap

normalMap: boolean;

property normalMapObjectSpace

normalMapObjectSpace: boolean;

property normalMapTangentSpace

normalMapTangentSpace: boolean;

property normalMapUv

normalMapUv: string | false;

property numClipIntersection

numClipIntersection: number;

property numClippingPlanes

numClippingPlanes: number;

property numDirLights

numDirLights: number;

property numDirLightShadows

numDirLightShadows: number;

property numHemiLights

numHemiLights: number;

property numLightProbes

numLightProbes: number;

property numPointLights

numPointLights: number;

property numPointLightShadows

numPointLightShadows: number;

property numRectAreaLights

numRectAreaLights: number;

property numSpotLightMaps

numSpotLightMaps: number;

property numSpotLights

numSpotLights: number;

property numSpotLightShadows

numSpotLightShadows: number;

property numSpotLightShadowsWithMaps

numSpotLightShadowsWithMaps: number;

property opaque

opaque: boolean;

property outputColorSpace

outputColorSpace: string;

property pointsUvs

pointsUvs: boolean;

property precision

precision: 'lowp' | 'mediump' | 'highp';

property premultipliedAlpha

premultipliedAlpha: boolean;

property rendererExtensionParallelShaderCompile

rendererExtensionParallelShaderCompile: boolean;

property reverseDepthBuffer

reverseDepthBuffer: boolean;

property roughnessMap

roughnessMap: boolean;

property roughnessMapUv

roughnessMapUv: string | false;

property shaderID

shaderID: string;

property shaderName

shaderName: string;

property shaderType

shaderType: string;

property shadowMapEnabled

shadowMapEnabled: boolean;

property shadowMapType

shadowMapType: ShadowMapType;

property sheen

sheen: boolean;

property sheenColorMap

sheenColorMap: boolean;

property sheenColorMapUv

sheenColorMapUv: string | false;

property sheenRoughnessMap

sheenRoughnessMap: boolean;

property sheenRoughnessMapUv

sheenRoughnessMapUv: string | false;

property sizeAttenuation

sizeAttenuation: boolean;

property skinning

skinning: boolean;

property specularColorMap

specularColorMap: boolean;

property specularColorMapUv

specularColorMapUv: string | false;

property specularIntensityMap

specularIntensityMap: boolean;

property specularIntensityMapUv

specularIntensityMapUv: string | false;

property specularMap

specularMap: boolean;

property specularMapUv

specularMapUv: string | false;

property thicknessMap

thicknessMap: boolean;

property thicknessMapUv

thicknessMapUv: string | false;

property toneMapping

toneMapping: ToneMapping;

property transmission

transmission: boolean;

property transmissionMap

transmissionMap: boolean;

property transmissionMapUv

transmissionMapUv: string | false;

property useDepthPacking

useDepthPacking: boolean;

property useFog

useFog: boolean;

property vertexAlphas

vertexAlphas: boolean;

property vertexColors

vertexColors: boolean;

property vertexShader

vertexShader: string;

property vertexTangents

vertexTangents: boolean;

property vertexUv1s

vertexUv1s: boolean;

property vertexUv2s

vertexUv2s: boolean;

property vertexUv3s

vertexUv3s: boolean;

interface WebGLProgramParametersWithUniforms

interface WebGLProgramParametersWithUniforms extends WebGLProgramParameters {}

property uniforms

uniforms: { [uniform: string]: IUniform };

interface WebGLRendererParameters

interface WebGLRendererParameters extends WebGLCapabilitiesParameters {}

property alpha

alpha?: boolean | undefined;

default is false.

property antialias

antialias?: boolean | undefined;

default is false.

property canvas

canvas?: HTMLCanvasElement | OffscreenCanvas | undefined;

A Canvas where the renderer draws its output.

property context

context?: WebGLRenderingContext | undefined;

A WebGL Rendering Context. (https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) Default is null

property depth

depth?: boolean | undefined;

default is true.

property failIfMajorPerformanceCaveat

failIfMajorPerformanceCaveat?: boolean | undefined;

default is false.

property outputBufferType

outputBufferType?: TextureDataType | undefined;

UnsignedByteType

property powerPreference

powerPreference?: WebGLPowerPreference | undefined;

Can be "high-performance", "low-power" or "default"

property premultipliedAlpha

premultipliedAlpha?: boolean | undefined;

default is true.

property preserveDrawingBuffer

preserveDrawingBuffer?: boolean | undefined;

default is false.

property stencil

stencil?: boolean | undefined;

default is false.

interface WebXRManagerEventMap

interface WebXRManagerEventMap {}

property planeadded

planeadded: { data: XRPlane };

property planechanged

planechanged: { data: XRPlane };

property planeremoved

planeremoved: { data: XRPlane };

property planesdetected

planesdetected: { data: XRPlaneSet };

property sessionend

sessionend: {};

property sessionstart

sessionstart: {};

interface WebXRSpaceEventMap

interface WebXRSpaceEventMap extends Object3DEventMap {}

property connected

connected: { data: XRInputSource };

property disconnected

disconnected: { data: XRInputSource };

property move

move: {};

property pinchend

pinchend: { handedness: XRHandedness; target: WebXRController };

property pinchstart

pinchstart: { handedness: XRHandedness; target: WebXRController };

property select

select: { data: XRInputSource };

property selectend

selectend: { data: XRInputSource };

property selectstart

selectstart: { data: XRInputSource };

property squeeze

squeeze: { data: XRInputSource };

property squeezeend

squeezeend: { data: XRInputSource };

property squeezestart

squeezestart: { data: XRInputSource };

interface XRHandInputState

interface XRHandInputState {}

property pinching

pinching: boolean;

Enums

enum MOUSE

enum MOUSE {
    LEFT = 0,
    MIDDLE = 1,
    RIGHT = 2,
    ROTATE = 0,
    DOLLY = 1,
    PAN = 2,
}

member DOLLY

DOLLY = 1

member LEFT

LEFT = 0

member MIDDLE

MIDDLE = 1

member PAN

PAN = 2

member RIGHT

RIGHT = 2

member ROTATE

ROTATE = 0

enum TOUCH

enum TOUCH {
    ROTATE = 0,
    PAN = 1,
    DOLLY_PAN = 2,
    DOLLY_ROTATE = 3,
}

member DOLLY_PAN

DOLLY_PAN = 2

member DOLLY_ROTATE

DOLLY_ROTATE = 3

member PAN

PAN = 1

member ROTATE

ROTATE = 0

Type Aliases

type AnimationActionLoopStyles

type AnimationActionLoopStyles =
    | typeof LoopOnce
    | typeof LoopRepeat
    | typeof LoopPingPong;

type AnimationBlendMode

type AnimationBlendMode =
    | typeof NormalAnimationBlendMode
    | typeof AdditiveAnimationBlendMode;

type AnyMapping

type AnyMapping = Mapping | CubeTextureMapping;

Texture Mapping Modes for any type of Textures
See Also
- Mapping and CubeTextureMapping
- Texture Constants

type AnyPixelFormat

type AnyPixelFormat = PixelFormat | DepthTexturePixelFormat | CompressedPixelFormat;

All Possible Texture Pixel Formats Modes. For any Type or SubType of Textures.
Remarks
Note that the texture must have the correct set, as described in TextureDataType.
See Also
- WebGLRenderingContext.texImage2D for details.
- PixelFormat and DepthTexturePixelFormat and CompressedPixelFormat
- Texture Constants

type AttributeGPUType

type AttributeGPUType = typeof FloatType | typeof IntType;

type BindMode

type BindMode = typeof AttachedBindMode | typeof DetachedBindMode;

type Blending

type Blending =
    | typeof NoBlending
    | typeof NormalBlending
    | typeof AdditiveBlending
    | typeof SubtractiveBlending
    | typeof MultiplyBlending
    | typeof CustomBlending;

type BlendingDstFactor

type BlendingDstFactor =
    | typeof ZeroFactor
    | typeof OneFactor
    | typeof SrcColorFactor
    | typeof OneMinusSrcColorFactor
    | typeof SrcAlphaFactor
    | typeof OneMinusSrcAlphaFactor
    | typeof DstAlphaFactor
    | typeof OneMinusDstAlphaFactor
    | typeof DstColorFactor
    | typeof OneMinusDstColorFactor
    | typeof ConstantColorFactor
    | typeof OneMinusConstantColorFactor
    | typeof ConstantAlphaFactor
    | typeof OneMinusConstantAlphaFactor;

type BlendingEquation

type BlendingEquation =
    | typeof AddEquation
    | typeof SubtractEquation
    | typeof ReverseSubtractEquation
    | typeof MinEquation
    | typeof MaxEquation;

type BlendingSrcFactor

type BlendingSrcFactor = BlendingDstFactor | typeof SrcAlphaSaturateFactor;

type ColorRepresentation

type ColorRepresentation = Color | string | number;

type ColorSpace

type ColorSpace =
    | typeof NoColorSpace
    | typeof SRGBColorSpace
    | typeof LinearSRGBColorSpace;

type ColorSpaceTransfer

type ColorSpaceTransfer = typeof LinearTransfer | typeof SRGBTransfer;

type Combine

type Combine = typeof MultiplyOperation | typeof MixOperation | typeof AddOperation;

type CompressedPixelFormat

type CompressedPixelFormat =
    | typeof RGB_S3TC_DXT1_Format
    | typeof RGBA_S3TC_DXT1_Format
    | typeof RGBA_S3TC_DXT3_Format
    | typeof RGBA_S3TC_DXT5_Format
    | typeof RGB_PVRTC_4BPPV1_Format
    | typeof RGB_PVRTC_2BPPV1_Format
    | typeof RGBA_PVRTC_4BPPV1_Format
    | typeof RGBA_PVRTC_2BPPV1_Format
    | typeof RGB_ETC1_Format
    | typeof RGB_ETC2_Format
    | typeof RGBA_ETC2_EAC_Format
    | typeof R11_EAC_Format
    | typeof SIGNED_R11_EAC_Format
    | typeof RG11_EAC_Format
    | typeof SIGNED_RG11_EAC_Format
    | typeof RGBA_ASTC_4x4_Format
    | typeof RGBA_ASTC_5x4_Format
    | typeof RGBA_ASTC_5x5_Format
    | typeof RGBA_ASTC_6x5_Format
    | typeof RGBA_ASTC_6x6_Format
    | typeof RGBA_ASTC_8x5_Format
    | typeof RGBA_ASTC_8x6_Format
    | typeof RGBA_ASTC_8x8_Format
    | typeof RGBA_ASTC_10x5_Format
    | typeof RGBA_ASTC_10x6_Format
    | typeof RGBA_ASTC_10x8_Format
    | typeof RGBA_ASTC_10x10_Format
    | typeof RGBA_ASTC_12x10_Format
    | typeof RGBA_ASTC_12x12_Format
    | typeof RGBA_BPTC_Format
    | typeof RGB_BPTC_SIGNED_Format
    | typeof RGB_BPTC_UNSIGNED_Format
    | typeof RED_RGTC1_Format
    | typeof SIGNED_RED_RGTC1_Format
    | typeof RED_GREEN_RGTC2_Format
    | typeof SIGNED_RED_GREEN_RGTC2_Format;

For use with a THREE.CompressedTexture's .format property.
Remarks
Compressed Require support for correct WebGL extension.

type CoordinateSystem

type CoordinateSystem = typeof WebGLCoordinateSystem | typeof WebGPUCoordinateSystem;

type CubeTextureMapping

type CubeTextureMapping =
    | typeof CubeReflectionMapping
    | typeof CubeRefractionMapping
    | typeof CubeUVReflectionMapping;

Texture Mapping Modes for cube Textures
Remarks
CubeReflectionMapping is the _default_ value and behaver for Cube Texture Mapping.
See Also
- Texture Constants

type CullFace

type CullFace =
    | typeof CullFaceNone
    | typeof CullFaceBack
    | typeof CullFaceFront
    | typeof CullFaceFrontBack;

type CurveType

type CurveType = 'centripetal' | 'chordal' | 'catmullrom';

type DepthModes

type DepthModes =
    | typeof NeverDepth
    | typeof AlwaysDepth
    | typeof LessDepth
    | typeof LessEqualDepth
    | typeof EqualDepth
    | typeof GreaterEqualDepth
    | typeof GreaterDepth
    | typeof NotEqualDepth;

type DepthPackingStrategies

type DepthPackingStrategies =
    | typeof BasicDepthPacking
    | typeof RGBADepthPacking
    | typeof RGBDepthPacking
    | typeof RGDepthPacking;

type DepthTexturePixelFormat

type DepthTexturePixelFormat = typeof DepthFormat | typeof DepthStencilFormat;

All Texture Pixel Formats Modes for THREE.DepthTexture.
See Also
- WebGLRenderingContext.texImage2D for details.
- Texture Constants

type EulerOrder

type EulerOrder = 'XYZ' | 'YXZ' | 'ZXY' | 'ZYX' | 'YZX' | 'XZY';

type EulerTuple

type EulerTuple = [x: number, y: number, z: number, order?: EulerOrder];

type EventListener

type EventListener<TEventData, TEventType extends string, TTarget> = (
    event: TEventData & Event<TEventType, TTarget>
) => void;

type GLSLVersion

type GLSLVersion = typeof GLSL1 | typeof GLSL3;

type InterpolationEndingModes

type InterpolationEndingModes =
    | typeof ZeroCurvatureEnding
    | typeof ZeroSlopeEnding
    | typeof WrapAroundEnding;

type InterpolationModes

type InterpolationModes =
    | typeof InterpolateDiscrete
    | typeof InterpolateLinear
    | typeof InterpolateSmooth;

type InterpolationSamplingMode

type InterpolationSamplingMode =
    | typeof InterpolationSamplingMode.NORMAL
    | typeof InterpolationSamplingMode.CENTROID
    | typeof InterpolationSamplingMode.SAMPLE
    | typeof InterpolationSamplingMode.FIRST
    | typeof InterpolationSamplingMode.EITHER;

type InterpolationSamplingType

type InterpolationSamplingType =
    | typeof InterpolationSamplingType.PERSPECTIVE
    | typeof InterpolationSamplingType.LINEAR
    | typeof InterpolationSamplingType.FLAT;

type MagnificationTextureFilter

type MagnificationTextureFilter = typeof NearestFilter | typeof LinearFilter;

Texture Magnification Filter Modes. For use with a texture's magFilter property, these define the texture magnification function to be used when the pixel being textured maps to an area less than or equal to one texture element (texel).
See Also
- Texture Constants
- Texture Mipmaps (non-official)

type MapColorPropertiesToColorRepresentations

type MapColorPropertiesToColorRepresentations<T> = {
    [P in keyof T]: T[P] extends Color ? ColorRepresentation : T[P];
};

type Mapping

type Mapping =
    | typeof UVMapping
    | typeof EquirectangularReflectionMapping
    | typeof EquirectangularRefractionMapping;

Texture Mapping Modes for non-cube Textures
Remarks
UVMapping is the _default_ value and behaver for Texture Mapping.
See Also
- Texture Constants

type Matrix2Tuple

type Matrix2Tuple = [n11: number, n12: number, n21: number, n22: number];

type Matrix3Tuple

type Matrix3Tuple = [
    n11: number,
    n12: number,
    n13: number,
    n21: number,
    n22: number,
    n23: number,
    n31: number,
    n32: number,
    n33: number
];

type Matrix4Tuple

type Matrix4Tuple = [
    n11: number,
    n12: number,
    n13: number,
    n14: number,
    n21: number,
    n22: number,
    n23: number,
    n24: number,
    n31: number,
    n32: number,
    n33: number,
    n34: number,
    n41: number,
    n42: number,
    n43: number,
    n44: number
];

type MinificationTextureFilter

type MinificationTextureFilter =
    | typeof NearestFilter
    | typeof NearestMipmapNearestFilter
    | typeof NearestMipMapNearestFilter
    | typeof NearestMipmapLinearFilter
    | typeof NearestMipMapLinearFilter
    | typeof LinearFilter
    | typeof LinearMipmapNearestFilter
    | typeof LinearMipMapNearestFilter
    | typeof LinearMipmapLinearFilter
    | typeof LinearMipMapLinearFilter;

Texture Minification Filter Modes. For use with a texture's minFilter property, these define the texture minifying function that is used whenever the pixel being textured maps to an area greater than one texture element (texel).
See Also
- Texture Constants
- Texture Mipmaps (non-official)

type NormalBufferAttributes

type NormalBufferAttributes = Record<
    string,
    BufferAttribute | InterleavedBufferAttribute
>;

type NormalMapTypes

type NormalMapTypes = typeof TangentSpaceNormalMap | typeof ObjectSpaceNormalMap;

type NormalOrGLBufferAttributes

type NormalOrGLBufferAttributes = Record<
    string,
    BufferAttribute | InterleavedBufferAttribute | GLBufferAttribute
>;

type NormalPacking

type NormalPacking =
    | typeof NoNormalPacking
    | typeof NormalRGPacking
    | typeof NormalGAPacking;

type PixelFormat

type PixelFormat =
    | typeof AlphaFormat
    | typeof RGBFormat
    | typeof RGBAFormat
    | typeof DepthFormat
    | typeof DepthStencilFormat
    | typeof RedFormat
    | typeof RedIntegerFormat
    | typeof RGFormat
    | typeof RGIntegerFormat
    | typeof RGBIntegerFormat
    | typeof RGBAIntegerFormat;

All Texture Pixel Formats Modes.
Remarks
Note that the texture must have the correct set, as described in TextureDataType.
See Also
- WebGLRenderingContext.texImage2D for details.
- Texture Constants

type PixelFormatGPU

type PixelFormatGPU =
    | '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'
    | 'SRGB8'
    | 'DEPTH_COMPONENT16'
    | 'DEPTH_COMPONENT24'
    | 'DEPTH_COMPONENT32F'
    | 'DEPTH24_STENCIL8'
    | 'DEPTH32F_STENCIL8';

For use with a texture's THREE.Texture.internalFormat property, these define how elements of a THREE.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 set, as well as the correct THREE.Texture.format.
See Also
- WebGLRenderingContext.texImage2D and WebGLRenderingContext.texImage3D for more details regarding the possible combination of THREE.Texture.format, THREE.Texture.internalFormat, and .
- WebGL2 Specification and OpenGL ES 3.0 Specification For more in-depth information regarding internal formats.

type QuaternionTuple

type QuaternionTuple = [x: number, y: number, z: number, w: number];

type SerializedImage

type SerializedImage =
    | string
    | {
          data: number[];
          width: number;
          height: number;
          type: string;
      };

type ShaderMaterialUniformJSON

type ShaderMaterialUniformJSON =
    | {
          type: 't';
          value: string;
      }
    | {
          type: 'c';
          value: number;
      }
    | {
          type: 'v2';
          value: Vector2Tuple;
      }
    | {
          type: 'v3';
          value: Vector3Tuple;
      }
    | {
          type: 'v4';
          value: Vector4Tuple;
      }
    | {
          type: 'm3';
          value: Matrix3Tuple;
      }
    | {
          type: 'm4';
          value: Matrix4Tuple;
      }
    | {
          value: unknown;
      };

type ShadowMapType

type ShadowMapType =
    | typeof BasicShadowMap
    | typeof PCFShadowMap
    | typeof PCFSoftShadowMap
    | typeof VSMShadowMap;

type Side

type Side = typeof FrontSide | typeof BackSide | typeof DoubleSide;

Defines which side of faces will be rendered - front, back or both. Default is FrontSide.

type StencilFunc

type StencilFunc =
    | typeof NeverStencilFunc
    | typeof LessStencilFunc
    | typeof EqualStencilFunc
    | typeof LessEqualStencilFunc
    | typeof GreaterStencilFunc
    | typeof NotEqualStencilFunc
    | typeof GreaterEqualStencilFunc
    | typeof AlwaysStencilFunc;

type StencilOp

type StencilOp =
    | typeof ZeroStencilOp
    | typeof KeepStencilOp
    | typeof ReplaceStencilOp
    | typeof IncrementStencilOp
    | typeof DecrementStencilOp
    | typeof IncrementWrapStencilOp
    | typeof DecrementWrapStencilOp
    | typeof InvertStencilOp;

type TextureComparisonFunction

type TextureComparisonFunction =
    | typeof NeverCompare
    | typeof LessCompare
    | typeof EqualCompare
    | typeof LessEqualCompare
    | typeof GreaterCompare
    | typeof NotEqualCompare
    | typeof GreaterEqualCompare
    | typeof AlwaysCompare;

type TextureDataType

type TextureDataType =
    | typeof UnsignedByteType
    | typeof ByteType
    | typeof ShortType
    | typeof UnsignedShortType
    | typeof IntType
    | typeof UnsignedIntType
    | typeof FloatType
    | typeof HalfFloatType
    | typeof UnsignedShort4444Type
    | typeof UnsignedShort5551Type
    | typeof UnsignedInt248Type
    | typeof UnsignedInt5999Type
    | typeof UnsignedInt101111Type;

Texture Types.
Remarks
Must correspond to the correct format.
See Also
- Texture Constants

type TextureFilter

type TextureFilter = MagnificationTextureFilter | MinificationTextureFilter;

Texture all Magnification and Minification Filter Modes.
See Also

type TimestampQuery

type TimestampQuery = typeof TimestampQuery.COMPUTE | typeof TimestampQuery.RENDER;

type ToneMapping

type ToneMapping =
    | typeof NoToneMapping
    | typeof LinearToneMapping
    | typeof ReinhardToneMapping
    | typeof CineonToneMapping
    | typeof ACESFilmicToneMapping
    | typeof CustomToneMapping
    | typeof AgXToneMapping
    | typeof NeutralToneMapping;

type TrianglesDrawModes

type TrianglesDrawModes =
    | typeof TrianglesDrawMode
    | typeof TriangleStripDrawMode
    | typeof TriangleFanDrawMode;

type TypedArray

type TypedArray =
    | Int8Array
    | Uint8Array
    | Uint8ClampedArray
    | Int16Array
    | Uint16Array
    | Int32Array
    | Uint32Array
    | Float32Array
    | Float64Array;

type TypedArrayConstructor

type TypedArrayConstructor =
    | Int8ArrayConstructor
    | Uint8ArrayConstructor
    | Uint8ClampedArrayConstructor
    | Int16ArrayConstructor
    | Uint16ArrayConstructor
    | Int32ArrayConstructor
    | Uint32ArrayConstructor
    | Float32ArrayConstructor
    | Float64ArrayConstructor;

type Usage

type Usage =
    | typeof StaticDrawUsage
    | typeof DynamicDrawUsage
    | typeof StreamDrawUsage
    | typeof StaticReadUsage
    | typeof DynamicReadUsage
    | typeof StreamReadUsage
    | typeof StaticCopyUsage
    | typeof DynamicCopyUsage
    | typeof StreamCopyUsage;

type Vector2Tuple

type Vector2Tuple = [x: number, y: number];

type Vector3Tuple

type Vector3Tuple = [number, number, number];

type Vector4Tuple

type Vector4Tuple = [number, number, number, number];

type WebXRArrayCamera

type WebXRArrayCamera = Omit<ArrayCamera, 'cameras'> & {
    cameras: [WebXRCamera, WebXRCamera];
};

type WebXRCamera

type WebXRCamera = PerspectiveCamera & { viewport: Vector4 };

type Wrapping

type Wrapping =
    | typeof RepeatWrapping
    | typeof ClampToEdgeWrapping
    | typeof MirroredRepeatWrapping;

Texture Wrapping Modes
Remarks
ClampToEdgeWrapping is the _default_ value and behaver for Wrapping Mapping.
See Also
- Texture Constants

type XRControllerEventType

type XRControllerEventType =
    | XRSessionEventType
    | XRInputSourceEventType
    | 'disconnected'
    | 'connected';

type XRHandJoints

type XRHandJoints = Record<XRHandJoint, XRJointSpace>;

Namespaces

namespace AudioContext

namespace AudioContext {}

This contains methods for setting up an AudioContext. Used internally by the AudioListener and AudioLoader classes. This uses the Web Audio API.
See Also
- Official Documentation
- Source

function getContext

getContext: () => AudioContext;

Return the value of the variable context in the outer scope, if defined, otherwise set it to a new AudioContext.

function setContext

setContext: (context: AudioContext) => void;

Set the variable context in the outer scope to value.
Parameter value

namespace PropertyBinding

namespace PropertyBinding {}

class Composite

class Composite {}

Package Files (245)

Dependencies (7)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/three.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/three)

HTML

<a href="https://www.jsdocs.io/package/@types/three"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 3 seconds ago.
Package analyzed in 23760 ms.
Missing or incorrect documentation? Open an issue for this package.