GEP-200 Add default options for the CameraControls

Author: aranega

examples/vite-3DCanvas-react-app/src/components/viewers/Canvas3DExample.tsx

@@ -1,10 +1,17 @@
 import React, { useRef, useState } from "react";
-import { Canvas3D } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
+import {
+  Canvas3D,
+  Canvas3DRootState,
+} from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
 import { Box } from "@mui/material";
 import { useFrame } from "@react-three/fiber";
 import { Mesh } from "three";
 import { CameraControls } from "@react-three/drei";
-import { Toolbar3D, Toolbar3DButton, Toolbar3DSeparator } from "../toolbar/Toolbar3D";
+import {
+  Toolbar3D,
+  Toolbar3DButton,
+  Toolbar3DSeparator,
+} from "../toolbar/Toolbar3D";
 import { CameraControlsProvider } from "../toolbar/CameraControlsContext";
 import {
   Navigation3D,
@@ -54,24 +61,27 @@ const Canvas3DExample: React.FC = () => {
   const [activeCamera, setActiveCamera] = useState(false);
   const cameraControlsRef = useRef<CameraControls>(null);
 
-  const handleCameraClick = (fiber: any) => {
+  const handleCameraClick = (fiber: Canvas3DRootState) => {
     console.log("Camera clicked", fiber.camera);
+    console.log("Camera clicked", fiber);
     console.log("Current activeCamera state:", activeCamera);
-    console.log("CameraControls ref:", cameraControlsRef.current);
+    console.log("CameraControls:", fiber.controls);
 
     setActiveCamera(!activeCamera);
 
-    if (cameraControlsRef.current) {
+    if (fiber.controls) {
       if (!activeCamera) {
         console.log("Setting focus position...");
-        cameraControlsRef.current.setLookAt(
+
+        /* prettier-ignore */
+        fiber.controls.setLookAt(
           5, 5, 5,  // Camera position
           0, 0, 0,  // Look at center
           true      // Enable animation
         );
       } else {
         console.log("Resetting camera...");
-        cameraControlsRef.current.reset(true);
+        fiber.controls.reset(true);
       }
     } else {
       console.log("CameraControls ref is null!");
@@ -80,14 +90,14 @@ const Canvas3DExample: React.FC = () => {
 
   const Scene = () => (
     <>
-      <CameraControls
+      {/* <CameraControls
         ref={cameraControlsRef}
         minDistance={2}
         maxDistance={20}
         enablePan={true}
         enableZoom={true}
         enableRotate={true}
-      />
+      /> */}
       <MyRotatingBox />
       <ambientLight intensity={0.5} />
       <pointLight position={[10, 10, 10]} />
@@ -115,7 +125,16 @@ const Canvas3DExample: React.FC = () => {
           </Toolbar3D>
         </CameraControlsProvider>
         <Box sx={classes.canvasContainer}>
-          <Canvas3D frameloop={"always"} nonInteractive={true}>
+          <Canvas3D
+            frameloop={"always"}
+            cameraOptions={{
+              minDistance: 2,
+              maxDistance: 20,
+              enablePan: true,
+              enableZoom: true,
+              enableRotate: true,
+            }}
+          >
             <Scene />
           </Canvas3D>
         </Box>

geppetto.js/geppetto-ui/src/3d-canvas/Canvas3D.tsx

@@ -2,7 +2,7 @@ import { Canvas, CanvasProps, useThree } from "@react-three/fiber";
 import React, { forwardRef, useEffect, useRef } from "react";
 
 import { RootState } from "@react-three/fiber";
-import { CameraControls } from "@react-three/drei";
+import { CameraControls, CameraControlsProps } from "@react-three/drei";
 import { useState } from "react";
 import { Loader } from "three";
 import create from "zustand";
@@ -14,6 +14,7 @@ type Canvas3DBaseProps = {
   ref?;
   defaultLightOff?: boolean;
   nonInteractive?: boolean;
+  cameraOptions?: CameraControlsProps;
 };
 
 type Canvas3DProps = Canvas3DBaseProps &
@@ -153,6 +154,7 @@ export const Canvas3D: React.FC<Canvas3DProps> = forwardRef<
       children,
       defaultLightOff = false,
       nonInteractive = false,
+      cameraOptions,
       ...canvasProps
     },
     ref
@@ -167,15 +169,19 @@ export const Canvas3D: React.FC<Canvas3DProps> = forwardRef<
           </>
         )}
         {children}
-        {!nonInteractive && <CameraControls />}
+        {!nonInteractive && <CameraControls makeDefault {...cameraOptions} />}
       </Canvas>
     );
   }
 );
 
+export type Canvas3DRootState = Omit<RootState, "controls"> & {
+  controls: CameraControls;
+};
+
 type FiberStore = {
-  rootStates: Record<string, RootState | null>;
-  setRootState: (id: string, state: RootState) => void;
+  rootStates: Record<string, Canvas3DRootState | null>;
+  setRootState: (id: string, state: Canvas3DRootState) => void;
   clearRootState: (id: string) => void;
 };
 
@@ -207,6 +213,7 @@ const FiberBridge: React.FC<{ storeId?: string }> = ({ storeId }) => {
   const clearRootState = useFiberStore((s) => s.clearRootState);
 
   React.useEffect(() => {
+    // @ts-expect-error
     setRootState(id, state);
     return () => {
       clearRootState(id);