JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 7
  • Score
    100M100P100Q65340F
  • License Apache-2.0

Isomorphic Three.js + Jolt Physics JSON scene runner for browser and server (Node/Bun).

Package Exports

  • @openfluke/isocard

Readme

Isocard

Isocard is a versatile, isomorphic scene management library built on top of Three.js and Jolt Physics. It provides a unified interface for creating, managing, and simulating 3D scenes with physics and optional AI-driven behaviors, seamlessly supporting both client-side (browser) and server-side (Node.js/Bun) environments. With a JSON-driven configuration, Isocard enables developers to define complex scenes, run physics simulations, and integrate automation or AI policies with ease.


✨ Features

  • Isomorphic Runtime: Run the same code in the browser or on a server, enabling consistent behavior across environments.
  • Three.js & Jolt Physics Integration: Combines powerful 3D rendering with robust physics simulations out of the box.
  • JSON-Driven Scenes: Define scenes using a simple, serializable JSON format for easy creation, sharing, and replaying of experiments.
  • Deterministic Simulations: Record inputs and replay simulations with consistent results for reliable testing and experimentation.
  • Headless Mode: Execute physics simulations without rendering, ideal for server-side computations or AI training.
  • Extensible Architecture: Integrate custom controllers, automation scripts, or AI policies to enhance scene behavior.
  • Dynamic Object Management: Add, update, or remove objects with physics properties in real-time.
  • Camera & Layer Control: Fine-tune camera settings and manage object layers for visibility and rendering control.

πŸ“¦ Installation

Install Isocard using your preferred package manager:

# Using Bun
bun add @openfluke/isocard

# Using npm
npm install @openfluke/isocard

Ensure you have the required dependencies installed:

bun add three jolt-physics
# or
npm install three jolt-physics

πŸ›  Usage

Basic Example

import * as THREE from "three";
import { IsoCard } from "isocard";

// dependencies passed into IsoCard
const deps = {
  THREE,
  // optional: lets IsoCard load Jolt if not available on `window`
  loadJolt: async () => (await import("jolt-physics")).default,
};

// create IsoCard instance
const iso = new IsoCard(
  { clientWidth: 800, clientHeight: 600, appendChild() {}, addEventListener() {} } as any,
  deps,
  { isPreview: true, isServer: true }
);

// setup physics
await iso.setupJOLT();
iso.loadSceneWithConstraints(JSON.stringify({
  objects: [
    { name: "box", shape: "box", size: [1, 1, 1], position: [0, 5, 0], physics: { motionType: "dynamic" } }
  ]
}));

iso.startPhysics();
iso.startAnimate();

console.log("Simulation running with", iso.dynamicObjects.length, "dynamic objects");

πŸ“‚ Project Structure

β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ isocard.ts    # Core Isocard class implementation
β”‚   β”œβ”€β”€ index.ts      # Package entrypoint
β”œβ”€β”€ dist/             # Compiled output (published to npm)
β”œβ”€β”€ package.json      # Project metadata and scripts
β”œβ”€β”€ README.md         # Project documentation

πŸ§ͺ Getting Started with Development

To develop or contribute to Isocard, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/openfluke/isocard
    cd isocard
  2. Install Dependencies:

    bun install
  3. Build the Project:

    bun run build
  4. Link Locally for Testing:

    bun link

    In your test project:

    bun link @openfluke/isocard
  5. Run a Development Server (for frontend testing):

    bun run dev

🌐 Resources

IsoCard vs Existing Tools

Feature / Focus Three.js (core) Jolt (engine) Wrappers (Ammo.js, Cannon-es, Rapier, Enable3D) IsoCard (@openfluke/isocard)
Rendering βœ… (WebGL) ❌ βœ… (via Three.js) βœ… (via injected Three.js)
Physics ❌ βœ… (C++) βœ… (JS/WASM bindings) βœ… (Jolt via JS/WASM + DI)
Browser support βœ… WASM ports βœ… βœ… (React/Vite/Ionic ready)
Server/Headless mode ❌ Native only Rare / gluey βœ… (Node/Bun headless physics)
Isomorphic parity ❌ ❌ ❌ βœ… (same JSON runs front & back)
Scene definition Manual code Manual code Sometimes entity configs βœ… JSON schema (interpretJSON)
Play/Stop physics ❌ Engine-level Possible but not first-class βœ… One-liner API (startPhysics)
Camera & controls Manual setup ❌ Manual βœ… JSON + API (setCameraConfig)
AI hooks / recording ❌ ❌ ❌ βœ… (player data β†’ AI controller)
Remix/share loop ❌ ❌ ❌ βœ… Built-in (JSON scenes sharable)
Multi-server watching ❌ ❌ ❌ βœ… Overlay & opacity controls
Target users Graphics devs Engine/game devs Hobby/game devs Web devs, AI/robotics, educators

Key Takeaway

IsoCard isn’t β€œjust another wrapper.” It’s the isomorphic runtime:

  • Load a scene from JSON.
  • Run it in browser or headless server.
  • Toggle physics, camera, and AI controllers with simple APIs.
  • Record, replay, remix, and share without touching engine internals.

πŸ“œ License

Apache License 2.0 Β© 2025 Samuel Watson