AlexRG/LayoutLaSalle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajuste de posición

Browse Source
This commit is contained in:
Alejandro Rosales
2025-03-13 16:10:00 -06:00
parent 6dce45e88e
commit a004fce1e2
1 changed files with 74 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/Previewer.tsx
View File

@@ -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 (
<>
<Bounds fit margin={.9}>
{/* find the object in the perfect angle */}
<primitive object={scene} />
</Bounds>
{/* {scene.children.map((node, index) => (
<Html key={index} position={[node.position.x, node.position.y + 0.5, node.position.z]}>
<div className="bg-blue-500 text-white px-2 py-1 rounded-md text-xs shadow-md">
{node.name}
</div>
</Html>
))} */}
</>
);
}
@@ -62,10 +71,19 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) {
const [_, setNodes] = useState<string[]>([]);
const [nodePositions, setNodePositions] = useState<Record<string, [number, number, number]>>({});
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 (
<div ref={containerRef} className="relative w-full grow bg-white/10 shadow-xl shadow-gray-300/25 rounded-lg p-6 backdrop-blur-lg h-100">
<div className="z-10 absolute top-4 w-100 flex wrap gap-5">
@@ -141,43 +177,50 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) {
</Popover> */}
</div>
<div className="absolute bottom-4 right-4 z-10 flex gap-4">
{/* <Button
className="bg-gradient-to-r from-red-600 to-red-800 w-40 text-white px-5 py-3 rounded-lg shadow-lg transition-all duration-300 hover:from-red-500 hover:to-red-700 active:scale-95 flex items-center gap-2 justify-center"
onClick={resetView}
>
<RotateCw className="w-5 h-5" />
Centrar cámara
</Button> */}
<Button
className="bg-gradient-to-r from-red-600 to-red-800 w-40 text-white px-5 py-3 rounded-lg shadow-lg transition-all duration-300 hover:from-red-500 hover:to-red-700 active:scale-95 flex items-center gap-2 justify-center"
onClick={() => navigate("/")}
>
<RotateCw className="w-5 h-5" />
Regresar al menú
</Button>
{/* Botón de pantalla completa */}
<Button
className="bg-gradient-to-r from-gray-700 to-gray-900 w-40 text-white px-5 py-3 rounded-lg shadow-lg transition-all duration-300 hover:from-gray-600 hover:to-gray-800 active:scale-95 flex items-center gap-2 justify-center"
onClick={() => store.enterAR()}>
<Expand className="w-5 h-5" />
Entrar en AR
</Button>
<Button
className="bg-gradient-to-r from-gray-700 to-gray-900 w-40 text-white px-5 py-3 rounded-lg shadow-lg transition-all duration-300 hover:from-gray-600 hover:to-gray-800 active:scale-95 flex items-center gap-2 justify-center"
onClick={() => store.enterVR()}>
<Expand className="w-5 h-5" />
Entrar en VR
onClick={toggleFullscreen} >
{isFullscreen ? <Shrink className="w-5 h-5" /> : <Expand className="w-5 h-5" />}
{isFullscreen ? "Salir" : "Pantalla Completa"}
</Button>
</div>
<div className="w-full h-full">
<Suspense fallback={<Loader />}>
<Canvas className="w-full h-full">
<XR store={store}>
<Environment preset="city" />
<OrbitControls ref={controlsRef} />
<Environment preset="city" />
<OrbitControls ref={controlsRef} minPolarAngle={Math.PI / 4} maxPolarAngle={Math.PI / 1.5} />
<Model
url={modelUrl}
<Model
url={modelUrl}
onAnimationsLoaded={(animNames, actionMap) => {
setAnimations(animNames);
setActions(actionMap);
}}
onNodesLoaded={(nodeList, nodePos) => {
setNodes(nodeList);
setNodePositions(nodePos);
}}
/>
</XR>
onAnimationsLoaded={(animNames, actionMap) => {
setAnimations(animNames);
setActions(actionMap);
}}
onNodesLoaded={(nodeList, nodePos) => {
setNodes(nodeList);
setNodePositions(nodePos);
}}
/>
</Canvas>
</Suspense>
</div>
</div >
</div>
);
}