Search notes:

three.js

A three.js application needs at least a scene, a camera and a renderer.

Geometry

With r125, THREE.Geometry was removed and THREE.BufferGeometry was suggested as replacement.

THREE.BufferGeometry

An instance of a THREE.BufferGeometry represents a
  • mesh,
  • line or
  • point geometry
Besides geometrical data like vertex coordinates, an instance also stores attributes such as
  • face indices
  • normals
  • colors
  • UVs
  • custom attributes (which are used to reduce the cost of passing this data to the GPU)

Material

A material describes an object's appearance.

Mesh

A mesh is an object that applies a material to a geometry.
The mesh can then be inserted into a scene (for example scene.add()) and then be moved around

Texture

A texture can be created from
Creating a texture from a HTML 5 canvas element: 
const canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d')
canvas.width  = …
canvas.height = …
  …
const texture  = new THREE.Texture(canvas)
const material = new THREE.MeshStandardMaterial({ map: texture })
const geometry = new THREE.BoxGeometry(200, 200, 200)
const mesh     = new THREE.Mesh(geometry, material)
scene.add(mesh)
  …
ctx.fillStyle = '#435acd'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.font = '15pt Arial'
…

Object3D

Object3D is the base class for most objects in three.js.
Every instance of an Object3D object has an associated matrix (Matrix4) which defines the object's transformations: position, rotation and scale.
An object's matrix-transformation is relativ to the object's parent object. The transformation relative to the world can be obtained with obj.matrixWorld.
A Bone is almost identical to a blank Object3D.

Matrix4

See also

D3.js

Index