three.js

Using (importing) three.js

<script type='importmap'>
  {
    "imports": {
      "three"        : "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/"
    }
  }
</script>

<script type='module' src='app.js'></script>

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

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

Scene

Camera

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

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

camera.lookAt(mesh_abc.position);

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

camHlp.update();

Sprite objects

WebGLRenderer

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

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();
}

Geometry

Material

Mesh

Text and fonts

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    ,    // ???
});

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, … });

   …
});

Light

Texture

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

Curve

Loader

Color

scene = new THREE.Scene();
scene.background = new THREE.Color(0x2f0b03);

Fog

scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 250, 1400);

BufferAttribute

Vector…

cameraTarget = new THREE.Vector3( 0, 150, 0 );

Object3D

Local and world space

const wPos  = new THREE.Vector3();
const wQuat = new THREE.Quaternion();
const wScal = new THREE.Vector3();

obj.getWorldPosition(wPos);
obj.getWorldQuaternion(wQuat);
obj.getWorldScale(wScal);

const localPos      = new THREE.Vector3(1, 0, 0);
const worldPod      = obj.localToWorld(localPos.clone());
const localPosAgain = obj.worldToLocal(worldPos.clone());

Group

Controls

EventDispatcher

Fullscreen: window.resize event

window.addEventListener('resize', onWindowResize);

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
}

Matrix4

Coordinate system / AxesHelper

GridHelper

src/…

ComputeBoundingBox, ComputeBoundingSphere

Directly accessing source files in three.js git repository (without building project)

<!doctype html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<style> html, body {margin: 0} </style>

<script type="importmap">
  {
    "imports": {
      "three"       : "https://web-server.xyz/path-to-github-repo/three.js/src/Three.js",
      "three-addons": "https://web-server.xyz/path-to-github-repo/three.js/examples/jsm/Addons.js",
      "three-libs/" : "https://web-server.xyz/path-to-github-repo/three.js/examples/jsm/libs/"
    }
  }
</script>

<script type='module' src='index.js?2'></script>

import * as THREE from 'three';
import { TrackballControls } from 'three-addons';
import { GUI               } from 'three-libs/lil-gui.module.min.js';

…

console.log(THREE.REVISION);

TODO

See also