@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

@types/three

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable ACESFilmicToneMapping

variable AddEquation

variable AdditiveAnimationBlendMode

variable AdditiveBlending

variable AddOperation

variable AgXToneMapping

variable AlphaFormat

variable AlwaysCompare

variable AlwaysDepth

variable AlwaysStencilFunc

variable AttachedBindMode

variable BackSide

variable BasicDepthPacking

variable BasicShadowMap

variable ByteType

variable Cache

variable CineonToneMapping

variable ClampToEdgeWrapping

Remarks

variable ColorManagement

variable ConstantAlphaFactor

variable ConstantColorFactor

variable CubeReflectionMapping

Remarks

variable CubeRefractionMapping

variable CubeUVReflectionMapping

variable CullFaceBack

variable CullFaceFront

variable CullFaceFrontBack

variable CullFaceNone

variable CustomBlending

variable CustomToneMapping

variable DecrementStencilOp

variable DecrementWrapStencilOp

variable DefaultLoadingManager

variable DepthFormat

Remarks

variable DepthStencilFormat

variable DetachedBindMode

variable DoubleSide

variable DstAlphaFactor

variable DstColorFactor

variable DynamicCopyUsage

variable DynamicDrawUsage

variable DynamicReadUsage

variable EqualCompare

variable EqualDepth

variable EqualStencilFunc

variable EquirectangularReflectionMapping

variable EquirectangularRefractionMapping

variable FloatType

variable FrontSide

variable GLSL1

variable GLSL3

variable GreaterCompare

variable GreaterDepth

variable GreaterEqualCompare

variable GreaterEqualDepth

variable GreaterEqualStencilFunc

variable GreaterStencilFunc

variable HalfFloatType

variable IncrementStencilOp

variable IncrementWrapStencilOp

variable InterpolateDiscrete

variable InterpolateLinear

variable InterpolateSmooth

variable InterpolationSamplingMode

variable InterpolationSamplingType