run3d

Create a 3D project in one command. The starter scene recreates the run3d icon with a green cube and speed lines, ready to edit.

As models like GPT-6 Astra grow more capable at building 3D experiences, the distance from an idea to a working prototype keeps shrinking. I have new ideas every day, and I want to spend that energy creating. run3d brings my go-to tools for brainstorming and experimentation into one ready-to-use starter, so I can jump straight into building, testing ideas, and discovering what works.

Usage

Requires Node.js >=24 and pnpm.

npx @crapthings/run3d my-project
cd my-project
pnpm dev

Edit the components in src/scenes to make the starter scene your own. To install dependencies later, add --skip-install to the first command.

Drag to orbit the scene, scroll to zoom, and right-drag to pan. Edit src/scenes/index.jsx for the scene and its settings.

Languages

The template initializes react-i18next in src/i18n.js, with English and Chinese resources in src/locales. It detects the browser language, falls back to English, and remembers language changes in local storage. The document's lang attribute follows the active language.

Use const { t, i18n } = useTranslation() from react-i18next in components, render text with t('scene.label'), and switch languages with i18n.changeLanguage('zh') or i18n.changeLanguage('en'). Add new translation keys to both JSON files; register additional languages in src/i18n.js.

Included tools

Ordered by importance to the starter and typical usage, with core tools first and specialized tools later.

App foundation

• React and React DOM — build and render the app UI.
• Vite and @vitejs/plugin-react — run the development server and build the React app.

3D scenes

• Three.js — renders 3D scenes.
• React Three Fiber — lets you build Three.js scenes with React.
• Drei — provides ready-made 3D helpers and controls.
• Klipp — provides a virtual camera toolkit for Three.js and React Three Fiber.
• GSAP and @gsap/react — animate scene and UI properties with timelines and the useGSAP React hook.
• Postprocessing and @react-three/postprocessing — add visual effects with React components.
• pmndrs/math — provides math utilities for 3D work.
• Drei StatsGl — monitors rendering performance while developing.

Data and state

• Zustand — manages React app state.
• Koota — manages game state with entities and components.
• D3 — provides data scales, layouts, and visualizations.
• p5.js — creates interactive graphics and creative coding sketches.

Interface

• Tailwind CSS and @tailwindcss/vite — style the app and integrate Tailwind with Vite.
• Headless UI — provides accessible, unstyled React UI components.
• React Router — connects URLs to pages and handles navigation.
• react-i18next, i18next, and i18next-browser-languagedetector — translate UI text, with browser language detection and a saved language preference.
• React Hotkeys Hook — adds declarative keyboard shortcuts with a React hook.
• Floating UI — positions menus, tooltips, and popovers.

Worlds and movement

• React Three Rapier — adds physics and collisions.
• Recast Navigation and @recast-navigation/three — generate navmeshes and find paths in Three.js scenes.
• Navcat — builds and queries navmeshes in pure JavaScript, with Three.js helpers.
• FastNoiseLite — generates procedural 2D and 3D noise.
• Three Hex Tiling — reduces visible repetition in tiled textures.
• TSL Hex Tiling — reduces texture repetition with Three.js TSL for WebGPU and WebGL 2.

Media

• Howler.js — plays audio with volume controls, sound sprites, and 3D spatial sound.
• Mediabunny — reads, writes, and converts audio and video files in the browser.
• Elementary — creates declarative audio DSP graphs with @elemaudio/core and runs them in the browser with @elemaudio/web-renderer.