import React, { useState, useTransition } from 'react'; import { useControls } from 'leva'; import { Canvas } from '@react-three/fiber'; import { AccumulativeShadows, RandomizedLight, Center, Environment, OrbitControls } from '@react-three/drei'; export default function App() { return (

); } function Sphere() { const { roughness } = useControls({ roughness: { value: 1, min: 0, max: 1 } }); return ( ); } function Env() { const [preset, setPreset] = useState('sunset'); // You can use the "inTransition" boolean to react to the loading in-between state, // For instance by showing a message const [inTransition, startTransition] = useTransition(); const { blur } = useControls({ blur: { value: 0.65, min: 0, max: 1 }, preset: { value: preset, options: ['sunset', 'dawn', 'night', 'warehouse', 'forest', 'apartment', 'studio', 'city', 'park', 'lobby'], // If onChange is present the value will not be reactive, see https://github.com/pmndrs/leva/blob/main/docs/advanced/controlled-inputs.md#onchange // Instead we transition the preset value, which will prevents the suspense bound from triggering its fallback // That way we can hang onto the current environment until the new one has finished loading ... onChange: (value) => startTransition(() => setPreset(value)) } }); return ; }