or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation.mdcameras.mdgeometries.mdindex.mdlights.mdloaders.mdmaterials.mdmath.mdrenderers.mdscene-management.mdtsl.mdwebgpu.md
tile.json

tessl/npm-three

JavaScript 3D library providing WebGL and WebGPU renderers for creating interactive 3D graphics in web browsers

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/three@0.180.x

To install, run

npx @tessl/cli install tessl/npm-three@0.180.0

index.mddocs/

Three.js

Three.js is a comprehensive JavaScript 3D library that creates an easy-to-use, lightweight, cross-browser, general-purpose 3D graphics solution for web applications. It provides WebGL and WebGPU renderers as core features, with additional SVG and CSS3D renderers available as addons. The library enables developers to create interactive 3D scenes, animations, and visualizations with support for virtual reality, augmented reality, WebXR, and various rendering techniques.

Package Information

  • Package Name: three
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install three

Core Imports

Main library import (includes core functionality and WebGL renderer):

import * as THREE from 'three';

Selective imports:

import { 
  Scene, 
  PerspectiveCamera, 
  WebGLRenderer, 
  BoxGeometry, 
  MeshBasicMaterial, 
  Mesh 
} from 'three';

CommonJS:

const THREE = require('three');
// or
const { Scene, PerspectiveCamera, WebGLRenderer } = require('three');

Specialized modules:

// WebGPU renderer and nodes
import { WebGPURenderer } from 'three/webgpu';

// Three Shading Language (TSL)
import { color, vec3, uniform } from 'three/tsl';

// Addons/examples
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

Basic Usage

import * as THREE from 'three';

// Create scene
const scene = new THREE.Scene();

// Create camera
const camera = new THREE.PerspectiveCamera(
  75,                                    // field of view
  window.innerWidth / window.innerHeight, // aspect ratio
  0.1,                                   // near clipping plane
  1000                                   // far clipping plane
);

// Create renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create geometry and material
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Create mesh and add to scene
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Position camera
camera.position.z = 5;

// Render loop
function animate() {
  requestAnimationFrame(animate);
  
  // Rotate cube
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  
  // Render scene
  renderer.render(scene, camera);
}

animate();

Architecture

Three.js is built around several core architectural components:

  • Scene Graph: Hierarchical organization of 3D objects using Scene, Group, and various Object3D derivatives
  • Renderers: Multiple rendering backends (WebGL, WebGPU, SVG, CSS3D) that convert scene data into visual output
  • Math Library: Comprehensive 3D mathematics including vectors, matrices, quaternions, and geometric operations
  • Material System: Physically-based and non-physically-based materials with shader support
  • Geometry System: Primitive and complex geometry types with efficient BufferGeometry implementation
  • Animation Framework: Keyframe-based animation system with mixing, blending, and timeline control
  • Asset Loading: Comprehensive loaders for 3D models, textures, audio, and other media formats

Capabilities

Core Scene Management

Essential components for creating and managing 3D scenes, including scene graphs, object hierarchies, and coordinate systems.

class Scene extends Object3D {
  constructor();
  add(...objects: Object3D[]): this;
  remove(...objects: Object3D[]): this;
  getObjectByName(name: string): Object3D | undefined;
  traverse(callback: (object: Object3D) => void): void;
}

class Object3D extends EventDispatcher {
  position: Vector3;
  rotation: Euler;
  scale: Vector3;
  matrix: Matrix4;
  visible: boolean;
  add(...objects: Object3D[]): this;
  remove(...objects: Object3D[]): this;
  clone(recursive?: boolean): this;
}

Core Scene Management

Cameras

Camera systems for defining viewpoints and projections in 3D space, including perspective and orthographic cameras.

class PerspectiveCamera extends Camera {
  constructor(fov?: number, aspect?: number, near?: number, far?: number);
  fov: number;
  aspect: number;
  near: number;
  far: number;
  updateProjectionMatrix(): void;
}

class OrthographicCamera extends Camera {
  constructor(left?: number, right?: number, top?: number, bottom?: number, near?: number, far?: number);
  left: number; right: number; top: number; bottom: number;
  updateProjectionMatrix(): void;
}

Cameras

Renderers

Rendering engines that convert 3D scenes into 2D images, supporting multiple backends and rendering techniques.

class WebGLRenderer extends EventDispatcher {
  constructor(parameters?: WebGLRendererParameters);
  domElement: HTMLCanvasElement;
  render(scene: Object3D, camera: Camera): void;
  setSize(width: number, height: number, updateStyle?: boolean): void;
  setPixelRatio(value: number): void;
  setClearColor(color: ColorRepresentation, alpha?: number): void;
}

interface WebGLRendererParameters {
  canvas?: HTMLCanvasElement;
  antialias?: boolean;
  alpha?: boolean;
  premultipliedAlpha?: boolean;
  preserveDrawingBuffer?: boolean;
  powerPreference?: string;
}

Renderers

Geometries

3D shape definitions including primitive shapes, complex geometries, and efficient buffer-based geometry system.

class BufferGeometry extends EventDispatcher {
  constructor();
  attributes: { [name: string]: BufferAttribute };
  index: BufferAttribute | null;
  setAttribute(name: string, attribute: BufferAttribute): this;
  computeBoundingBox(): void;
  computeBoundingSphere(): void;
}

class BoxGeometry extends BufferGeometry {
  constructor(width?: number, height?: number, depth?: number, widthSegments?: number, heightSegments?: number, depthSegments?: number);
}

Geometries

Materials

Surface appearance definitions including physically-based materials, shaders, and texture mapping systems.

