MickyCodes

ThreeDot A productiongrade, Godotinspired framework for Three.js. Bringing structured scene trees, deterministic lifecycles, typesafe signals, unified input maps, 2D/3D nodes, and an integrated UI system to web 3D. Why ThreeDot? Three.js is an extraordinary rendering engine, but it intentionally focuses on the graphics pipeline: geometries, materials, shaders, and WebGL rendering. It does not provide: A standardized game object lifecycle (, , ). Deterministic pause management (pausing gameplay while keeping UI and menus interactive). Decoupled event messaging (signals). A virtual input map system separating hardware keys from semantic gameplay actions. An integrated anchorandmargin GUI system. ThreeDot bridges this gap by bringing the proven architectural philosophy of Godot Engine to Three.js: Hierarchical Scene Tree: Everything is a . Nodes feature stable names, parentchild lifecycles, and relative path lookups (). Deterministic Lifecycle: Predictable execution stages (, , , , , ). TypeSafe Signals & HTML Bridge: Decoupled observer pattern bridging 3D nodes to HTML and JSX. Connect any standard directly to gameplay logic. Unified Input Map: Virtual actions (e.g. , ), digital/analog axis mapping (, ), pointer locking, and gamepad polling. PackedScenes & Prefabs: Reusable node blueprints that serialize to and from JSON and instantiate cleanly. Rich 2D & 3D Node Library: , , , , , , , . GodotStyle UI System: Responsive nodes with anchors, margins, presets, and automatic layout containers (, , , , ). Declarative JSX & Imperative Code: Write clean objectoriented TypeScript classes extending Node3D, or declare full scene graphs in JSX. Both paradigms interoperate seamlessly. Zero Direct Three.js Dependency: All math types, geometries, materials, shaders, textures, and loaders are bundled and directly exported from . Installation Install ThreeDot into your project. ThreeDot bundles and reexports all required math, geometries, materials, and shaders, so you only ever install a single package: 1. Instant Setup (curl / wget) Install ThreeDot directly into an existing project or scaffold a fresh game with one command: 2. Package Manager Or with pnpm, yarn, or bun: No peer dependencies, secondary packages, or are required. Quick Start Here is a minimal, complete 3D scene with a rotating cube and player logic: HTML & JSX DOM Signal Bridge ThreeDot eliminates the boilerplate of attaching manual click listeners and passing callbacks through the attribute. Standard HTML DOM elements (or React/Vue/Svelte overlays) can trigger 3D game logic directly: 1. In your HTML HUD or UI Overlay 2. In 3D Game Code Core Architecture Feature Guide 1. Node Hierarchy and Navigation Every node has a unique , userassigned , ordered children, and tree path resolution: 2. Node Lifecycle Sequence Every node progresses through a deterministic lifecycle: 3. TypeSafe Signals ThreeDot features a Godotinspired typed Signal pattern: Health: ${curr}/${max} 4. Input Map System Virtual action mapping decouples gameplay logic from physical keys: 5. GodotStyle Responsive UI Create game HUDs and menus that anchor and layout cleanly across screen sizes: 6. Declarative JSX & Imperative Code Parity Assemble scene hierarchies declaratively using JSX tags, while embedding your custom imperative classes directly: Development & Documentation License MIT (c) ThreeDot Contributors

@mickycodes

0

4