Play Controls

Start your scene by clicking the Play action in the Scene Controls.

• For 3D components the editor switches to the default camera and enables any rendered controls such as MapControls.
• For all components they will now become interactive, and the editor UI will be hidden.

This action is only available in edit and pause states.

Pause your scene by clicking the Pause action in the Scene Controls. This will pause your scene in its current state and bring up the editor UI for you to make any adjustments or inspect the scene.

This action is only available in play state.

To reset the scene back to its default state click the Reset action in the Scene Controls.

If you have global state stored outside of React you'll need to reset it yourself. One method to do this is by resetting it in an effect:

useEffect(() => {
  // Instantiate state if needed here
  return () => {
    // Reset state here
  };
}, []);

This action is available in all states.

If you need to completely flush the scene state you can reload the scene document by using the reload hotkey: Cmd + Shift + R.

Stop running your scene by clicking the Stop action in the Scene Controls. This will reset the scene and bring the editor UI back.

This action is available in play and pause states.

Only available in 3D components.

To play your scene through a different camera click the Settings action next to the Play action. This is useful when needing to debug from a specific viewpoint while the scene is interactive.

To change what the default camera is set the makeDefault prop to true on any camera component from the Drei library.

import { PerspectiveCamera } from "@react-three/drei";
 
<PerspectiveCamera makeDefault />;