Context3D

Context3D extends CanvasContext with 3D projection capabilities. It manages view, projection, and combined view-projection matrices, and provides methods to project 3D points onto the 2D canvas.

Creation

import { Context3D } from '@ripl/3d';

const context = new Context3D('#app');

Or with options:

const context = new Context3D('#app', {
    fov: 60,
    near: 0.1,
    far: 1000,
});

Properties

Property	Type	Description
viewMatrix	Matrix4	The current view (camera) matrix
projectionMatrix	Matrix4	The current projection matrix
viewProjectionMatrix	Matrix4	Combined view × projection matrix
lightDirection	Vector3	Direction of the light source for shading

Methods

setCamera

Sets the view matrix from eye position, target, and up vector.

context.setCamera([0, 0, 5], [0, 0, 0], [0, 1, 0]);

setPerspective

Updates the perspective projection.

context.setPerspective(fov, near, far);

setOrthographic

Switches to orthographic projection.

context.setOrthographic(left, right, bottom, top, near, far);

project

Projects a 3D point to 2D canvas coordinates.

const [x, y] = context.project([1, 2, 3]);

projectDepth

Returns the projected depth of a 3D point (used for sorting).

const depth = context.projectDepth([1, 2, 3]);

Demo

Canvas 3D