diff --git a/src/pages/Previewer.tsx b/src/pages/Previewer.tsx index 75b0dfc..8a3562d 100644 --- a/src/pages/Previewer.tsx +++ b/src/pages/Previewer.tsx @@ -2,19 +2,19 @@ import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'; import { Canvas } from "@react-three/fiber"; -import { useGLTF, useAnimations, Environment, Loader, OrbitControls, Bounds } from "@react-three/drei"; +import { useGLTF, useAnimations, Environment, Loader, OrbitControls, Html, Bounds } from "@react-three/drei"; import { Suspense, useEffect, useRef, useState } from "react"; -import { Play, Pause, Film, Expand, } from "lucide-react"; +import { RotateCw, Play, Pause, Film, ListTree, Shrink, Expand } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { createXRStore, XR, XRControllerModel, XRHandModel } from "@react-three/xr"; -import { ScrollArea } from "@/components/ui/scroll-area"; -const store = createXRStore(); +import { ScrollArea } from "@/components/ui/scroll-area"; +import { useNavigate } from 'react-router'; + // Model component function Model({ url, onAnimationsLoaded, onNodesLoaded }: { @@ -44,8 +44,17 @@ function Model({ url, onAnimationsLoaded, onNodesLoaded }: { return ( <> + {/* find the object in the perfect angle */} + + {/* {scene.children.map((node, index) => ( + +
+ {node.name} +
+ + ))} */} ); } @@ -62,10 +71,19 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) { const [_, setNodes] = useState([]); const [nodePositions, setNodePositions] = useState>({}); + const [isFullscreen, setIsFullscreen] = useState(false); + + const navigate = useNavigate(); nodePositions; +/* const resetView = () => { + if (controlsRef.current) { + controlsRef.current.reset(); + } + }; */ + const playAnimation = (name: string) => { if (actions[name]) { Object.values(actions).forEach(action => action.stop()); // Stop other animations @@ -81,6 +99,24 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) { } }; + // Handle Fullscreen Mode + const toggleFullscreen = () => { + if (!document.fullscreenElement) { + containerRef.current?.requestFullscreen().then(() => { + setIsFullscreen(true); + }).catch(err => { + console.error("Error entering fullscreen:", err); + }); + } else { + document.exitFullscreen().then(() => { + setIsFullscreen(false); + }).catch(err => { + console.error("Error exiting fullscreen:", err); + }); + } + }; + + return (
@@ -141,43 +177,50 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) { */}
+ {/* */} + + {/* Botón de pantalla completa */} -
}> - - - + + + { - setAnimations(animNames); - setActions(actionMap); - }} - onNodesLoaded={(nodeList, nodePos) => { - setNodes(nodeList); - setNodePositions(nodePos); - }} - /> - - + onAnimationsLoaded={(animNames, actionMap) => { + setAnimations(animNames); + setActions(actionMap); + }} + onNodesLoaded={(nodeList, nodePos) => { + setNodes(nodeList); + setNodePositions(nodePos); + }} + />
-
+ + ); }