ThreeJS Scenes

Fog

This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance.

Constructor

Fog( color : Integer, near : Float, far : Float )

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

Properties

.isFog : Boolean

Read-only flag to check whether a given object is of type Fog.

.name : String

Optional name of the object (doesn't need to be unique). Default is an empty string.

.color : Color

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

.near : Float

The minimum distance to start applying fog. Objects that are less than 'near' units from the active camera won't be affected by fog.

Default is 1.

.far : Float

The maximum distance at which fog stops being calculated and applied. Objects that are more than 'far' units away from the active camera won't be affected by fog.

Default is 1000.

Methods

.clone () : Fog

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

.toJSON () : Object

Return fog data in JSON format.

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.

Constructor

FogExp2( color : Integer, density : Float )

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

Properties

.isFogExp2 : Boolean

Read-only flag to check whether a given object is of type FogExp2.

.name : String

Optional name of the object (doesn't need to be unique). Default is an empty string.

.color : Color

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

.density : Float

Defines how fast the fog will grow dense.

Default is 0.00025.

Methods

.clone () : FogExp2

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

.toJSON () : Object

Return FogExp2 data in JSON format.

Scene

Scenes allow you to set up what and where is to be rendered by three.js. This is where you place objects, lights and cameras.

Constructor

Scene()

Create a new scene object.

Properties

.autoUpdate : Boolean

Default is true. If set, then the renderer checks every frame if the scene and its objects needs matrix updates. When it isn't, then you have to maintain all matrices in the scene yourself.

.background : Object

If not null, sets the background used when rendering the scene, and is always rendered first. Can be set to a Color which sets the clear color, a Texture covering the canvas, a cubemap as a CubeTexture or an equirectangular as a Texture . Default is null.

.environment : Texture

If not null, this texture is set as the environment map for all physical materials in the scene. However, it's not possible to overwrite an existing texture assigned to MeshStandardMaterial.envMap. Default is null.

.fog : Fog

A fog instance defining the type of fog that affects everything rendered in the scene. Default is null.

.isScene : Boolean

Read-only flag to check whether a given object is of type Scene.

.overrideMaterial : Material

If not null, it will force everything in the scene to be rendered with that material. Default is null.

Methods

.toJSON ( meta : Object ) : Object

meta -- object containing metadata such as textures or images for the scene.

Convert the scene to three.js JSON Object/Scene format.


Related Topics

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.

ThreeJS Object3D

This is the base class for most three.js objects, and it provides a set of properties and methods for manipulating objects in 3D space. It should be noted that this can...

9 minutes read.

ThreeJS Animation Systems

You may animate many aspects of your models with the three.js animation system, including the bones of a skinned and rigged model, morph targets, multiple material properties (colours, opacity, booleans),...

3 minutes read.

ThreeJS Interpolant

CubicInterpolant Code Example const interpolant = new THREE.CubicInterpolant(new Float32Array( 2 ),new Float32Array( 2 ),1,new Float32Array( 1 ));interpolant.evaluate( 0.5 ); Constructor CubicInterpolant( parameterPositions, sampleValues, sampleSize, resultBuffer ) parameterPositions -- array of positions sampleValues -- array of samples sampleSize...

2 minutes read.

ThreeJS Geometries-1

BoxGeometry BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to...

7 minutes read.

ThreeJS Loading 3D Models

There are hundreds of file formats for 3D models, each with its own purpose, set of features, and level of complexity. Although three.js has a lot of loaders, choosing the...

2 minutes read.

ThreeJS InterleavedBuffer

The term "interleaved" refers to the packing of multiple attributes, possibly of different types (e.g., position, normal, uv, colour) into a single array buffer. Constructor InterleavedBuffer( array : TypedArray, stride : Integer...

3 minutes read.

ThreeJS Materials 3

RawShaderMaterial This class works just like ShaderMaterial, except that definitions of built-in uniforms and attributes are not automatically prepended to the GLSL shader code. Code Example const material = new THREE.RawShaderMaterial( {    ...

9 minutes read.

ThreeJS Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

15 minutes read.

ThreeJS Disposing an Object

The disposal of unwanted library entities is a crucial component of improving performance and avoiding memory leaks in your programme. When you create a three.js type instance, you set aside...

4 minutes read.

ThreeJS Installation

You can use npm and modern build tools to install three.js, or you can get started quickly with static hosting or a CDN. Installing from npm is the best option...

4 minutes read.

ThreeJS Lights

Light Abstract base class for lights - all other light types inherit the properties and methods described here. Constructor Light( color : Integer, intensity : Float ) color - (optional) hexadecimal color of the...

10 minutes read.

ThreeJS Curve

An abstract base class for creating a Curve object with interpolation methods. CurvePath is an array of Curves. Constructor Curve() This constructor creates a new Curve. Properties .arcLengthDivisions : Integer This value determines the amount of...

13 minutes read.

ThreeJS Material

Abstract base class for materials. Materials describe the appearance of objects. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use...

6 minutes read.

ThreeJS AnimationClip

An AnimationClip is a group of keyframe tracks that may be reused to depict an animation. The "Animation System" page in the "Next Steps" part of the handbook provides an overview...

2 minutes read.

ThreeJS Shadows

LightShadow Serves as a base class for the other shadow classes. Constructor LightShadow( camera : Camera ) camera - the light's view of the world. Create a new LightShadow. This is not intended to be...

7 minutes read.

ThreeJS Scenes

Fog This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance. Constructor Fog( color : Integer, near : Float, far : Float ) The color parameter is...

3 minutes read.

ThreeJS BufferGeometry

A mesh, line, or point geometry representation. Included within buffers are vertex positions, face indices, normals, colours, UVs, and custom attributes, lowering the cost of passing all of this data...

5 minutes read.

ThreeJS Uniform

Uniforms are global GLSL variables. They are passed to shader programs. Code Example When declaring a uniform of a ShaderMaterial, it is declared by value or by object. uniforms: { time: { value: 1.0...

2 minutes read.

ThreeJS Layers

A Layers object assigns an Object3D to one or more of the 32 layers numbered 0 to 31 - the layers are internally stored as a bit mask, and all...

1 minute read.