9th.js

9th.js

A WebGL library for building interactive 3D scenes in the browser.

9th.js gives you a scene graph, cameras, meshes, lights, materials, loaders, and controls — so you can render 3D content with a clear, object-oriented API and ship it to the web.

Maintained by digitalcloud.

Features

• Scene graph — Scene, Object3D, Mesh, hierarchy, transforms (Euler + quaternion)
• Cameras — perspective and orthographic
• Geometry — box, sphere, plane, and more → BufferGeometry
• Materials — unlit and PBR (MeshBasicMaterial, MeshStandardMaterial, and related)
• Lights — ambient, directional, point, spot
• Picking — Raycaster + Mesh.raycast
• Instancing — InstancedMesh for batched draws
• Render targets — offscreen RenderTarget + composer-friendly renderer APIs
• Extras — post-processing passes, tween helpers, game-loop utilities (experimental WebGPU preview)
• Controls — OrbitControls for explore / inspect UIs
• Loaders — GLTF, OBJ, and related asset pipelines
• Engine helper — optional loop, pause/resume, and performance hooks
• Builds — ESM + UMD, TypeScript typings on npm

Install

npm install 9th.js

yarn add 9th.js
pnpm add 9th.js

Quick start

import {
  WebGLRenderer,
  Scene,
  PerspectiveCamera,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh
} from '9th.js';

const canvas = document.querySelector('#canvas');
const renderer = new WebGLRenderer({ canvas, antialias: true });
const scene = new Scene();
const camera = new PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
camera.position.set(0, 1.5, 4);

const cube = new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshBasicMaterial({ color: '#4fc3f7' })
);
scene.add(cube);

function frame() {
  requestAnimationFrame(frame);
  cube.rotation.y += 0.01;
  renderer.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.render(scene, camera);
}
frame();

Lit scene + orbit

import {
  WebGLRenderer, Scene, PerspectiveCamera,
  BoxGeometry, MeshStandardMaterial, Mesh,
  AmbientLight, DirectionalLight, OrbitControls
} from '9th.js';

const canvas = document.querySelector('#canvas');
const renderer = new WebGLRenderer({ canvas, antialias: true });
const scene = new Scene();
const camera = new PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
camera.position.set(2, 2, 4);

scene.add(new AmbientLight(0xffffff, 0.35));
const sun = new DirectionalLight(0xffffff, 1.2);
sun.position.set(3, 5, 2);
scene.add(sun);

scene.add(new Mesh(
  new BoxGeometry(1, 1, 1),
  new MeshStandardMaterial({ color: '#4fc3f7', metalness: 0.2, roughness: 0.4 })
));

const controls = new OrbitControls(camera, canvas);

function frame() {
  requestAnimationFrame(frame);
  controls.update();
  renderer.setSize(innerWidth, innerHeight);
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.render(scene, camera);
}
frame();

CDN

<script src="https://unpkg.com/9th.js@1.0.7/dist/umd/9th.umd.min.js"></script>

Also on jsDelivr: https://cdn.jsdelivr.net/npm/9th.js@1.0.7/dist/umd/9th.umd.min.js

Examples

Live gallery (after npm run build, serve the repo root):

examples/ → open examples/index.html

Previews

npm run build
npx serve .
# open http://localhost:3000/examples/

Docs & roadmap

• Getting started
• API overview
• Roadmap
• Changelog

License

MIT © digitalcloud