A lightweight, dependency-free 3D graphics library built on the HTML Canvas API and designed to run in web browsers.
npm install canvas-js-3dpowershell
npm install canvas-js-3d
`
$3
`html
`
$3
`javascript
import { Engine, Mesh, SceneObject, Transform, Vector3, Material } from 'canvas-js-3d';
const canvas = document.getElementById('canvas');
const engine = new Engine(canvas);
// Define the geometry of a cube (or load a .obj file via WavefrontMeshConverter)
const vertices = [
new Vector3(-1, -1, -1), // 0: back-bottom-left
new Vector3( 1, -1, -1), // 1: back-bottom-right
new Vector3( 1, 1, -1), // 2: back-top-right
new Vector3(-1, 1, -1), // 3: back-top-left
new Vector3(-1, -1, 1), // 4: front-bottom-left
new Vector3( 1, -1, 1), // 5: front-bottom-right
new Vector3( 1, 1, 1), // 6: front-top-right
new Vector3(-1, 1, 1) // 7: front-top-left
];
const faces = [
[1, 0, 3, 2], // back
[4, 5, 6, 7], // front
[0, 4, 7, 3], // left
[1, 2, 6, 5], // right
[3, 7, 6, 2], // top
[0, 1, 5, 4], // bottom
];
const mesh = new Mesh(vertices, faces);
const cubeSceneObj = new SceneObject(
mesh,
new Transform(
new Vector3(0, 0, 5), // Position
Vector3.zero(), // Rotation (in radians)
Vector3.one() // Scale
),
new Material(
'#ffffff', // Edge color
null, // Optional gradient color (e.g. '#0000ff' for blue)
'#333333' // Optional face color (null for wireframe)
)
);
// Smoothly rotate the cube (gets called each frame)
engine.onFrameUpdate = (deltaTime) => {
// deltaTime = time since last frame
cubeSceneObj.transform.rotate(new Vector3(0, deltaTime, 0));
};
engine.scene.addSceneObject(cubeSceneObj);
engine.start();
`
Run a dev server:
`powershell
npx http-server -c-1
`
$3
Feature Usage
These snippets assume you already have an Engine, a SceneObject called cubeSceneObj, and a running render loop. They’re meant to be drop-in additions to the minimal setup above.
$3
`javascript
engine.isDepthSorting = true; // Already enabled by default
`
$3
`javascript
engine.camera.isBackFaceCulling = true; // Already enabled by default
`
$3
`javascript
engine.camera.transform.setPosition(0, 0, -3);
engine.camera.transform.setRotation(0, 0, 0); // in radians
`
$3
`javascript
engine.camera.setFov(90); // 90 degrees (60 degrees by default)
`
$3
`javascript
// Solid color
engine.backgroundColor = '#add8e6';
engine.backgroundGradientColor = null;
// Vertical gradient
engine.backgroundColor = '#000000';
engine.backgroundGradientColor = '#1a1a2e';
`
$3
`javascript
engine.defaultEdgeColor = '#00ff00';
`
$3
`javascript
// Edges only
cubeSceneObj.material = new Material('#ffffff');
// Gradient edges
cubeSceneObj.material = new Material('#ff00ff', '#00ffff');
// Face fill (depth sorting must be enabled)
engine.isDepthSorting = true;
// Swap material before/after/during runtime
cubeSceneObj.material = new Material('#ff00ff', '#00ffff', '#222222');
`
$3
`javascript
engine.depthFog = {
enabled: true,
color: '#000000',
near: 5,
far: 40
};
`
$3
`javascript
engine.bloom = {
enabled: true,
blur: 5,
color: null // null = use edge color
};
`
$3
`javascript
engine.isFrameRateCounter = true;
engine.debugTextColor = '#ffffff';
`
$3
`javascript
import { Vector2 } from 'canvas-js-3d';
engine.screenSize = new Vector2(
500, // Width 500px
500 // Height 500px
);
`
$3
`javascript
import { WavefrontMeshConverter } from 'canvas-js-3d';
const mesh2 = await WavefrontMeshConverter.fromUrl('./model.obj');
const obj = new SceneObject(
mesh2,
new Transform(new Vector3(4, 0, 4), Vector3.zero(), Vector3.one()),
new Material('#ffffff', null, '#222222')
);
engine.scene.addSceneObject(obj);
`
#### Supported File Sources:
* WavefrontMeshConverter.fromUrl(url);
* WavefrontMeshConverter.fromFile(file);
* WavefrontMeshConverter.fromFileDialog();
* WavefrontMeshConverter.fromText(objString);
Only vertex positions and face indices are parsed. Normals and UVs are ignored.
$3
`javascript
engine.stop();
`
Directory Structure
`
src/
├─ math/ # Vectors & transform math
├─ core/ # Scene, mesh, engine, material, scene object
├─ rendering/ # Camera, renderer, post effects
└─ wavefront-loading/ # OBJ loader pipeline
``