Three.js: Difference between revisions

Latest revision as of 19:21, 30 October 2025

A very useful JavaScript graphics library which uses WebGL build by Mr. Doob (Ricardo Cabello, Google).

threejs.org

Getting Started

Install three using npm:
```
npm i three
```

Import into your main JS script

import * as THREE from 'three';
// or const THREE = require('three');

You can import specific components from examples as follows:

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {Stats} from 'three/examples/jsm/libs/stats.module.js';

Instancing

See instancing example.

There are two main ways of instancing in three.js:

Using an InstancedMesh
Merging geometries (since we don't have a geometry shader)

Shaders

See ShaderMaterial.

Color Spaces

By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.

THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211
Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.
When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.
If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.

See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791

@@ Line 1: / Line 1: @@
-{{Infobox software
-| name = Three.js
-| screenshot = File:Three.js-code-example.jpg
-| caption = Screen captures of Three.js examples
-| author = Ricardo Cabello (Mr.doob)
-| developer = Three.js Authors<ref name="license">{{cite web |url= https://github.com/mrdoob/three.js/blob/master/LICENSE|title=Three.js/license|publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
-| released = {{Start date and age|2010|04|24}}<ref name="firstcommit">{{cite web |url= https://github.com/mrdoob/three.js/commit/a90c4e107ff6e3b148458c96965e876f9441b147|title=First commit |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
-| latest release version = r108
-| latest release date = {{Start date and age|2019|08|28}}
-| programming language = [[JavaScript]]
-| status = Active
-| genre = [[JavaScript library]]
-| license = [[MIT License|MIT]]<ref name="license" />
-| website = {{URL|https://threejs.org/}}
-}}
-A very useful graphics library which uses WebGL.
+A very useful JavaScript graphics library which uses WebGL build by Mr. Doob (Ricardo Cabello, Google).
-[http://threejs.org Link]
+* [http://threejs.org threejs.org]
+==Getting Started==
+# Install <code>three</code> using npm:
+#:<pre>
+#::npm i three</pre>
+# Import into your main JS script
+#:<syntaxhighlight lang="js">
+import * as THREE from 'three';
+// or const THREE = require('three');</syntaxhighlight>
+You can import specific components from examples as follows:
+<syntaxhighlight lang="js">
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
+import {Stats} from 'three/examples/jsm/libs/stats.module.js';
+</syntaxhighlight>
+==Instancing==
+See [https://threejs.org/examples/?q=instancing#webgl_instancing_performance instancing example].
+There are two main ways of instancing in three.js:
+* Using an [https://threejs.org/docs/#api/en/objects/InstancedMesh InstancedMesh]
+* Merging geometries (since we don't have a geometry shader)
+==Shaders==
+See [https://threejs.org/docs/#api/en/materials/ShaderMaterial ShaderMaterial].
+==Color Spaces==
+By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.
+# THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211
+# Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.
+# When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.
+# If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.
+See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791
+==References==