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

Sin comentarios

Browse Source
This commit is contained in:
Alejandro Rosales
2025-03-14 09:42:15 -06:00
parent 79cfdebff2
commit 22cd57c55c
1 changed files with 6 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/Previewer.tsx
View File

@@ -2,9 +2,9 @@
import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'; import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
import { Canvas } from "@react-three/fiber"; import { Canvas } from "@react-three/fiber";
import { useGLTF, useAnimations, Environment, Loader, OrbitControls, Html, Bounds } from "@react-three/drei"; import { useGLTF, useAnimations, Environment, Loader, OrbitControls, Bounds } from "@react-three/drei";
import { Suspense, useEffect, useRef, useState } from "react"; import { Suspense, useEffect, useRef, useState } from "react";
import { RotateCw, Play, Pause, Film, ListTree, Shrink, Expand } from "lucide-react"; import { RotateCw, Play, Pause, Film, Shrink, Expand } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Popover, Popover,
@@ -42,26 +42,14 @@ function Model({ url, onAnimationsLoaded, onNodesLoaded }: {
}, [actions, animations, onAnimationsLoaded, onNodesLoaded]); }, [actions, animations, onAnimationsLoaded, onNodesLoaded]);
return ( return (
<>
<Bounds fit margin={.9}> <Bounds fit margin={.9}>
{/* find the object in the perfect angle */} {/* find the object in the perfect angle */}
<primitive object={scene} /> <primitive object={scene} />
</Bounds> </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>
))} */}
</>
); );
} }
// Preload the model
// useGLTF.preload("/3d/motor_de_combustion/scene.gltf");
// Main 3D Viewer
export default function Previewer({ modelUrl }: { modelUrl: string }) { export default function Previewer({ modelUrl }: { modelUrl: string }) {
const controlsRef = useRef<OrbitControlsImpl>(null); const controlsRef = useRef<OrbitControlsImpl>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
@@ -77,13 +65,6 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) {
nodePositions; nodePositions;
/* const resetView = () => {
if (controlsRef.current) {
controlsRef.current.reset();
}
}; */
const playAnimation = (name: string) => { const playAnimation = (name: string) => {
if (actions[name]) { if (actions[name]) {
Object.values(actions).forEach(action => action.stop()); // Stop other animations Object.values(actions).forEach(action => action.stop()); // Stop other animations
@@ -116,7 +97,6 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) {
} }
}; };
return ( 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 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"> <div className="z-10 absolute top-4 w-100 flex wrap gap-5">
@@ -153,37 +133,8 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) {
</ScrollArea> </ScrollArea>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
{/* <Popover>
<PopoverTrigger className="flex items-center gap-2 bg-gradient-to-r from-blue-100 to-blue-50 text-blue-500 px-4 py-2 rounded-lg shadow-lg transition-all duration-300 hover:from-blue-100 hover:to-blue-200">
<ListTree />
Partes del modelo
</PopoverTrigger>
<PopoverContent className="p-4 bg-blue-50 text-white w-64">
<ScrollArea className="max-h-60">
<div className="flex flex-col gap-2">
{nodes.length > 0 ? (
nodes.map((node, index) => (
<div key={index} className="bg-blue-900/10 p-2 rounded-lg text-center text-blue-700">
{node}
</div>
))
) : (
<p className="text-blue-500 text-center">Este modelo no tiene partes.</p>
)}
</div>
</ScrollArea>
</PopoverContent>
</Popover> */}
</div> </div>
<div className="absolute bottom-4 right-4 z-10 flex gap-4"> <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 <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" 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("/")} onClick={() => navigate("/")}
@@ -191,8 +142,6 @@ export default function Previewer({ modelUrl }: { modelUrl: string }) {
<RotateCw className="w-5 h-5" /> <RotateCw className="w-5 h-5" />
Regresar al menú Regresar al menú
</Button> </Button>
{/* Botón de pantalla completa */}
<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" 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={toggleFullscreen} > onClick={toggleFullscreen} >