Skip to content
Storyai 3D Director Desk

Storyai 3D Director Desk

A web-based 3D tool built with Three.js and React that lets users manually arrange models, set character poses, and adjust camera angles for quick storyboarding

Download with PC Client

Features

Open Source3D

Screenshots

Storyai 3D Director Desk screenshot 1
Storyai 3D Director Desk screenshot 2
Storyai 3D Director Desk screenshot 3

System Requirements

Minimum 8GB RAM. Low storage requirement (1GB reserved).
Windows 10/11 64-bit: No specific GPU requirements.
macOS 11+: Supports both Intel and M-series chips.

Introduction

Core Features and Characteristics

StoryAI 3D Director Desk is a browser-based 3D visual storyboarding and pre-visualization editing tool. It relies entirely on manual creation and user adjustment in the viewport rather than script generation:

  • Interactive Scene Blocking: Enables manual placement and transformation (translation, rotation, scaling) of characters, props, and 3D models within a 3D viewport.
  • Dual Viewport Switch: Features a seamless toggle between "Director View" (global editing & setup) and "Camera View" (simulated shot preview).
  • Character Pose Control: Includes built-in character rendering and skeletal pose presets, allowing fine-tuning of figure poses.
  • Local Assets & Snapshot Export: Supports importing local 3D models and HDR panorama backgrounds, along with rapid camera screenshot capturing and project JSON import/export.

Development Team and Use Cases

  • Developer: Created and open-sourced by GitHub developer jiguang132 as a lightweight web-based 3D director desk demo.
  • Use Cases:
  • Visual Storyboarding: Directors or writers can position cameras and set up scenes to preview compositions and framing.
  • Pre-visualization (Previs): Film crews can mock up low-cost scene layouts and camera movements directly in the browser before actual shooting.
  • Indie Animation & Game Prototyping: Allows creators to quickly draft 3D visual compositions without installing heavy professional DCC software.

Underlying Technologies

It is a modern client-side Web 3D project without backend AI service dependencies:

  • 3D Rendering Engine: Built on Three.js, React Three Fiber (@react-three/fiber), and Drei for browser 3D viewport rendering.
  • Frontend Stack: Developed with React 18 + TypeScript and bundled via Vite.
  • State & Interaction Management: Utilizes Zustand for editor state management (undo/redo, clipboard features) and camera-controls for camera manipulation.