5,337
edits
Three.js: Difference between revisions
no edit summary
(Created page with "{{Infobox software | name = Three.js | screenshot = File:Three.js-code-example.jpg | caption = Screen captures of Three.js examples | author = Ricardo Cabello (Mr.doob) | deve...") |
No edit summary |
||
| Line 9: | Line 9: | ||
| latest release date = {{Start date and age|2019|08|28}} | | latest release date = {{Start date and age|2019|08|28}} | ||
| programming language = [[JavaScript]] | | programming language = [[JavaScript]] | ||
| genre = [[JavaScript library]] | | genre = [[JavaScript library]] | ||
| license = [[MIT License|MIT]]<ref name="license" /> | | 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 | |||
* [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]. | |||