react-three-start

name	react-three-start
description	Build, explain, and modify @react-three/start apps that use file-based React Three Fiber scene and DOM composition. Use when working in a react-three-start project, when the user mentions @react-three/start, react-three-start, R3F app structure, .scene.tsx/.dom.tsx files, Scene/Dom slots, wrappers, start.config.ts, or the react-three-start/r3s CLI.

react-three-start

@react-three/start is a client-first app shell for React Three Fiber. It owns Vite/React bootstrapping, the root element, a fullscreen Canvas, scene discovery, DOM overlays, and wrapper composition. The app author mostly adds files under src/.

Project Shape

src/
  cube.scene.tsx      # rendered inside <Canvas>
  lights.scene.tsx    # rendered inside <Canvas>
  hud.dom.tsx         # rendered in the DOM overlay
start.config.ts       # optional framework config

Use react-three-start dev, react-three-start build, and react-three-start preview; r3s is the short alias. Create apps with npx @react-three/start create my-app.

Entry Files

• src/**/*.scene.tsx files are the 3D layer. Default-export R3F objects, lights, cameras, controls, physics bodies, or providers.
• src/**/*.dom.tsx files are the DOM overlay layer. Default-export normal React DOM UI.
• Entries are discovered automatically and sorted by path. Do not create a manual scene registry for ordinary app composition.
• DOM overlay content is fixed over the viewport. With the default injected Canvas, the overlay container has pointer-events: none, so interactive DOM controls should set pointerEvents: 'auto'.

Slots And Wrappers

Import Scene or Dom from only inside discovered and entry files. The Vite plugin rewrites those imports to continuation components.