67.js

67js is a 3D engine for JavaScript that an AI agent drives through an MCP server. It makes 3D easy to understand and easy to do.

The agent knows every part of 67js and carries the heavy steps. It builds the scene, lights it, checks the preview and renders the result. You keep the creative choices and stay in the loop, because the agent shows previews and asks when a matter of taste is open.

What you can make

More scenes are on the showcase page and in the Showcase section below.

What it is

67js is a 3D engine for AI agents and for pages. It has a real-time rasterizer, a path tracer, addons for terrain, vegetation, characters, liquid, vehicles and media export, and an MCP server. A scene is plain data: each part has a geometry, a matrix and a material.

An agent builds and changes a scene through the MCP server, looks at PNG previews and renders stills or MP4 video. The goal is to be as capable as Blender and as light as three.js. docs/goal.md defines each part. See the documentation, the guide for agents and the FAQ.

Install

Let your agent do it. Paste this prompt into Claude Code, Codex, Cursor, Gemini CLI or OpenCode. The agent installs the package, reads the guide and connects the MCP server.

Install 67js from npm as `67js@npm:@codepawlhq/67js` and connect its MCP server with `npx 67js-mcp`. Read
https://67js.codepawl.com/llms.txt first and follow it.

Claude Code plugin. One command adds the MCP server and both skills.

/plugin marketplace add codepawl/67.js
/plugin install 67js@67js

By hand

npm install 67js@npm:@codepawlhq/67js

The registry name is @codepawlhq/67js, and the alias 67js keeps imports short. The package is ESM and needs Node.js 20.19 or later. Glaze and the WebGL2 path tracer need a WebGL2 browser, and the WebGPU backends need WebGPU.

A new minor version ships about once a week. Before 1.0, a minor version can change the API, and CHANGELOG.md lists each change. npx keeps the copy it downloaded first. To update, run npm install 67js@npm:@codepawlhq/67js@latest or npx -y -p @codepawlhq/67js@latest 67js-mcp.

Quick start

import { Renderer67, box, sphere } from '67js';

// Column-major 4x4 matrix: scale, then move.
const placed = ([x, y, z], [width, height, depth] = [1, 1, 1]) =>
  new Float32Array([width, 0, 0, 0, 0, height, 0, 0, 0, 0, depth, 0, x, y, z, 1]);

const parts = [
  {
    name: 'Floor',
    geometry: box(),
    matrix: placed([0, 0, 0], [8, 0.1, 8]),
    material: { color: [0.4, 0.42, 0.45], metallic: 0, roughness: 0.9, emission: 0 },
  },
  {
    name: 'Ball',
    geometry: sphere(48, 24),
    matrix: placed([0, 1, 0]),
    material: { color: [0.8, 0.3, 0.2], metallic: 0, roughness: 0.35, emission: 0 },
  },
];

const canvas = document.querySelector('canvas');
const renderer = new Renderer67(canvas, parts, { samples: 4, memoryBudgetMiB: 256 });
renderer.render({ eye: [4, 3, 6], target: [0, 1, 0] });

Call renderer.updateParts(parts) to move or recolour parts without a new upload. Call renderer.resize() after the canvas changes size, and renderer.dispose() before you replace the renderer. The guide covers cameras, lights, effects and every material field. To save a PNG from a script, use the render-from-a-script recipe.

For agents

The package includes an MCP server that connects an agent to a persistent browser renderer. The server needs a local Chrome installation.

npx 67js-mcp --backend gpu --memory 192

--backend gpu renders with hardware WebGL2 through Chrome. Use --backend cpu on a machine without a GPU. With bun, bunx 67js-mcp takes the same flags; CI runs the packaged server under bun on every pull request. An agent authors a JSON recipe, sets lights and fog, imports GLB assets and adds motion. It gets PNG previews back, compares up to four views in a review grid and runs render jobs for stills and MP4 video. The server accepts no arbitrary code and no remote asset URLs. The MCP reference lists its tools.

Two skills teach an agent to drive the MCP tools: build-67js-scene for scenes and materials, and render-67js-media for image and video export. For a plain-text guide, give the agent llms.txt.

viz3d uses 67js. It is a skill that turns places, systems and events into 3D apps and films, and it renders its films and stills in 67js. To add it in Claude Code, run /plugin marketplace add codepawl/viz3d, then /plugin install visualize-in-3d@codepawl.

Showcase

Each picture below is a 67js render. The linked ones open live in the browser.

Render images and video

The render command exports a scene to PNG or MP4 through headless Chrome, on the GPU or on the CPU.

npm run render -- --kind image --scene nature --backend gpu --preset high --output artifacts/nature.png

Video export streams one frame at a time, so a film never sits in memory. The render skill lists every preset and flag.

Addons

Each addon is a separate import, so a page loads only what it uses.