Three.js

From David's Wiki
Revision as of 13:15, 4 June 2020 by David (talk | contribs)
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)
Three.js
Screen captures of Three.js examples
Screen captures of Three.js examples
Original author(s)Ricardo Cabello (Mr.doob)
Developer(s)Three.js Authors[1]
Initial releaseApril 24, 2010; 14 years ago (2010-04-24)[2]
Stable release
r108 / August 28, 2019; 4 years ago (2019-08-28)
RepositoryTemplate:EditAtWikidata
Written inJavaScript
Engine
    Lua error in Module:Wd at line 196: attempt to index field 'wikibase' (a nil value).
Template:EditAtWikidata
TypeJavaScript library
LicenseMIT[1]
Websitethreejs.org

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

Getting Started

  1. Install three using npm:
    npm i three
  2. 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.

  1. 1.0 1.1 "Three.js/license". github.com/mrdoob. Retrieved 20 May 2012.
  2. "First commit". github.com/mrdoob. Retrieved 20 May 2012.