@bitbybit-dev/threejs
Three.js engine integration for Bitbybit - draw and interact with CAD geometry from OCCT, JSCAD, and Manifold kernels directly in your Three.js scenes.
Overview
This package connects Bitbybit's powerful CAD kernels to the Three.js rendering engine. It includes three as a dependency, so you don't need to install Three.js separately. Create parametric 3D models with professional CAD operations and render them with Three.js's lightweight yet flexible rendering capabilities.
Quick Start
The fastest way to scaffold a Three.js + Bitbybit project:
npx @bitbybit-dev/create-app my-project --engine threejs
cd my-project
npm install
npm run dev
This creates a complete Vite + TypeScript project with all three CAD kernels (OCCT, JSCAD, Manifold) pre-configured and rendering through Three.js. Learn more about the CLI.
Need Server-Side CAD?
The CLI first asks you to choose between a Frontend app or a CAD Cloud app. Select "cloud" to scaffold a full-stack project with a backend (Hono on Cloudflare Workers, Node.js Express, or ASP.NET Core) and a React + Three.js frontend. Your API key stays on the server and the frontend proxies requests through your backend:
npx @bitbybit-dev/create-app my-cloud-project --type cloud
Choose from 5 backend templates: Hono + SDK, Hono + REST, Node.js + SDK, Node.js + REST, or .NET + REST. Each includes ready-to-run examples with model generation, batch operations, and CAD pipelines. Learn more.
Use It With an AI Agent
An agent that does not know an API invents plausible names for it, and Bitbybit has more functions across its three CAD kernels than any model holds in memory. The free Bitbybit CAD MCP server removes the guesswork: your agent looks up the exact signature, parameter defaults, return type and examples for the version of @bitbybit-dev/threejs your project has installed, and writes code that compiles the first time.
claude mcp add --transport http bitbybit https://mcp.bitbybit.dev/mcp
Cursor, VS Code, claude.ai, ChatGPT and the Claude API connect to the same endpoint; npx -y @bitbybit-dev/mcp runs the same server locally, pinned to your installed version. Every configuration is here.
With a CAD Cloud key, the Bitbybit CAD Cloud MCP goes further and lets the agent run the geometry for you - measure a STEP file, run a pipeline, convert to glTF - and hand back the results as files. For assistants that cannot speak MCP, the whole API is also published as context files. The AI section of the documentation explains all of it.
Learn
| Topic | Link |
|---|---|
| Quick Start Tutorial | https://learn.bitbybit.dev/learn/npm-packages/threejs/start-with-three-js |
| About Three.js Integration | https://learn.bitbybit.dev/learn/npm-packages/threejs/about-threejs |
| Advanced Parametric Model | https://learn.bitbybit.dev/learn/npm-packages/threejs/advanced-parametric-3d-model |
| Hex House Concept | https://learn.bitbybit.dev/learn/npm-packages/threejs/hex-house-concept |
| Three.js Engine Setup | https://learn.bitbybit.dev/learn/getting-started/engines/threejs |
| AI Coding Agents - Overview | https://learn.bitbybit.dev/learn/using-ai-with-bitbybit/intro |
| Bitbybit CAD MCP | https://learn.bitbybit.dev/learn/using-ai-with-bitbybit/mcp/bitbybit-mcp |
Links
| Resource | URL |
|---|---|
| GitHub | https://github.com/bitbybit-dev/bitbybit/tree/master/packages/dev/threejs |
| Monorepo | https://github.com/bitbybit-dev/bitbybit |
| NPM | https://www.npmjs.com/package/@bitbybit-dev/threejs |
| Documentation | https://learn.bitbybit.dev/learn/npm-packages/threejs/start-with-three-js |
| API Reference | https://docs.bitbybit.dev/modules/Bit |
| Unit Test Coverage | https://github.com/bitbybit-dev/bitbybit/actions/workflows/verify.yml |
API reference
Every class, method and input type in this package is documented in the generated TypeScript API reference:
Example Applications
| App | Source Code |
|---|---|
| Hex Shell | GitHub |
| Cup Configurator | GitHub |
| Hex House Concept | GitHub |
| Starter Template | GitHub |
| Terrace Furniture (BabylonJS) | Closed source |
Development
# Build package
npm run build-p
# Run unit tests with coverage
npm run test:coverage
# Re-run them as you edit
npm run test:watch
Bitbybit Platform
Beyond NPM packages, Bitbybit offers:
- Visual Programming Editors - Rete & Blockly drag-and-drop 3D modeling, plus a Monaco TypeScript editor
- CAD Cloud API - Build full pipelines that compose all Bitbybit algorithms, where each step can reference outputs of previous steps. Supports parametric model generation, STEP-to-glTF conversion, and complex CAD workflows via HTTP
- Bitbybit Studio - A growing visual dashboard where API Key users can generate models, convert files, build pipelines with a GUI, inspect tasks, and preview 3D results
- 3D Bits for Shopify - Interactive 3D product configurators for e-commerce
- Script Runners - Execute visual scripts directly on your website
- Built for AI Coding Agents - The free Bitbybit CAD MCP gives Claude Code, Cursor, VS Code, claude.ai and ChatGPT the exact API of the version you use; with a key, the CAD Cloud MCP runs the geometry too
- Business & Enterprise - We help businesses and enterprises develop custom applications and spin up optimized CAD tenant workflows on our managed servers
Support the Project
This package is part of the open-source Bitbybit ecosystem. Your subscription helps fund continued development.
⭐ Subscribe - Silver or Gold plan | Get API Key for CAD Cloud
Community
Major Dependencies
Three.js, OpenCascade, JSCAD, Manifold, Verbnurbs
License
MIT © Bit By Bit Developers