Spaces:
Sleeping
Sleeping
File size: 1,360 Bytes
fc3783e f7605e1 fc3783e f7605e1 fc3783e f7605e1 fc3783e f7605e1 fc3783e f7605e1 fc3783e f7605e1 fc3783e f7605e1 fc3783e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
"ue client";
import { useState, useTransition } from "react";
import { Environment, CameraControls } from "@react-three/drei";
import { PresetsType } from "@react-three/drei/helpers/environment-assets";
import { useControls } from "leva";
import { CameraControlsImpl } from "@react-three/drei";
const { ACTION } = CameraControlsImpl;
export const Env = () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [_, startTransition] = useTransition();
const [background, setBackground] = useState<PresetsType>("sunset");
useControls({
background: {
value: background,
options: ["sunset", "dawn", "forest"],
onChange: (value) => startTransition(() => setBackground(value)),
},
});
return (
<>
<CameraControls
makeDefault
polarAngle={0.8}
azimuthAngle={0.8}
maxPolarAngle={Math.PI / 1.2}
minPolarAngle={-Math.PI / 1.2}
maxDistance={10}
minDistance={4}
mouseButtons={{
left: ACTION.ROTATE,
middle: ACTION.DOLLY,
right: ACTION.ROTATE,
wheel: ACTION.DOLLY,
}}
touches={{
one: ACTION.TOUCH_ROTATE,
two: ACTION.TOUCH_DOLLY,
three: ACTION.TOUCH_DOLLY,
}}
/>
<Environment preset={background} background blur={1} />
</>
);
};
|