whatisgithub

What is storyai-3d-director-desk?

jiguang132/storyai-3d-director-desk — explained in plain English

Analysis updated 2026-05-18

533TypeScriptAudience · designerComplexity · 2/5LicenseSetup · easy

In one sentence

A browser-based 3D tool for planning camera shots and blocking scenes with characters, cameras, and panoramic backgrounds before filming or animating.

Mindmap

mindmap
  root((3D Director Desk))
    What it does
      Plan camera shots in 3D
      Place characters and cameras
      Import panoramic backgrounds
      Capture screenshots of shots
    Tech stack
      React
      Three.js
      React Three Fiber
      Vite
    Use cases
      Previsualize a film shot
      Block a scene before filming
      Import custom 3D models
      Save and reload a project
    Audience
      Filmmakers
      Animators
      Game designers
    Setup
      npm install
      npm run dev
      Open in browser

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Plan camera angles and shot composition for a film or animation before filming.

USE CASE 2

Block out a scene with characters, cameras, and props in 3D.

USE CASE 3

Import custom 3D models and panoramic backgrounds to build a scene.

USE CASE 4

Save a project locally and export it as a JSON file to reuse later.

What is it built with?

ReactViteTypeScriptThree.jsZustand

How does it compare?

jiguang132/storyai-3d-director-deskshadcnspace/shadcnspacebklit/bklit-ui
Stars533528539
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

8 of 312 automated tests currently fail, mostly around the model library panel and pose presets.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

This project is a browser-based 3D director desk, a tool for planning film or video shots before actually filming or animating them. It runs entirely in a web browser and lets someone set up characters, cameras, scenery, and background panoramas in a 3D scene to quickly plan camera angles and take screenshots of the results. The README, written in Chinese, describes it as suited for lightweight previsualization, shot planning, and scene blocking rather than as a full production tool. Inside the editor, a person can switch between a director's overview view and individual camera views. It comes with eight built in character models and twenty different poses, and supports adding crowds of characters, basic shapes, and cameras quickly. Users can also import their own FBX or OBJ 3D model files and build a custom model library, along with importing panoramic images for backgrounds. The tool includes camera capture and screenshot recording, basic shot management, a viewport frame with aspect ratio guides and a grid overlay, and standard pan, rotate, and zoom controls. The interface has a left panel for searching and organizing scene objects with visibility, locking, and deletion controls, a central 3D viewport for arranging the scene, and a right panel that automatically shows editing options for whatever is currently selected, whether that is the scene, a character, a model, or a camera. Scenes and imported models are saved locally in the browser, and full projects can be exported to a JSON file and reimported later. It is built with React, Vite, TypeScript, and Three.js through the React Three Fiber library, uses Zustand for state management, and is released under the MIT license.

Copy-paste prompts

Prompt 1
Help me install and run storyai-3d-director-desk locally with npm.
Prompt 2
Explain how to import my own FBX model into the director desk's model library.
Prompt 3
Walk me through switching between director view and individual camera view.
Prompt 4
Show me how to export and reimport a saved scene as a JSON project file.

Frequently asked questions

What is storyai-3d-director-desk?

A browser-based 3D tool for planning camera shots and blocking scenes with characters, cameras, and panoramic backgrounds before filming or animating.

What language is storyai-3d-director-desk written in?

Mainly TypeScript. The stack also includes React, Vite, TypeScript.

What license does storyai-3d-director-desk use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is storyai-3d-director-desk to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is storyai-3d-director-desk for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.