tessl/npm-three
JavaScript 3D library providing WebGL and WebGPU renderers for creating interactive 3D graphics in web browsers
—
Pending
math.mddocs/
Math
Mathematical foundation providing vectors, matrices, quaternions, geometric primitives, and utility functions for 3D graphics calculations. All math classes are optimized for performance and provide comprehensive operations.
Capabilities
Vector Mathematics
Core vector classes for position, direction, and mathematical operations in 2D, 3D, and 4D space.
import { Vector2, Vector3, Vector4, Matrix3, Matrix4, BufferAttribute } from 'three';
/**
* 2D vector with x, y components
*/
class Vector2 {
/** Type flag for vector2 detection */
readonly isVector2: true;
/** X component */
x: number;
/** Y component */
y: number;
/** Vector width (alias for x) */
width: number;
/** Vector height (alias for y) */
height: number;
/**
* Create 2D vector
* @param x - X component (default: 0)
* @param y - Y component (default: 0)
*/
constructor(x?: number, y?: number);
/**
* Set vector components
* @param x - X component
* @param y - Y component
* @returns This vector for chaining
*/
set(x: number, y: number): this;
/**
* Set scalar value to both components
* @param scalar - Value for both components
* @returns This vector for chaining
*/
setScalar(scalar: number): this;
/**
* Set X component
* @param x - X value
* @returns This vector for chaining
*/
setX(x: number): this;
/**
* Set Y component
* @param y - Y value
* @returns This vector for chaining
*/
setY(y: number): this;
/**
* Set component by index (0=x, 1=y)
* @param index - Component index
* @param value - Component value
* @returns This vector for chaining
*/
setComponent(index: number, value: number): this;
/**
* Get component by index
* @param index - Component index (0=x, 1=y)
* @returns Component value
*/
getComponent(index: number): number;
/**
* Clone vector
* @returns New vector with same values
*/
clone(): Vector2;
/**
* Copy from another vector
* @param v - Source vector
* @returns This vector for chaining
*/
copy(v: Vector2): this;
/**
* Add another vector
* @param v - Vector to add
* @returns This vector for chaining
*/
add(v: Vector2): this;
/**
* Add scalar to both components
* @param s - Scalar value
* @returns This vector for chaining
*/
addScalar(s: number): this;
/**
* Add scaled vector
* @param v - Vector to add
* @param s - Scale factor
* @returns This vector for chaining
*/
addScaledVector(v: Vector2, s: number): this;
/**
* Add two vectors and store result
* @param a - First vector
* @param b - Second vector
* @returns This vector for chaining
*/
addVectors(a: Vector2, b: Vector2): this;
/**
* Subtract another vector
* @param v - Vector to subtract
* @returns This vector for chaining
*/
sub(v: Vector2): this;
/**
* Subtract scalar from both components
* @param s - Scalar value
* @returns This vector for chaining
*/
subScalar(s: number): this;
/**
* Subtract two vectors and store result
* @param a - First vector
* @param b - Second vector
* @returns This vector for chaining
*/
subVectors(a: Vector2, b: Vector2): this;
/**
* Multiply by another vector (component-wise)
* @param v - Vector to multiply
* @returns This vector for chaining
*/
multiply(v: Vector2): this;
/**
* Multiply by scalar
* @param scalar - Scale factor
* @returns This vector for chaining
*/
multiplyScalar(scalar: number): this;
/**
* Divide by another vector (component-wise)
* @param v - Vector to divide by
* @returns This vector for chaining
*/
divide(v: Vector2): this;
/**
* Divide by scalar
* @param scalar - Divisor
* @returns This vector for chaining
*/
divideScalar(scalar: number): this;
/**
* Apply matrix transformation
* @param m - 3x3 transformation matrix
* @returns This vector for chaining
*/
applyMatrix3(m: Matrix3): this;
/**
* Get minimum components with another vector
* @param v - Vector to compare
* @returns This vector for chaining
*/
min(v: Vector2): this;
/**
* Get maximum components with another vector
* @param v - Vector to compare
* @returns This vector for chaining
*/
max(v: Vector2): this;
/**
* Clamp components between min and max vectors
* @param min - Minimum vector
* @param max - Maximum vector
* @returns This vector for chaining
*/
clamp(min: Vector2, max: Vector2): this;
/**
* Clamp components between scalar values
* @param minVal - Minimum value
* @param maxVal - Maximum value
* @returns This vector for chaining
*/
clampScalar(minVal: number, maxVal: number): this;
/**
* Clamp vector length
* @param min - Minimum length
* @param max - Maximum length
* @returns This vector for chaining
*/
clampLength(min: number, max: number): this;
/**
* Floor all components
* @returns This vector for chaining
*/
floor(): this;
/**
* Ceil all components
* @returns This vector for chaining
*/
ceil(): this;
/**
* Round all components
* @returns This vector for chaining
*/
round(): this;
/**
* Round components towards zero
* @returns This vector for chaining
*/
roundToZero(): this;
/**
* Negate all components
* @returns This vector for chaining
*/
negate(): this;
/**
* Calculate dot product
* @param v - Vector to dot with
* @returns Dot product value
*/
dot(v: Vector2): number;
/**
* Calculate cross product (returns scalar in 2D)
* @param v - Vector to cross with
* @returns Cross product value
*/
cross(v: Vector2): number;
/**
* Get squared length (faster than length)
* @returns Squared length
*/
lengthSq(): number;
/**
* Get vector length
* @returns Vector magnitude
*/
length(): number;
/**
* Get Manhattan length (sum of absolute components)
* @returns Manhattan length
*/
manhattanLength(): number;
/**
* Normalize vector to unit length
* @returns This vector for chaining
*/
normalize(): this;
/**
* Get angle in radians
* @returns Angle from positive X axis
*/
angle(): number;
/**
* Calculate angle to another vector
* @param v - Target vector
* @returns Angle in radians
*/
angleTo(v: Vector2): number;
/**
* Calculate distance to another vector
* @param v - Target vector
* @returns Distance
*/
distanceTo(v: Vector2): number;
/**
* Calculate squared distance (faster than distance)
* @param v - Target vector
* @returns Squared distance
*/
distanceToSquared(v: Vector2): number;
/**
* Calculate Manhattan distance
* @param v - Target vector
* @returns Manhattan distance
*/
manhattanDistanceTo(v: Vector2): number;
/**
* Set vector to given length
* @param length - Target length
* @returns This vector for chaining
*/
setLength(length: number): this;
/**
* Linear interpolation to another vector
* @param v - Target vector
* @param alpha - Interpolation factor (0-1)
* @returns This vector for chaining
*/
lerp(v: Vector2, alpha: number): this;
/**
* Linear interpolation between two vectors
* @param v1 - First vector
* @param v2 - Second vector
* @param alpha - Interpolation factor (0-1)
* @returns This vector for chaining
*/
lerpVectors(v1: Vector2, v2: Vector2, alpha: number): this;
/**
* Check equality with another vector
* @param v - Vector to compare
* @returns True if equal
*/
equals(v: Vector2): boolean;
/**
* Set from array
* @param array - Source array
* @param offset - Array offset
* @returns This vector for chaining
*/
fromArray(array: number[], offset?: number): this;
/**
* Copy to array
* @param array - Target array
* @param offset - Array offset
* @returns Target array
*/
toArray(array?: number[], offset?: number): number[];
/**
* Set from buffer attribute
* @param attribute - Buffer attribute
* @param index - Vertex index
* @returns This vector for chaining
*/
fromBufferAttribute(attribute: BufferAttribute, index: number): this;
/**
* Rotate around center point
* @param center - Rotation center
* @param angle - Rotation angle in radians
* @returns This vector for chaining
*/
rotateAround(center: Vector2, angle: number): this;
/**
* Random vector within unit circle
* @returns This vector for chaining
*/
random(): this;
/**
* Iterator for component access
*/
[Symbol.iterator](): Iterator<number>;
}
/**
* 3D vector with x, y, z components
*/
class Vector3 {
/** Type flag for vector3 detection */
readonly isVector3: true;
/** X component */
x: number;
/** Y component */
y: number;
/** Z component */
z: number;
/**
* Create 3D vector
* @param x - X component (default: 0)
* @param y - Y component (default: 0)
* @param z - Z component (default: 0)
*/
constructor(x?: number, y?: number, z?: number);
// All Vector2 methods plus:
/**
* Set vector components
* @param x - X component
* @param y - Y component
* @param z - Z component
* @returns This vector for chaining
*/
set(x: number, y: number, z: number): this;
/**
* Set Z component
* @param z - Z value
* @returns This vector for chaining
*/
setZ(z: number): this;
/**
* Set from spherical coordinates
* @param s - Spherical coordinates
* @returns This vector for chaining
*/
setFromSpherical(s: Spherical): this;
/**
* Set from spherical coordinates
* @param radius - Distance from origin
* @param phi - Polar angle
* @param theta - Azimuthal angle
* @returns This vector for chaining
*/
setFromSphericalCoords(radius: number, phi: number, theta: number): this;
/**
* Set from cylindrical coordinates
* @param c - Cylindrical coordinates
* @returns This vector for chaining
*/
setFromCylindrical(c: Cylindrical): this;
/**
* Set from cylindrical coordinates
* @param radius - Distance from Y axis
* @param theta - Angle around Y axis
* @param y - Height along Y axis
* @returns This vector for chaining
*/
setFromCylindricalCoords(radius: number, theta: number, y: number): this;
/**
* Set from matrix position (4th column)
* @param m - 4x4 matrix
* @returns This vector for chaining
*/
setFromMatrixPosition(m: Matrix4): this;
/**
* Set from matrix scale (diagonal elements)
* @param m - 4x4 matrix
* @returns This vector for chaining
*/
setFromMatrixScale(m: Matrix4): this;
/**
* Set from matrix column
* @param m - Source matrix
* @param index - Column index (0-3)
* @returns This vector for chaining
*/
setFromMatrixColumn(m: Matrix4, index: number): this;
/**
* Set from Euler angles
* @param e - Euler angles
* @returns This vector for chaining
*/
setFromEuler(e: Euler): this;
/**
* Apply 3x3 matrix transformation
* @param m - 3x3 matrix
* @returns This vector for chaining
*/
applyMatrix3(m: Matrix3): this;
/**
* Apply normal matrix (inverse transpose)
* @param m - Normal matrix
* @returns This vector for chaining
*/
applyNormalMatrix(m: Matrix3): this;
/**
* Apply 4x4 matrix transformation
* @param m - 4x4 matrix
* @returns This vector for chaining
*/
applyMatrix4(m: Matrix4): this;
/**
* Apply quaternion rotation
* @param q - Quaternion rotation
* @returns This vector for chaining
*/
applyQuaternion(q: Quaternion): this;
/**
* Project using camera matrices
* @param camera - Camera with projection matrix
* @returns This vector for chaining
*/
project(camera: Camera): this;
/**
* Unproject from screen space
* @param camera - Camera with projection matrix
* @returns This vector for chaining
*/
unproject(camera: Camera): this;
/**
* Transform direction by matrix (ignore translation)
* @param m - 4x4 matrix
* @returns This vector for chaining
*/
transformDirection(m: Matrix4): this;
/**
* Calculate cross product
* @param v - Vector to cross with
* @returns This vector for chaining
*/
cross(v: Vector3): this;
/**
* Calculate cross product of two vectors
* @param a - First vector
* @param b - Second vector
* @returns This vector for chaining
*/
crossVectors(a: Vector3, b: Vector3): this;
/**
* Project onto another vector
* @param v - Target vector
* @returns This vector for chaining
*/
projectOnVector(v: Vector3): this;
/**
* Project onto plane
* @param planeNormal - Plane normal vector
* @returns This vector for chaining
*/
projectOnPlane(planeNormal: Vector3): this;
/**
* Reflect across plane
* @param normal - Plane normal
* @returns This vector for chaining
*/
reflect(normal: Vector3): this;
/**
* Random vector within unit sphere
* @returns This vector for chaining
*/
random(): this;
/**
* Random direction on unit sphere
* @returns This vector for chaining
*/
randomDirection(): this;
}
/**
* 4D vector with x, y, z, w components
*/
class Vector4 {
/** Type flag for vector4 detection */
readonly isVector4: true;
/** X component */
x: number;
/** Y component */
y: number;
/** Z component */
z: number;
/** W component */
w: number;
/** Vector width (alias for z) */
width: number;
/** Vector height (alias for w) */
height: number;
/**
* Create 4D vector
* @param x - X component (default: 0)
* @param y - Y component (default: 0)
* @param z - Z component (default: 0)
* @param w - W component (default: 1)
*/
constructor(x?: number, y?: number, z?: number, w?: number);
// Similar methods to Vector3 plus:
/**
* Set vector components
* @param x - X component
* @param y - Y component
* @param z - Z component
* @param w - W component
* @returns This vector for chaining
*/
set(x: number, y: number, z: number, w: number): this;
/**
* Set W component
* @param w - W value
* @returns This vector for chaining
*/
setW(w: number): this;
/**
* Apply 4x4 matrix transformation
* @param m - 4x4 matrix
* @returns This vector for chaining
*/
applyMatrix4(m: Matrix4): this;
/**
* Divide by W component (perspective divide)
* @returns This vector for chaining
*/
divideScalar(scalar: number): this;
/**
* Set axis and angle from quaternion
* @param q - Source quaternion
* @returns This vector for chaining
*/
setAxisAngleFromQuaternion(q: Quaternion): this;
/**
* Set axis and angle from rotation matrix
* @param m - Rotation matrix
* @returns This vector for chaining
*/
setAxisAngleFromRotationMatrix(m: Matrix4): this;
}Usage Examples:
import { Vector2, Vector3, Vector4, Matrix4 } from 'three';
// Vector creation and operations
const v1 = new Vector3(1, 2, 3);
const v2 = new Vector3(4, 5, 6);
// Basic operations
const result = v1.clone().add(v2); // (5, 7, 9)
const dot = v1.dot(v2); // Dot product: 32
const cross = v1.clone().cross(v2); // Cross product
// Vector transformations
const matrix = new Matrix4().makeTranslation(10, 0, 0);
v1.applyMatrix4(matrix); // Apply transformation
// Normalization and length
const length = v1.length();
v1.normalize(); // Convert to unit vector
v1.setLength(5); // Set specific length
// Interpolation
const lerped = v1.clone().lerp(v2, 0.5); // 50% interpolation
// 2D vectors for UI/screen coordinates
const screenPos = new Vector2(100, 200);
const uv = new Vector2(0.5, 0.5);
// 4D vectors for homogeneous coordinates
const homogeneous = new Vector4(x, y, z, 1);
homogeneous.applyMatrix4(projectionMatrix);Matrix Mathematics
Matrix classes for transformations, projections, and linear algebra operations in 2D, 3D, and 4D.
import { Matrix3, Matrix4, Vector3, Quaternion, Euler } from 'three';
/**
* 3x3 matrix for 2D transformations and normal matrices
*/
class Matrix3 {
/** Type flag for matrix3 detection */
readonly isMatrix3: true;
/** Matrix elements in column-major order */
elements: number[];
/**
* Create 3x3 matrix
*/
constructor();
/**
* Set matrix elements
* @param n11-n33 - Matrix elements (row-major order)
* @returns This matrix for chaining
*/
set(
n11: number, n12: number, n13: number,
n21: number, n22: number, n23: number,
n31: number, n32: number, n33: number
): this;
/**
* Set to identity matrix
* @returns This matrix for chaining
*/
identity(): this;
/**
* Clone matrix
* @returns New matrix with same values
*/
clone(): Matrix3;
/**
* Copy from another matrix
* @param m - Source matrix
* @returns This matrix for chaining
*/
copy(m: Matrix3): this;
/**
* Extract basis from 4x4 matrix
* @param matrix4 - Source 4x4 matrix
* @returns This matrix for chaining
*/
extractBasis(xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): this;
/**
* Set from 4x4 matrix (upper-left 3x3)
* @param m - Source 4x4 matrix
* @returns This matrix for chaining
*/
setFromMatrix4(m: Matrix4): this;
/**
* Multiply by another matrix
* @param m - Matrix to multiply by
* @returns This matrix for chaining
*/
multiply(m: Matrix3): this;
/**
* Premultiply by another matrix
* @param m - Matrix to multiply with
* @returns This matrix for chaining
*/
premultiply(m: Matrix3): this;
/**
* Multiply two matrices and store result
* @param a - First matrix
* @param b - Second matrix
* @returns This matrix for chaining
*/
multiplyMatrices(a: Matrix3, b: Matrix3): this;
/**
* Multiply by scalar
* @param s - Scalar value
* @returns This matrix for chaining
*/
multiplyScalar(s: number): this;
/**
* Calculate determinant
* @returns Matrix determinant
*/
determinant(): number;
/**
* Invert matrix
* @returns This matrix for chaining
*/
invert(): this;
/**
* Transpose matrix
* @returns This matrix for chaining
*/
transpose(): this;
/**
* Get normal matrix from 4x4 matrix
* @param matrix4 - Source transformation matrix
* @returns This matrix for chaining
*/
getNormalMatrix(matrix4: Matrix4): this;
/**
* Transpose into another matrix
* @param matrix - Target matrix
* @returns This matrix for chaining
*/
transposeIntoArray(r: number[]): this;
/**
* Set UV transform
* @param tx - X translation
* @param ty - Y translation
* @param sx - X scale
* @param sy - Y scale
* @param rotation - Rotation angle
* @param cx - X center
* @param cy - Y center
* @returns This matrix for chaining
*/
setUvTransform(
tx: number, ty: number,
sx: number, sy: number,
rotation: number,
cx: number, cy: number
): this;
/**
* Scale matrix
* @param sx - X scale
* @param sy - Y scale
* @returns This matrix for chaining
*/
scale(sx: number, sy: number): this;
/**
* Rotate matrix
* @param theta - Rotation angle in radians
* @returns This matrix for chaining
*/
rotate(theta: number): this;
/**
* Translate matrix
* @param tx - X translation
* @param ty - Y translation
* @returns This matrix for chaining
*/
translate(tx: number, ty: number): this;
/**
* Check equality
* @param matrix - Matrix to compare
* @returns True if equal
*/
equals(matrix: Matrix3): boolean;
/**
* Set from array
* @param array - Source array
* @param offset - Array offset
* @returns This matrix for chaining
*/
fromArray(array: number[], offset?: number): this;
/**
* Copy to array
* @param array - Target array
* @param offset - Array offset
* @returns Target array
*/
toArray(array?: number[], offset?: number): number[];
}
/**
* 4x4 matrix for 3D transformations and projections
*/
class Matrix4 {
/** Type flag for matrix4 detection */
readonly isMatrix4: true;
/** Matrix elements in column-major order */
elements: number[];
/**
* Create 4x4 matrix
*/
constructor();
/**
* Set matrix elements
* @param n11-n44 - Matrix elements (row-major order)
* @returns This matrix for chaining
*/
set(
n11: number, n12: number, n13: number, n14: number,
n21: number, n22: number, n23: number, n24: number,
n31: number, n32: number, n33: number, n34: number,
n41: number, n42: number, n43: number, n44: number
): this;
/**
* Set to identity matrix
* @returns This matrix for chaining
*/
identity(): this;
/**
* Clone matrix
* @returns New matrix with same values
*/
clone(): Matrix4;
/**
* Copy from another matrix
* @param m - Source matrix
* @returns This matrix for chaining
*/
copy(m: Matrix4): this;
/**
* Copy position from matrix
* @param m - Source matrix
* @returns This matrix for chaining
*/
copyPosition(m: Matrix4): this;
/**
* Set basis vectors and position
* @param xAxis - X axis vector
* @param yAxis - Y axis vector
* @param zAxis - Z axis vector
* @param origin - Origin position
* @returns This matrix for chaining
*/
makeBasis(xAxis: Vector3, yAxis: Vector3, zAxis: Vector3, origin?: Vector3): this;
/**
* Extract basis vectors
* @param xAxis - Target X axis vector
* @param yAxis - Target Y axis vector
* @param zAxis - Target Z axis vector
* @returns This matrix for chaining
*/
extractBasis(xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): this;
/**
* Create rotation matrix from Euler angles
* @param euler - Euler angles
* @returns This matrix for chaining
*/
makeRotationFromEuler(euler: Euler): this;
/**
* Create rotation matrix from quaternion
* @param q - Quaternion rotation
* @returns This matrix for chaining
*/
makeRotationFromQuaternion(q: Quaternion): this;
/**
* Create look-at matrix
* @param eye - Camera position
* @param target - Look-at target
* @param up - Up direction
* @returns This matrix for chaining
*/
lookAt(eye: Vector3, target: Vector3, up: Vector3): this;
/**
* Multiply by another matrix
* @param m - Matrix to multiply by
* @returns This matrix for chaining
*/
multiply(m: Matrix4): this;
/**
* Premultiply by another matrix
* @param m - Matrix to multiply with
* @returns This matrix for chaining
*/
premultiply(m: Matrix4): this;
/**
* Multiply two matrices and store result
* @param a - First matrix
* @param b - Second matrix
* @returns This matrix for chaining
*/
multiplyMatrices(a: Matrix4, b: Matrix4): this;
/**
* Multiply by scalar
* @param s - Scalar value
* @returns This matrix for chaining
*/
multiplyScalar(s: number): this;
/**
* Calculate determinant
* @returns Matrix determinant
*/
determinant(): number;
/**
* Invert matrix
* @returns This matrix for chaining
*/
invert(): this;
/**
* Transpose matrix
* @returns This matrix for chaining
*/
transpose(): this;
/**
* Set position component
* @param v - Position vector
* @returns This matrix for chaining
*/
setPosition(v: Vector3): this;
setPosition(x: number, y: number, z: number): this;
/**
* Get maximum scale factor
* @returns Maximum scale
*/
getMaxScaleOnAxis(): number;
/**
* Create translation matrix
* @param x - X translation
* @param y - Y translation
* @param z - Z translation
* @returns This matrix for chaining
*/
makeTranslation(x: number, y: number, z: number): this;
/**
* Create rotation matrix around X axis
* @param theta - Rotation angle
* @returns This matrix for chaining
*/
makeRotationX(theta: number): this;
/**
* Create rotation matrix around Y axis
* @param theta - Rotation angle
* @returns This matrix for chaining
*/
makeRotationY(theta: number): this;
/**
* Create rotation matrix around Z axis
* @param theta - Rotation angle
* @returns This matrix for chaining
*/
makeRotationZ(theta: number): this;
/**
* Create rotation matrix around arbitrary axis
* @param axis - Rotation axis (normalized)
* @param angle - Rotation angle
* @returns This matrix for chaining
*/
makeRotationAxis(axis: Vector3, angle: number): this;
/**
* Create scale matrix
* @param x - X scale
* @param y - Y scale
* @param z - Z scale
* @returns This matrix for chaining
*/
makeScale(x: number, y: number, z: number): this;
/**
* Create shear matrix
* @param xy - XY shear
* @param xz - XZ shear
* @param yx - YX shear
* @param yz - YZ shear
* @param zx - ZX shear
* @param zy - ZY shear
* @returns This matrix for chaining
*/
makeShear(xy: number, xz: number, yx: number, yz: number, zx: number, zy: number): this;
/**
* Create perspective projection matrix
* @param left - Left plane
* @param right - Right plane
* @param top - Top plane
* @param bottom - Bottom plane
* @param near - Near plane
* @param far - Far plane
* @returns This matrix for chaining
*/
makePerspective(
left: number, right: number,
top: number, bottom: number,
near: number, far: number
): this;
/**
* Create orthographic projection matrix
* @param left - Left plane
* @param right - Right plane
* @param top - Top plane
* @param bottom - Bottom plane
* @param near - Near plane
* @param far - Far plane
* @returns This matrix for chaining
*/
makeOrthographic(
left: number, right: number,
top: number, bottom: number,
near: number, far: number
): this;
/**
* Check equality
* @param matrix - Matrix to compare
* @returns True if equal
*/
equals(matrix: Matrix4): boolean;
/**
* Set from array
* @param array - Source array
* @param offset - Array offset
* @returns This matrix for chaining
*/
fromArray(array: number[], offset?: number): this;
/**
* Copy to array
* @param array - Target array
* @param offset - Array offset
* @returns Target array
*/
toArray(array?: number[], offset?: number): number[];
/**
* Decompose matrix into components
* @param position - Output position vector
* @param quaternion - Output quaternion
* @param scale - Output scale vector
* @returns This matrix for chaining
*/
decompose(position: Vector3, quaternion: Quaternion, scale: Vector3): this;
/**
* Compose matrix from components
* @param position - Position vector
* @param quaternion - Quaternion rotation
* @param scale - Scale vector
* @returns This matrix for chaining
*/
compose(position: Vector3, quaternion: Quaternion, scale: Vector3): this;
}Usage Examples:
import { Matrix4, Matrix3, Vector3, Quaternion, Euler } from 'three';
// Create transformation matrices
const translation = new Matrix4().makeTranslation(10, 0, 0);
const rotation = new Matrix4().makeRotationY(Math.PI / 4);
const scale = new Matrix4().makeScale(2, 2, 2);
// Combine transformations
const transform = new Matrix4()
.multiply(translation)
.multiply(rotation)
.multiply(scale);
// Create from components
const position = new Vector3(1, 2, 3);
const quaternion = new Quaternion().setFromEuler(new Euler(0, Math.PI/2, 0));
const scaleVec = new Vector3(1, 1, 1);
const composed = new Matrix4().compose(position, quaternion, scaleVec);
// Decompose matrix
const pos = new Vector3();
const quat = new Quaternion();
const scl = new Vector3();
composed.decompose(pos, quat, scl);
// Normal matrix for lighting
const normalMatrix = new Matrix3().getNormalMatrix(transform);
// Projection matrices
const perspective = new Matrix4().makePerspective(-1, 1, 1, -1, 1, 100);
const orthographic = new Matrix4().makeOrthographic(-10, 10, 10, -10, 1, 100);Geometric Primitives
Mathematical primitives for 3D geometry calculations including rays, planes, spheres, and spatial testing.
import { Ray, Vector3, Plane, Sphere, Box3, Triangle } from 'three';
/**
* Ray for raycasting and geometric calculations
*/
class Ray {
/** Ray origin point */
origin: Vector3;
/** Ray direction vector (should be normalized) */
direction: Vector3;
/**
* Create ray
* @param origin - Ray origin point
* @param direction - Ray direction (normalized)
*/
constructor(origin?: Vector3, direction?: Vector3);
/**
* Set ray origin and direction
* @param origin - Ray origin point
* @param direction - Ray direction
* @returns This ray for chaining
*/
set(origin: Vector3, direction: Vector3): this;
/**
* Copy from another ray
* @param ray - Source ray
* @returns This ray for chaining
*/
copy(ray: Ray): this;
/**
* Get point along ray at distance t
* @param t - Distance along ray
* @param target - Target vector for result
* @returns Point on ray
*/
at(t: number, target: Vector3): Vector3;
/**
* Transform ray by matrix
* @param matrix4 - Transformation matrix
* @returns This ray for chaining
*/
applyMatrix4(matrix4: Matrix4): this;
/**
* Get closest point on ray to given point
* @param point - Reference point
* @param target - Target vector for result
* @returns Closest point on ray
*/
closestPointToPoint(point: Vector3, target: Vector3): Vector3;
/**
* Get distance from ray to point
* @param point - Reference point
* @returns Distance to point
*/
distanceToPoint(point: Vector3): number;
/**
* Test intersection with sphere
* @param sphere - Sphere to test
* @param target - Target vector for intersection point
* @returns Intersection point or null
*/
intersectSphere(sphere: Sphere, target: Vector3): Vector3 | null;
/**
* Test intersection with plane
* @param plane - Plane to test
* @param target - Target vector for intersection point
* @returns Intersection point or null
*/
intersectPlane(plane: Plane, target: Vector3): Vector3 | null;
/**
* Test intersection with triangle
* @param a - Triangle vertex A
* @param b - Triangle vertex B
* @param c - Triangle vertex C
* @param backfaceCulling - Enable backface culling
* @param target - Target vector for intersection point
* @returns Intersection point or null
*/
intersectTriangle(a: Vector3, b: Vector3, c: Vector3, backfaceCulling: boolean, target: Vector3): Vector3 | null;
}The math system provides the mathematical foundation for all 3D graphics operations in Three.js, with optimized vector operations, transformation matrices, and geometric calculations essential for rendering, animation, and interaction.
Install with Tessl CLI
npx tessl i tessl/npm-three