tessl/npm-three
JavaScript 3D library providing WebGL and WebGPU renderers for creating interactive 3D graphics in web browsers
—
Pending
geometries.mddocs/
Geometries
Geometry system providing vertex data, buffer management, and primitive shape generation for 3D rendering. All geometries use the efficient BufferGeometry system with typed array attributes.
Capabilities
Buffer Geometry Foundation
Core geometry class using buffer attributes for efficient GPU data transfer and rendering performance.
import {
BufferGeometry,
BufferAttribute,
EventDispatcher,
Vector3,
Vector2,
Matrix4,
Matrix3,
Box3,
Sphere,
Ray
} from 'three';
/**
* Base geometry class using buffer attributes for efficient rendering
*/
class BufferGeometry extends EventDispatcher {
/** Type flag for buffer geometry detection */
readonly isBufferGeometry: true;
/** Unique geometry ID */
readonly id: number;
/** UUID string identifier */
readonly uuid: string;
/** Geometry name */
name: string;
/** Geometry type string */
type: string;
/** Vertex indices for indexed rendering */
index: BufferAttribute | null;
/** Indirect draw buffer (WebGPU only) */
indirect: BufferAttribute | null;
/** Vertex attributes (position, normal, uv, etc.) */
attributes: Record<string, BufferAttribute | InterleavedBufferAttribute>;
/** Morph target attributes */
morphAttributes: Record<string, BufferAttribute[]>;
/** Treat morph targets as relative offsets */
morphTargetsRelative: boolean;
/** Geometry groups for multi-material rendering */
groups: Array<{
start: number;
count: number;
materialIndex?: number;
}>;
/** Bounding box (computed) */
boundingBox: Box3 | null;
/** Bounding sphere (computed) */
boundingSphere: Sphere | null;
/** Draw range for partial rendering */
drawRange: { start: number; count: number };
/** User data storage */
userData: Record<string, any>;
/**
* Create buffer geometry
*/
constructor();
/**
* Get index buffer attribute
* @returns Index attribute or null
*/
getIndex(): BufferAttribute | null;
/**
* Set index buffer attribute
* @param index - Index buffer attribute
* @returns This geometry for chaining
*/
setIndex(index: BufferAttribute | number[] | null): this;
/**
* Set indirect draw buffer (WebGPU)
* @param indirect - Indirect buffer attribute
* @returns This geometry for chaining
*/
setIndirect(indirect: BufferAttribute | null): this;
/**
* Get indirect draw buffer
* @returns Indirect buffer or null
*/
getIndirect(): BufferAttribute | null;
/**
* Get named attribute
* @param name - Attribute name
* @returns Buffer attribute or undefined
*/
getAttribute(name: string): BufferAttribute | InterleavedBufferAttribute | undefined;
/**
* Set named attribute
* @param name - Attribute name
* @param attribute - Buffer attribute
* @returns This geometry for chaining
*/
setAttribute(name: string, attribute: BufferAttribute | InterleavedBufferAttribute): this;
/**
* Delete named attribute
* @param name - Attribute name
* @returns This geometry for chaining
*/
deleteAttribute(name: string): this;
/**
* Check if attribute exists
* @param name - Attribute name
* @returns True if attribute exists
*/
hasAttribute(name: string): boolean;
/**
* Add geometry group for multi-material support
* @param start - Start index
* @param count - Index count
* @param materialIndex - Material index (optional)
*/
addGroup(start: number, count: number, materialIndex?: number): void;
/**
* Clear all geometry groups
*/
clearGroups(): void;
/**
* Set draw range for partial rendering
* @param start - Start index
* @param count - Index count
*/
setDrawRange(start: number, count: number): void;
/**
* Apply transformation matrix to geometry
* @param matrix - Transformation matrix
* @returns This geometry for chaining
*/
applyMatrix4(matrix: Matrix4): this;
/**
* Apply quaternion rotation to geometry
* @param quaternion - Quaternion rotation
* @returns This geometry for chaining
*/
applyQuaternion(quaternion: Quaternion): this;
/**
* Rotate geometry around axis
* @param axis - Rotation axis
* @param angle - Rotation angle in radians
* @returns This geometry for chaining
*/
rotateX(angle: number): this;
rotateY(angle: number): this;
rotateZ(angle: number): this;
/**
* Translate geometry
* @param x - X offset
* @param y - Y offset
* @param z - Z offset
* @returns This geometry for chaining
*/
translate(x: number, y: number, z: number): this;
/**
* Scale geometry
* @param x - X scale
* @param y - Y scale
* @param z - Z scale
* @returns This geometry for chaining
*/
scale(x: number, y: number, z: number): this;
/**
* Look at target (orient geometry)
* @param vector - Target direction
* @returns This geometry for chaining
*/
lookAt(vector: Vector3): this;
/**
* Center geometry at origin
* @returns This geometry for chaining
*/
center(): this;
/**
* Set attribute from array
* @param name - Attribute name
* @param array - Data array
* @param itemSize - Items per vertex
* @param normalized - Normalize data
* @returns This geometry for chaining
*/
setFromPoints(points: Vector3[]): this;
/**
* Update attribute range
* @param name - Attribute name
* @param start - Start index
* @param count - Item count
*/
updateFromObject(object: Object3D): this;
/**
* Compute vertex normals
*/
computeVertexNormals(): void;
/**
* Compute tangent vectors (requires UVs and normals)
*/
computeTangents(): void;
/**
* Compute bounding box
*/
computeBoundingBox(): void;
/**
* Compute bounding sphere
*/
computeBoundingSphere(): void;
/**
* Raycast against geometry
* @param raycaster - Raycaster object
* @param intersects - Intersection results array
*/
raycast(raycaster: Raycaster, intersects: Intersection[]): void;
/**
* Merge another geometry
* @param geometry - Geometry to merge
* @param offset - Vertex offset
* @returns This geometry for chaining
*/
merge(geometry: BufferGeometry, offset?: number): this;
/**
* Normalize normals to unit length
* @returns This geometry for chaining
*/
normalizeNormals(): this;
/**
* Convert to non-indexed geometry
* @returns New non-indexed geometry
*/
toNonIndexed(): BufferGeometry;
/**
* Serialize geometry to JSON
* @param meta - Metadata object
* @returns JSON representation
*/
toJSON(meta?: any): any;
/**
* Clone geometry
* @returns Cloned geometry
*/
clone(): this;
/**
* Copy properties from another geometry
* @param source - Source geometry
* @returns This geometry for chaining
*/
copy(source: BufferGeometry): this;
/**
* Dispose geometry resources
*/
dispose(): void;
}Usage Examples:
import { BufferGeometry, BufferAttribute, Vector3 } from 'three';
// Create custom geometry
const geometry = new BufferGeometry();
// Define vertices (triangle)
const vertices = new Float32Array([
-1.0, -1.0, 0.0, // Bottom left
1.0, -1.0, 0.0, // Bottom right
0.0, 1.0, 0.0 // Top center
]);
geometry.setAttribute('position', new BufferAttribute(vertices, 3));
// Add normals
const normals = new Float32Array([
0, 0, 1,
0, 0, 1,
0, 0, 1
]);
geometry.setAttribute('normal', new BufferAttribute(normals, 3));
// Add UVs
const uvs = new Float32Array([
0, 0,
1, 0,
0.5, 1
]);
geometry.setAttribute('uv', new BufferAttribute(uvs, 2));
// Compute bounds
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
// Transform geometry
geometry.translate(0, 1, 0);
geometry.rotateX(Math.PI / 4);
geometry.scale(2, 2, 2);Buffer Attributes
Typed array data containers for vertex attributes with efficient GPU transfer.
import {
BufferAttribute,
Int8BufferAttribute,
Uint8BufferAttribute,
Int16BufferAttribute,
Uint16BufferAttribute,
Int32BufferAttribute,
Uint32BufferAttribute,
Float16BufferAttribute,
Float32BufferAttribute,
InstancedBufferAttribute,
InterleavedBuffer,
InterleavedBufferAttribute
} from 'three';
/**
* Base buffer attribute for typed array vertex data
*/
class BufferAttribute {
/** Type flag for buffer attribute detection */
readonly isBufferAttribute: true;
/** Unique attribute ID */
readonly id: number;
/** Attribute name */
name: string;
/** Typed array data */
array: TypedArray;
/** Items per vertex (1-4) */
itemSize: number;
/** Total item count */
readonly count: number;
/** Normalize values on GPU */
normalized: boolean;
/** Buffer usage pattern */
usage: number;
/** Update range for partial updates */
updateRange: { offset: number; count: number };
/** GPU buffer version */
readonly version: number;
/** Buffer needs update flag */
needsUpdate: boolean;
/**
* Create buffer attribute
* @param array - Typed array data
* @param itemSize - Components per vertex
* @param normalized - Normalize values (default: false)
*/
constructor(array: TypedArray, itemSize: number, normalized?: boolean);
/**
* Set usage pattern for optimization
* @param usage - Usage constant (StaticDrawUsage, DynamicDrawUsage, StreamDrawUsage)
* @returns This attribute for chaining
*/
setUsage(usage: number): this;
/**
* Copy data from another attribute
* @param source - Source attribute
* @returns This attribute for chaining
*/
copy(source: BufferAttribute): this;
/**
* Copy array data from another attribute
* @param source - Source attribute
* @returns This attribute for chaining
*/
copyArray(source: BufferAttribute): this;
/**
* Apply transformation matrix to position/normal data
* @param matrix - Transformation matrix
* @returns This attribute for chaining
*/
applyMatrix3(matrix: Matrix3): this;
applyMatrix4(matrix: Matrix4): this;
/**
* Apply normal matrix transformation
* @param matrix - Normal matrix
* @returns This attribute for chaining
*/
applyNormalMatrix(matrix: Matrix3): this;
/**
* Transform by 4x4 matrix (positions)
* @param matrix - Transformation matrix
* @returns This attribute for chaining
*/
transformDirection(matrix: Matrix4): this;
/**
* Set single component value
* @param index - Vertex index
* @param x - X component
* @param y - Y component (optional)
* @param z - Z component (optional)
* @param w - W component (optional)
* @returns This attribute for chaining
*/
setX(index: number, x: number): this;
setY(index: number, y: number): this;
setZ(index: number, z: number): this;
setW(index: number, w: number): this;
/**
* Get single component value
* @param index - Vertex index
* @returns Component value
*/
getX(index: number): number;
getY(index: number): number;
getZ(index: number): number;
getW(index: number): number;
/**
* Set XY components
* @param index - Vertex index
* @param x - X component
* @param y - Y component
* @returns This attribute for chaining
*/
setXY(index: number, x: number, y: number): this;
/**
* Set XYZ components
* @param index - Vertex index
* @param x - X component
* @param y - Y component
* @param z - Z component
* @returns This attribute for chaining
*/
setXYZ(index: number, x: number, y: number, z: number): this;
/**
* Set XYZW components
* @param index - Vertex index
* @param x - X component
* @param y - Y component
* @param z - Z component
* @param w - W component
* @returns This attribute for chaining
*/
setXYZW(index: number, x: number, y: number, z: number, w: number): this;
/**
* Clone attribute
* @returns Cloned attribute
*/
clone(): this;
/**
* Serialize to JSON
* @returns JSON representation
*/
toJSON(): any;
}
/**
* Typed buffer attribute classes for specific data types
*/
/** 8-bit signed integer attributes */
class Int8BufferAttribute extends BufferAttribute {
constructor(array: Int8Array | number[], itemSize: number, normalized?: boolean);
}
/** 8-bit unsigned integer attributes */
class Uint8BufferAttribute extends BufferAttribute {
constructor(array: Uint8Array | number[], itemSize: number, normalized?: boolean);
}
/** 16-bit signed integer attributes */
class Int16BufferAttribute extends BufferAttribute {
constructor(array: Int16Array | number[], itemSize: number, normalized?: boolean);
}
/** 16-bit unsigned integer attributes */
class Uint16BufferAttribute extends BufferAttribute {
constructor(array: Uint16Array | number[], itemSize: number, normalized?: boolean);
}
/** 32-bit signed integer attributes */
class Int32BufferAttribute extends BufferAttribute {
constructor(array: Int32Array | number[], itemSize: number, normalized?: boolean);
}
/** 32-bit unsigned integer attributes */
class Uint32BufferAttribute extends BufferAttribute {
constructor(array: Uint32Array | number[], itemSize: number, normalized?: boolean);
}
/** 16-bit float attributes */
class Float16BufferAttribute extends BufferAttribute {
constructor(array: Uint16Array | number[], itemSize: number, normalized?: boolean);
}
/** 32-bit float attributes */
class Float32BufferAttribute extends BufferAttribute {
constructor(array: Float32Array | number[], itemSize: number, normalized?: boolean);
}
/**
* Instanced buffer attribute for instanced rendering
*/
class InstancedBufferAttribute extends BufferAttribute {
/** Type flag for instanced attribute detection */
readonly isInstancedBufferAttribute: true;
/** Number of instances using this data */
meshPerAttribute: number;
/**
* Create instanced buffer attribute
* @param array - Typed array data
* @param itemSize - Components per instance
* @param normalized - Normalize values
* @param meshPerAttribute - Instances per attribute value
*/
constructor(
array: TypedArray,
itemSize: number,
normalized?: boolean,
meshPerAttribute?: number
);
}
/**
* Interleaved buffer for packed vertex data
*/
class InterleavedBuffer {
/** Type flag for interleaved buffer detection */
readonly isInterleavedBuffer: true;
/** Interleaved data array */
array: TypedArray;
/** Stride (bytes per vertex) */
stride: number;
/** Total vertex count */
readonly count: number;
/** Buffer usage pattern */
usage: number;
/** Update range */
updateRange: { offset: number; count: number };
/** Buffer version */
readonly version: number;
/** Needs update flag */
needsUpdate: boolean;
/**
* Create interleaved buffer
* @param array - Typed array with interleaved data
* @param stride - Bytes per vertex
*/
constructor(array: TypedArray, stride: number);
/**
* Set usage pattern
* @param usage - Usage constant
* @returns This buffer for chaining
*/
setUsage(usage: number): this;
/**
* Copy from another interleaved buffer
* @param source - Source buffer
* @returns This buffer for chaining
*/
copy(source: InterleavedBuffer): this;
/**
* Copy array data
* @param source - Source buffer
* @returns This buffer for chaining
*/
copyArray(source: InterleavedBuffer): this;
/**
* Set data range
* @param value - Value array
* @param offset - Start offset
* @returns This buffer for chaining
*/
set(value: ArrayLike<number>, offset?: number): this;
/**
* Clone buffer
* @returns Cloned buffer
*/
clone(): this;
/**
* Serialize to JSON
* @returns JSON representation
*/
toJSON(): any;
}
/**
* Interleaved buffer attribute referencing part of interleaved data
*/
class InterleavedBufferAttribute {
/** Type flag for interleaved buffer attribute detection */
readonly isInterleavedBufferAttribute: true;
/** Attribute name */
name: string;
/** Source interleaved buffer */
data: InterleavedBuffer;
/** Items per vertex */
itemSize: number;
/** Offset in interleaved data */
offset: number;
/** Normalize values */
normalized: boolean;
/**
* Create interleaved buffer attribute
* @param interleavedBuffer - Source interleaved buffer
* @param itemSize - Components per vertex
* @param offset - Offset in buffer
* @param normalized - Normalize values
*/
constructor(
interleavedBuffer: InterleavedBuffer,
itemSize: number,
offset: number,
normalized?: boolean
);
/** Get vertex count from buffer */
readonly count: number;
/** Get array from buffer */
readonly array: TypedArray;
/** Buffer needs update flag */
needsUpdate: boolean;
/**
* Apply transformation matrix
* @param matrix - Transformation matrix
* @returns This attribute for chaining
*/
applyMatrix4(matrix: Matrix4): this;
/**
* Apply normal matrix
* @param matrix - Normal matrix
* @returns This attribute for chaining
*/
applyNormalMatrix(matrix: Matrix3): this;
/**
* Transform direction vectors
* @param matrix - Transformation matrix
* @returns This attribute for chaining
*/
transformDirection(matrix: Matrix4): this;
/**
* Get/set component values
*/
getX(index: number): number;
setX(index: number, x: number): this;
getY(index: number): number;
setY(index: number, y: number): this;
getZ(index: number): number;
setZ(index: number, z: number): this;
getW(index: number): number;
setW(index: number, w: number): this;
setXY(index: number, x: number, y: number): this;
setXYZ(index: number, x: number, y: number, z: number): this;
setXYZW(index: number, x: number, y: number, z: number, w: number): this;
/**
* Clone attribute
* @returns Cloned attribute
*/
clone(): this;
/**
* Serialize to JSON
* @returns JSON representation
*/
toJSON(): any;
}Usage Examples:
import {
Float32BufferAttribute,
Uint16BufferAttribute,
InstancedBufferAttribute,
InterleavedBuffer,
InterleavedBufferAttribute
} from 'three';
// Standard attributes
const positions = new Float32BufferAttribute([
-1, -1, 0,
1, -1, 0,
0, 1, 0
], 3);
const colors = new Float32BufferAttribute([
1, 0, 0,
0, 1, 0,
0, 0, 1
], 3);
// Index buffer
const indices = new Uint16BufferAttribute([0, 1, 2], 1);
// Instanced attributes for instanced rendering
const instancePositions = new InstancedBufferAttribute(
new Float32Array(300), // 100 instances * 3 components
3, // XYZ per instance
false, // not normalized
1 // one instance per attribute value
);
// Interleaved buffer (position + normal + uv)
const interleavedData = new Float32Array([
// vertex 0: px, py, pz, nx, ny, nz, u, v
-1, -1, 0, 0, 0, 1, 0, 0,
// vertex 1: px, py, pz, nx, ny, nz, u, v
1, -1, 0, 0, 0, 1, 1, 0,
// vertex 2: px, py, pz, nx, ny, nz, u, v
0, 1, 0, 0, 0, 1, 0.5, 1
]);
const interleavedBuffer = new InterleavedBuffer(interleavedData, 8);
// Extract attributes from interleaved buffer
const interleavedPositions = new InterleavedBufferAttribute(interleavedBuffer, 3, 0);
const interleavedNormals = new InterleavedBufferAttribute(interleavedBuffer, 3, 3);
const interleavedUVs = new InterleavedBufferAttribute(interleavedBuffer, 2, 6);
// Set on geometry
geometry.setAttribute('position', interleavedPositions);
geometry.setAttribute('normal', interleavedNormals);
geometry.setAttribute('uv', interleavedUVs);
// Update attributes
positions.setXYZ(1, 2, -1, 0);
positions.needsUpdate = true;
// Partial updates
positions.updateRange.offset = 3;
positions.updateRange.count = 3;Primitive Geometries
Built-in geometry classes for common 3D shapes with configurable parameters.
import {
BoxGeometry,
SphereGeometry,
CylinderGeometry,
ConeGeometry,
PlaneGeometry,
CircleGeometry,
RingGeometry,
TorusGeometry,
TorusKnotGeometry
} from 'three';
/**
* Rectangular box geometry
*/
class BoxGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
width: number;
height: number;
depth: number;
widthSegments: number;
heightSegments: number;
depthSegments: number;
};
/**
* Create box geometry
* @param width - Width (X axis)
* @param height - Height (Y axis)
* @param depth - Depth (Z axis)
* @param widthSegments - Width segments
* @param heightSegments - Height segments
* @param depthSegments - Depth segments
*/
constructor(
width?: number,
height?: number,
depth?: number,
widthSegments?: number,
heightSegments?: number,
depthSegments?: number
);
}
/**
* Sphere geometry with latitude/longitude segments
*/
class SphereGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
radius: number;
widthSegments: number;
heightSegments: number;
phiStart: number;
phiLength: number;
thetaStart: number;
thetaLength: number;
};
/**
* Create sphere geometry
* @param radius - Sphere radius
* @param widthSegments - Horizontal segments
* @param heightSegments - Vertical segments
* @param phiStart - Horizontal start angle
* @param phiLength - Horizontal sweep angle
* @param thetaStart - Vertical start angle
* @param thetaLength - Vertical sweep angle
*/
constructor(
radius?: number,
widthSegments?: number,
heightSegments?: number,
phiStart?: number,
phiLength?: number,
thetaStart?: number,
thetaLength?: number
);
}
/**
* Cylindrical geometry
*/
class CylinderGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
radiusTop: number;
radiusBottom: number;
height: number;
radialSegments: number;
heightSegments: number;
openEnded: boolean;
thetaStart: number;
thetaLength: number;
};
/**
* Create cylinder geometry
* @param radiusTop - Top radius
* @param radiusBottom - Bottom radius
* @param height - Cylinder height
* @param radialSegments - Radial segments
* @param heightSegments - Height segments
* @param openEnded - Open ended cylinder
* @param thetaStart - Start angle
* @param thetaLength - Sweep angle
*/
constructor(
radiusTop?: number,
radiusBottom?: number,
height?: number,
radialSegments?: number,
heightSegments?: number,
openEnded?: boolean,
thetaStart?: number,
thetaLength?: number
);
}
/**
* Cone geometry (cylinder with zero top radius)
*/
class ConeGeometry extends CylinderGeometry {
/**
* Create cone geometry
* @param radius - Base radius
* @param height - Cone height
* @param radialSegments - Radial segments
* @param heightSegments - Height segments
* @param openEnded - Open ended cone
* @param thetaStart - Start angle
* @param thetaLength - Sweep angle
*/
constructor(
radius?: number,
height?: number,
radialSegments?: number,
heightSegments?: number,
openEnded?: boolean,
thetaStart?: number,
thetaLength?: number
);
}
/**
* Rectangular plane geometry
*/
class PlaneGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
width: number;
height: number;
widthSegments: number;
heightSegments: number;
};
/**
* Create plane geometry
* @param width - Plane width
* @param height - Plane height
* @param widthSegments - Width segments
* @param heightSegments - Height segments
*/
constructor(
width?: number,
height?: number,
widthSegments?: number,
heightSegments?: number
);
}
/**
* Circle/sector geometry
*/
class CircleGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
radius: number;
segments: number;
thetaStart: number;
thetaLength: number;
};
/**
* Create circle geometry
* @param radius - Circle radius
* @param segments - Number of segments
* @param thetaStart - Start angle
* @param thetaLength - Sweep angle
*/
constructor(
radius?: number,
segments?: number,
thetaStart?: number,
thetaLength?: number
);
}
/**
* Ring/annulus geometry
*/
class RingGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
innerRadius: number;
outerRadius: number;
thetaSegments: number;
phiSegments: number;
thetaStart: number;
thetaLength: number;
};
/**
* Create ring geometry
* @param innerRadius - Inner radius
* @param outerRadius - Outer radius
* @param thetaSegments - Angular segments
* @param phiSegments - Radial segments
* @param thetaStart - Start angle
* @param thetaLength - Sweep angle
*/
constructor(
innerRadius?: number,
outerRadius?: number,
thetaSegments?: number,
phiSegments?: number,
thetaStart?: number,
thetaLength?: number
);
}
/**
* Torus (doughnut) geometry
*/
class TorusGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
radius: number;
tube: number;
radialSegments: number;
tubularSegments: number;
arc: number;
};
/**
* Create torus geometry
* @param radius - Major radius
* @param tube - Tube radius
* @param radialSegments - Radial segments
* @param tubularSegments - Tubular segments
* @param arc - Central arc angle
*/
constructor(
radius?: number,
tube?: number,
radialSegments?: number,
tubularSegments?: number,
arc?: number
);
}
/**
* Torus knot geometry
*/
class TorusKnotGeometry extends BufferGeometry {
/** Geometry parameters */
readonly parameters: {
radius: number;
tube: number;
tubularSegments: number;
radialSegments: number;
p: number;
q: number;
};
/**
* Create torus knot geometry
* @param radius - Major radius
* @param tube - Tube radius
* @param tubularSegments - Tubular segments
* @param radialSegments - Radial segments
* @param p - Winding parameter p
* @param q - Winding parameter q
*/
constructor(
radius?: number,
tube?: number,
tubularSegments?: number,
radialSegments?: number,
p?: number,
q?: number
);
}Usage Examples:
import {
BoxGeometry,
SphereGeometry,
CylinderGeometry,
PlaneGeometry,
TorusGeometry
} from 'three';
// Basic shapes
const box = new BoxGeometry(2, 2, 2);
const sphere = new SphereGeometry(1, 32, 32);
const cylinder = new CylinderGeometry(1, 1, 2, 32);
// Detailed shapes
const detailedSphere = new SphereGeometry(
1, // radius
64, // width segments
32, // height segments
0, // phi start
Math.PI // phi length (hemisphere)
);
// Ground plane
const ground = new PlaneGeometry(100, 100, 10, 10);
ground.rotateX(-Math.PI / 2); // Make horizontal
// Torus with custom parameters
const torus = new TorusGeometry(
2, // radius
0.5, // tube
16, // radial segments
100, // tubular segments
Math.PI * 2 // full circle
);
// Access parameters
console.log('Box parameters:', box.parameters);Complex Geometries
Advanced geometry types for complex shapes and special use cases.
import {
TetrahedronGeometry,
OctahedronGeometry,
DodecahedronGeometry,
IcosahedronGeometry,
CapsuleGeometry,
LatheGeometry,
ExtrudeGeometry,
TubeGeometry,
ShapeGeometry,
EdgesGeometry,
WireframeGeometry
} from 'three';
/**
* Regular polyhedron geometries
*/
class TetrahedronGeometry extends BufferGeometry {
constructor(radius?: number, detail?: number);
}
class OctahedronGeometry extends BufferGeometry {
constructor(radius?: number, detail?: number);
}
class DodecahedronGeometry extends BufferGeometry {
constructor(radius?: number, detail?: number);
}
class IcosahedronGeometry extends BufferGeometry {
constructor(radius?: number, detail?: number);
}
/**
* Capsule geometry (cylinder with rounded ends)
*/
class CapsuleGeometry extends BufferGeometry {
readonly parameters: {
radius: number;
length: number;
capSegments: number;
radialSegments: number;
};
constructor(
radius?: number,
length?: number,
capSegments?: number,
radialSegments?: number
);
}
/**
* Lathe geometry (revolve 2D shape around axis)
*/
class LatheGeometry extends BufferGeometry {
readonly parameters: {
points: Vector2[];
segments: number;
phiStart: number;
phiLength: number;
};
constructor(
points: Vector2[],
segments?: number,
phiStart?: number,
phiLength?: number
);
}
/**
* Extrude 2D shape into 3D geometry
*/
class ExtrudeGeometry extends BufferGeometry {
readonly parameters: {
shapes: Shape | Shape[];
options: ExtrudeGeometryOptions;
};
constructor(shapes: Shape | Shape[], options?: ExtrudeGeometryOptions);
}
interface ExtrudeGeometryOptions {
/** Extrusion depth */
depth?: number;
/** Number of depth segments */
steps?: number;
/** Bevel enabled */
bevelEnabled?: boolean;
/** Bevel thickness */
bevelThickness?: number;
/** Bevel size */
bevelSize?: number;
/** Bevel offset */
bevelOffset?: number;
/** Bevel segments */
bevelSegments?: number;
/** Extrude path curve */
extrudePath?: Curve<Vector3>;
/** UV generator */
UVGenerator?: UVGenerator;
}
/**
* Tube geometry following a 3D curve
*/
class TubeGeometry extends BufferGeometry {
readonly parameters: {
path: Curve<Vector3>;
tubularSegments: number;
radius: number;
radialSegments: number;
closed: boolean;
};
/** Tangent vectors along path */
tangents: Vector3[];
/** Normal vectors along path */
normals: Vector3[];
/** Binormal vectors along path */
binormals: Vector3[];
constructor(
path: Curve<Vector3>,
tubularSegments?: number,
radius?: number,
radialSegments?: number,
closed?: boolean
);
}
/**
* 2D shape geometry
*/
class ShapeGeometry extends BufferGeometry {
readonly parameters: {
shapes: Shape | Shape[];
curveSegments: number;
};
constructor(shapes: Shape | Shape[], curveSegments?: number);
}
/**
* Edge-only geometry from existing geometry
*/
class EdgesGeometry extends BufferGeometry {
readonly parameters: {
geometry: BufferGeometry;
thresholdAngle: number;
};
constructor(geometry: BufferGeometry, thresholdAngle?: number);
}
/**
* Wireframe geometry from existing geometry
*/
class WireframeGeometry extends BufferGeometry {
constructor(geometry: BufferGeometry);
}Usage Examples:
import {
CapsuleGeometry,
LatheGeometry,
ExtrudeGeometry,
TubeGeometry,
EdgesGeometry,
Vector2,
Shape,
CatmullRomCurve3
} from 'three';
// Capsule for rounded cylinders
const capsule = new CapsuleGeometry(0.5, 2, 8, 32);
// Lathe geometry from profile
const points = [
new Vector2(0, 0),
new Vector2(1, 0),
new Vector2(1, 1),
new Vector2(0.5, 2),
new Vector2(0, 2)
];
const lathe = new LatheGeometry(points, 32);
// Extrude 2D shape
const shape = new Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 1);
shape.lineTo(1, 1);
shape.lineTo(1, 0);
shape.lineTo(0, 0);
const extruded = new ExtrudeGeometry(shape, {
depth: 0.5,
bevelEnabled: true,
bevelThickness: 0.1,
bevelSize: 0.05,
bevelSegments: 8
});
// Tube following curve
const curve = new CatmullRomCurve3([
new Vector3(-2, 0, 0),
new Vector3(0, 2, 0),
new Vector3(2, 0, 0),
new Vector3(0, -2, 0)
]);
const tube = new TubeGeometry(curve, 64, 0.2, 8, true);
// Edge geometry for wireframe overlay
const box = new BoxGeometry();
const edges = new EdgesGeometry(box);The geometry system provides comprehensive vertex data management through BufferGeometry and efficient attribute handling with typed arrays. The extensive collection of primitive geometries covers most common 3D shapes while supporting custom geometry creation for specialized needs.
Install with Tessl CLI
npx tessl i tessl/npm-three