Three.js: Difference between revisions

Three.js
	Screen captures of Three.js examples
Original author(s)	Ricardo Cabello (Mr.doob)
Developer(s)	Three.js Authors
Initial release	April 24, 2010; 15 years ago
Stable release	r108 / August 28, 2019; 6 years ago
Repository	<strong%20class= "error"><span%20class="scribunto-error"%20id="mw-scribunto-error-3d68d3e7">Lua%20error%20in%20Module:Wd%20at%20line%20196:%20attempt%20to%20index%20field%20'wikibase'%20(a%20nil%20value). http://<strong%20class="error"><span%20class="scribunto-error"%20id="mw-scribunto-error-3d68d3e7">Lua%20error%20in%20Module:Wd%20at%20line%20196:%20attempt%20to%20index%20field%20'wikibase'%20(a%20nil%20value).; Template:EditAtWikidata
Written in	JavaScript
Engine	Lua error in Module:Wd at line 196: attempt to index field 'wikibase' (a nil value). Template:EditAtWikidata
Type	JavaScript library
License	MIT
Website	threejs.org

Revision as of 13:15, 4 June 2020

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

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';

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

↑ ^1.0 ^1.1 <templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>"Three.js/license". github.com/mrdoob. Retrieved 20 May 2012.
↑ <templatestyles src="Module:Citation/CS1/styles.css"></templatestyles>"First commit". github.com/mrdoob. Retrieved 20 May 2012.

@@ Line 9: / Line 9: @@
 | 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" />
@@ Line 15: / Line 14: @@
 }}
-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].