three.js

Scene, camera and renderer

import * as THREE from 'three';

const camera   = new THREE.PerspectiveCamera(fovCamera, window.innerWidth/window.innerHeight, frustumNear, frustumFar);
const scene    = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true})

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

Constructing a perspective camera

const camera = new THREE.PerspectiveCamera(
   45,                                     // field of view (fov)
   window.innerWidth / window.innerHeight, // aspect
   0.1, 10000                              // near, far
);

lookAt

camera.lookAt(new THREE.Vector3(x, y, z));

camera.lookAt(mesh_abc.position);

cameraHelper

const camHlp = new THREE.CameraHelper(camera);
scene.add(camHlp);

camHlp.update();

TODO

domElement

const container = … // for example: document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);

Animation loop

const clock    = new THREE.Clock();
const renderer = new THREE.WebGLRenderer();
const scene    = …
const camera   = …
…
renderer.setAnimationLoop(animate);

function animate() {
   const delta = clock.getDelta();
   const time  = clock.getElapsedTime();

   xyz.rotation.x = time * 0.333;
   xyz.rotation.y = time * 0.500;

   t += delta * 0.5;
   … = Math.sin(t);

   renderer.render(scene, camera);

   stats.update();
}

THREE.BufferGeometry

Vertex normals

Triangles

LineBasicMaterial

Shader program

TextGeometry

const txt  = 'Hello world!'; 

const font = …  // An object that is ultimately created by new Font(...)

const txtGeom = new TextGeometry(txt, {
   font          : font,
   depth         : 0.07,
// height        : …
   size          : 0.34 ,    // Size of the text
   curveSegments : 12   ,    // Number of points on the curves
   bevelEnabled  : false,    // Indicates if bevel is enabled
   bevelThickness: 0.5  ,    // How deep into text the bevel goes
   bevelSize     : 0.01 ,    // How far from text outline (including bevelOffset) is bevel
   bevelOffset   : 1    ,    // How far from text outline (including bevelOffset) is bevel
   bevelSegments : 5    ,    // ???
});

Creating Font objects

const loader = new FontLoader();
font_path    = '…';

loader.load(font_path, function (font) {                          // Note that the Font object is internally created by FontLoader
   const geometry = new TextGeometry(text, {font: font, … });

   …
});

const loader = new TTFLoader();
font_path    = '…';

loader.load(font_path, function (data) {
   const font = new Font(data);                                   // Note the explicit construction of a Font object
   const geometry = new TextGeometry(text, {font: font, … });

   …
});

TODO

Creation of textures

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

Texel

CurvePath

Path

Shape

Properties and methods

Inheritance

src/core

src/math

Libraries and plugins

Line like objects

lil-gui

World unit

AnimationMixer

Backend

renderer.setClearColor() - scene.background