abstract class Material extends EventDispatcher {
  transparent: boolean;
  opacity: number;
  side: Side;
  visible: boolean;
  clone(): this;
  copy(source: Material): this;
}

class MeshStandardMaterial extends Material {
  constructor(parameters?: MeshStandardMaterialParameters);
  color: Color;
  roughness: number;
  metalness: number;
  map: Texture | null;
  normalMap: Texture | null;
}

Materials

Lights

Illumination system supporting various light types, shadows, and lighting models for realistic scene rendering.

abstract class Light extends Object3D {
  color: Color;
  intensity: number;
  castShadow: boolean;
}

class DirectionalLight extends Light {
  constructor(color?: ColorRepresentation, intensity?: number);
  position: Vector3;
  target: Object3D;
  shadow: DirectionalLightShadow;
}

Lights

Animation System

Keyframe-based animation framework with timeline control, blending, and complex animation sequencing.

class AnimationMixer extends EventDispatcher {
  constructor(root: Object3D);
  clipAction(clip: AnimationClip, optionalRoot?: Object3D): AnimationAction;
  update(deltaTimeInSeconds: number): AnimationMixer;
  stopAllAction(): AnimationMixer;
}

class AnimationClip {
  constructor(name?: string, duration?: number, tracks?: KeyframeTrack[]);
  name: string;
  duration: number;
  tracks: KeyframeTrack[];
}

Animation System

Math Utilities

Comprehensive 3D mathematics library including vectors, matrices, quaternions, and geometric calculations.

class Vector3 {
  constructor(x?: number, y?: number, z?: number);
  x: number; y: number; z: number;
  set(x: number, y: number, z: number): this;
  add(v: Vector3): this;
  multiply(v: Vector3): this;
  length(): number;
  normalize(): this;
}

class Matrix4 {
  constructor();
  elements: number[];
  makeTranslation(x: number, y: number, z: number): this;
  makeRotationFromEuler(euler: Euler): this;
  multiply(m: Matrix4): this;
}

Math Utilities

Asset Loading

Comprehensive loading system for 3D models, textures, audio, and other assets with progress tracking and error handling.

class TextureLoader extends Loader<Texture> {
  constructor(manager?: LoadingManager);
  load(url: string, onLoad?: (texture: Texture) => void, onProgress?: (event: ProgressEvent) => void, onError?: (event: ErrorEvent) => void): Texture;
}

class LoadingManager {
  constructor(onLoad?: () => void, onProgress?: (url: string, itemsLoaded: number, itemsTotal: number) => void, onError?: (url: string) => void);
  onLoad: (() => void) | undefined;
  onProgress: ((url: string, itemsLoaded: number, itemsTotal: number) => void) | undefined;
  onError: ((url: string) => void) | undefined;
}

Asset Loading

WebGPU Rendering

Next-generation GPU rendering pipeline with compute shaders and advanced graphics capabilities.

// Available via 'three/webgpu' import
class WebGPURenderer extends Renderer {
  constructor(parameters?: WebGPURendererParameters);
  compute(computeNodes: Node[]): Promise<void>;
  computeAsync(computeNodes: Node[]): Promise<void>;
}

WebGPU Rendering

Three Shading Language (TSL)

Node-based shading system for creating custom materials and effects with a JavaScript-friendly syntax.

// Available via 'three/tsl' import
function color(value: ColorRepresentation): ColorNode;
function vec3(x?: NodeRepresentation, y?: NodeRepresentation, z?: NodeRepresentation): Vec3Node;
function uniform(value: any): UniformNode;

Three Shading Language

Types

// Core type definitions used across the API
type ColorRepresentation = Color | string | number;
type Vector3Tuple = [number, number, number];
type EulerOrder = 'XYZ' | 'YZX' | 'ZXY' | 'XZY' | 'YXZ' | 'ZYX';
type Side = 0 | 1 | 2; // FrontSide | BackSide | DoubleSide

// Event system
interface Event {
  type: string;
  target?: any;
}

interface EventDispatcher {
  addEventListener(type: string, listener: (event: Event) => void): void;
  removeEventListener(type: string, listener: (event: Event) => void): void;
  dispatchEvent(event: Event): void;
}

// Texture system
class Texture extends EventDispatcher {
  constructor(image?: any, mapping?: number, wrapS?: number, wrapT?: number, magFilter?: number, minFilter?: number, format?: number, type?: number, anisotropy?: number, colorSpace?: string);
  
  id: number;
  uuid: string;
  name: string;
  image: any;
  mapping: number;
  wrapS: number;
  wrapT: number;
  magFilter: number;
  minFilter: number;
  format: number;
  type: number;
  anisotropy: number;
  colorSpace: string;
  
  offset: Vector2;
  repeat: Vector2;
  center: Vector2;
  rotation: number;
  
  generateMipmaps: boolean;
  premultiplyAlpha: boolean;
  flipY: boolean;
  unpackAlignment: number;
  
  needsUpdate: boolean;
  onUpdate: () => void;
  
  clone(): this;
  copy(source: Texture): this;
  dispose(): void;
}

// Time utilities
class Clock {
  constructor(autoStart?: boolean);
  
  autoStart: boolean;
  startTime: number;
  oldTime: number;
  elapsedTime: number;
  running: boolean;
  
  start(): void;
  stop(): void;
  getElapsedTime(): number;
  getDelta(): number;
}

class Timer {
  constructor();
  
  update(): this;
  reset(): this;
  connect(document: Document): this;
  disconnect(): this;
  dispose(): this;
  
  getDelta(): number;
  getElapsed(): number;
  getTimescale(): number;
  setTimescale(scale: number): this;
}