diff --git a/src/app/page.tsx b/src/app/page.tsx index ba934bd..c9b55f0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -25,100 +25,8 @@ import { HelpCircle, ArrowRight, } from "lucide-react"; -import { useEffect, useRef } from "react"; export default function LandingPage() { - const containerRef = useRef(null); - - useEffect(() => { - // Load Three.js and create 3D ambulance model - const loadThreeScene = async () => { - const { default: THREE } = await import("three"); - const { GLTFLoader } = await import("three/examples/jsm/loaders/GLTFLoader.js"); - const { OrbitControls } = await import("three/examples/jsm/controls/OrbitControls.js"); - - if (!containerRef.current) return; - - // Scene setup - const scene = new THREE.Scene(); - scene.background = new THREE.Color(0xf7f6f7); - - const camera = new THREE.PerspectiveCamera( - 75, - containerRef.current.clientWidth / containerRef.current.clientHeight, - 0.1, - 1000 - ); - camera.position.set(0, 2, 5); - - const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); - renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight); - renderer.setPixelRatio(window.devicePixelRatio); - containerRef.current.appendChild(renderer.domElement); - - // Lighting - const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); - scene.add(ambientLight); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); - directionalLight.position.set(5, 10, 7); - scene.add(directionalLight); - - // Load 3D ambulance model - const loader = new GLTFLoader(); - loader.load( - "https://cdn.jsdelivr.net/npm/three@r128/examples/models/gltf/Xbot.glb", (gltf) => { - const model = gltf.scene; - model.scale.set(2, 2, 2); - scene.add(model); - - // Optional: Add animation - const mixer = new THREE.AnimationMixer(model); - if (gltf.animations.length > 0) { - mixer.clipAction(gltf.animations[0]).play(); - } - }, - undefined, - (error) => { - console.error("Error loading 3D model:", error); - } - ); - - // Orbit controls for interaction - const controls = new OrbitControls(camera, renderer.domElement); - controls.enableDamping = true; - controls.dampingFactor = 0.05; - controls.autoRotate = true; - controls.autoRotateSpeed = 2; - - // Animation loop - const animate = () => { - requestAnimationFrame(animate); - controls.update(); - renderer.render(scene, camera); - }; - animate(); - - // Handle window resize - const handleResize = () => { - if (!containerRef.current) return; - const width = containerRef.current.clientWidth; - const height = containerRef.current.clientHeight; - camera.aspect = width / height; - camera.updateProjectionMatrix(); - renderer.setSize(width, height); - }; - - window.addEventListener("resize", handleResize); - return () => { - window.removeEventListener("resize", handleResize); - containerRef.current?.removeChild(renderer.domElement); - }; - }; - - loadThreeScene().catch(console.error); - }, []); - return (
-
-
- -
-
-
+