Three.js: Difference between revisions

Latest revision as of 17:10, 31 December 2021

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.

@@ 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].
+==References==