Spaces:

KBLLR
/

character-selector

Running

App Files Files Community

KBLLR commited on Oct 1

Commit

bda8d6c

verified ·

1 Parent(s): 56abb95

can you load free models and environments from the threejs repo?

Browse files

Files changed (1) hide show

index.html +371 -132

index.html CHANGED Viewed

@@ -12,72 +12,177 @@
         body {
             margin: 0;
             overflow: hidden;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         #canvas {
             display: block;
         }
         .transition-all {
-            transition: all 0.3s ease;
         }
         .character-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         }
         .dialog-box {
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(5px);
         }
         .character-preview {
             width: 100%;
             height: 200px;
             background: rgba(255, 255, 255, 0.1);
-            border-radius: 0.5rem;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Welcome Screen -->
-    <div id="welcome-screen" class="fixed inset-0 flex items-center justify-center bg-gray-900 z-50 transition-all duration-500">
-        <div class="text-center max-w-2xl p-8 bg-gray-800 rounded-xl shadow-2xl">
-            <h1 class="text-5xl font-bold mb-6 bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">3D Character World</h1>
-            <p class="text-xl mb-8 text-gray-300">Explore a vibrant 3D world with interactive characters. Select your avatar and meet others along your journey!</p>
-            <button id="start-btn" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full text-white font-bold text-lg hover:from-purple-700 hover:to-blue-700 transition-all transform hover:scale-105 shadow-lg">
-                Begin Adventure
             </button>
         </div>
     </div>
     <!-- Character Selection Screen -->
-    <div id="character-selection" class="fixed inset-0 bg-gray-900 z-40 transition-all duration-500 opacity-0 pointer-events-none">
-        <div class="container mx-auto px-4 py-8 h-full flex flex-col">
-            <h2 class="text-3xl font-bold mb-8 text-center">Choose Your Character</h2>
-            <div class="flex-1 overflow-y-auto pb-24">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                     <!-- Character cards will be dynamically inserted here -->
                 </div>
             </div>
-            <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 py-4 px-4 z-50">
                 <div class="container mx-auto text-center">
-                    <button id="confirm-character" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
-                        Confirm Selection
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <!-- World Selection Screen -->
-    <div id="world-selection" class="fixed inset-0 bg-gray-900 z-30 transition-all duration-500 opacity-0 pointer-events-none">
-        <div class="container mx-auto px-4 py-8 h-full flex flex-col">
-            <h2 class="text-3xl font-bold mb-8 text-center">Select 5 Characters for Your World</h2>
-            <div class="flex-1 overflow-y-auto pb-24">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
                     <!-- World character cards will be dynamically inserted here -->
                 </div>
             </div>
-            <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 py-4 px-4 z-50">
                 <div class="container mx-auto text-center">
-                    <button id="start-world" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
-                        Generate World
                     </button>
                 </div>
             </div>
@@ -146,20 +251,18 @@
                 space: false
             }
         };
-        // Sample character data (in a real app, these would be fetched from Google Cloud)
         const characterData = [
-            { id: 1, name: "Warrior", modelUrl: "https://storage.googleapis.com/your-bucket-name/warrior.glb", color: "#EF4444", dialog: ["I fight for honor!", "The battlefield calls to me.", "Stay sharp!"] },
-            { id: 2, name: "Mage", modelUrl: "https://storage.googleapis.com/your-bucket-name/mage.glb", color: "#3B82F6", dialog: ["Magic flows through me.", "The arcane arts are limitless.", "Knowledge is power."] },
-            { id: 3, name: "Rogue", modelUrl: "https://storage.googleapis.com/your-bucket-name/rogue.glb", color: "#10B981", dialog: ["Shadows are my friends.", "Quick and quiet.", "Gold is always the answer."] },
-            { id: 4, name: "Archer", modelUrl: "https://storage.googleapis.com/your-bucket-name/archer.glb", color: "#F59E0B", dialog: ["My arrows never miss.", "The wind guides my shots.", "Aim true!"] },
-            { id: 5, name: "Cleric", modelUrl: "https://storage.googleapis.com/your-bucket-name/cleric.glb", color: "#8B5CF6", dialog: ["The light protects us.", "Healing is my calling.", "Have faith!"] },
-            { id: 6, name: "Bard", modelUrl: "https://storage.googleapis.com/your-bucket-name/bard.glb", color: "#EC4899", dialog: ["Let me sing you a tale!", "Music soothes the soul.", "Every story deserves a song."] },
-            { id: 7, name: "Monk", modelUrl: "https://storage.googleapis.com/your-bucket-name/monk.glb", color: "#6366F1", dialog: ["Inner peace is key.", "The body and mind are one.", "Discipline brings strength."] },
-            { id: 8, name: "Paladin", modelUrl: "https://storage.googleapis.com/your-bucket-name/paladin.glb", color: "#F97316", dialog: ["Justice will prevail!", "By my oath, I protect.", "Evil shall not pass."] }
         ];
-        // Three.js variables
         let scene, camera, renderer, controls;
         let mixer, clock, loader;
         let world;
@@ -290,7 +393,6 @@
                 container.appendChild(card);
             });
         }
         function initThreeJS() {
             // Set up Three.js scene
             scene = new THREE.Scene();
@@ -301,9 +403,15 @@
             camera.position.set(0, 5, 10);
             // Renderer
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
             // Clock for animations
             clock = new THREE.Clock();
@@ -312,14 +420,20 @@
             loader = new THREE.GLTFLoader();
             // Add lights
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(5, 10, 7);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.width = 2048;
             directionalLight.shadow.mapSize.height = 2048;
             scene.add(directionalLight);
             // Create ground
@@ -353,8 +467,7 @@
                 renderer.setSize(window.innerWidth, window.innerHeight);
             });
         }
-        function addEnvironmentObjects() {
             // Add some trees
             const treeGeometry = new THREE.ConeGeometry(1, 3, 8);
             const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x2e7d32 });
@@ -388,11 +501,64 @@
                 scene.add(rock);
             }
         }
         function loadPlayerCharacter() {
-            // In a real app, we would load the GLTF model from the URL
-            // For this example, we'll create a simple placeholder
             const group = new THREE.Group();
             // Body
@@ -446,9 +612,9 @@
             gameState.player = {
                 model: group,
-                speed: 0.1,
-                runSpeed: 0.2,
-                rotationSpeed: 0.05,
                 isMoving: false,
                 animations: {
                     idle: null,
@@ -461,51 +627,42 @@
             // Add a simple animation mixer for the player
             mixer = new THREE.AnimationMixer(group);
-            // Create simple animations
             createPlayerAnimations();
-            // Set initial animation
             setPlayerAnimation('idle');
         }
-        function createPlayerAnimations() {
             // In a real app, these would come from the GLTF model
-            // For this example, we'll create simple animations
             // Idle animation (slight bounce)
-            const idleTrack = new THREE.VectorKeyframeTrack(
-                '.position',
                 [0, 0.5, 1],
-                [
-                    0, 0, 0, // Start position
-                    0, 0.05, 0, // Up position
-                    0, 0, 0 // Back to start
-                ]
             );
             const idleClip = new THREE.AnimationClip('idle', 1, [idleTrack]);
             gameState.player.animations.idle = idleClip;
             // Walk animation (arm and leg movement)
-            const leftArmTrack = new THREE.VectorKeyframeTrack(
                 '.children[2].rotation[z]',
                 [0, 0.5, 1],
-                [0.5, -0.5, 0.5]
             );
-            const rightArmTrack = new THREE.VectorKeyframeTrack(
                 '.children[3].rotation[z]',
                 [0, 0.5, 1],
-                [-0.5, 0.5, -0.5]
             );
-            const leftLegTrack = new THREE.VectorKeyframeTrack(
                 '.children[4].position[y]',
                 [0, 0.5, 1],
-                [-0.4, -0.2, -0.4]
             );
-            const rightLegTrack = new THREE.VectorKeyframeTrack(
                 '.children[5].position[y]',
                 [0, 0.5, 1],
-                [-0.2, -0.4, -0.2]
             );
             const walkClip = new THREE.AnimationClip('walk', 0.5, [
                 leftArmTrack, rightArmTrack, leftLegTrack, rightLegTrack
@@ -519,15 +676,14 @@
             gameState.player.animations.run = runClip;
             // Jump animation
-            const jumpTrack = new THREE.VectorKeyframeTrack(
                 '.position[y]',
                 [0, 0.2, 0.4, 0.6, 0.8, 1],
-                [0, 2, 1.5, 0.5, 0, 0]
             );
             const jumpClip = new THREE.AnimationClip('jump', 1, [jumpTrack]);
             gameState.player.animations.jump = jumpClip;
         }
         function setPlayerAnimation(name) {
             if (gameState.player.currentAnimation === name) return;
@@ -538,14 +694,14 @@
                 if (clip) {
                     const action = mixer.clipAction(clip);
                     action.setLoop(THREE.LoopRepeat);
                     action.play();
                 }
                 gameState.player.currentAnimation = name;
             }
         }
-        function loadNPCCharacters() {
             gameState.selectedWorldCharacters.forEach((character, index) => {
                 // In a real app, we would load the GLTF model from the URL
                 // For this example, we'll create a simple placeholder
@@ -594,12 +750,9 @@
             });
         }
         function animate() {
-            if (!gameState.player) {
-                requestAnimationFrame(animate);
-                return;
-            }
-            const delta = clock.getDelta();
             // Update player animation mixer
             if (mixer) {
@@ -613,59 +766,105 @@
             checkForNearbyNPCs();
             renderer.render(scene, camera);
-            requestAnimationFrame(animate);
         }
-        function handlePlayerMovement(delta) {
             if (!gameState.player) return;
             const player = gameState.player;
             let moving = false;
             // Forward/backward movement
             if (gameState.keys.w) {
-                player.model.translateZ(-player.speed * (gameState.keys.shift ? player.runSpeed / player.speed : 1));
                 moving = true;
             }
             if (gameState.keys.s) {
-                player.model.translateZ(player.speed);
                 moving = true;
             }
             // Left/right movement
             if (gameState.keys.a) {
-                player.model.translateX(-player.speed);
                 moving = true;
             }
             if (gameState.keys.d) {
-                player.model.translateX(player.speed);
                 moving = true;
             }
-            // Rotation
             if (moving) {
-                // Calculate target rotation based on movement direction
-                const targetRotation = Math.atan2(
-                    (gameState.keys.a ? -1 : 0) + (gameState.keys.d ? 1 : 0),
-                    (gameState.keys.w ? -1 : 0) + (gameState.keys.s ? 1 : 0)
-                );
-                // Smoothly rotate towards target
-                player.model.rotation.y = THREE.MathUtils.lerp(
-                    player.model.rotation.y,
-                    targetRotation,
-                    player.rotationSpeed
-                );
             }
             // Jumping - only trigger when not showing dialog and not already jumping
-            if (gameState.keys.space && !gameState.isJumping && !document.getElementById('dialog-box').classList.contains('translate-y-full')) {
                 gameState.isJumping = true;
                 setPlayerAnimation('jump');
-                setTimeout(() => {
-                    gameState.isJumping = false;
-                    updatePlayerAnimation();
-                }, 1000);
             }
             // Update animation based on movement
@@ -674,10 +873,9 @@
                 updatePlayerAnimation();
             }
-            // Update camera position to follow player
-            const cameraOffset = new THREE.Vector3(0, 5, 10);
-            cameraOffset.applyQuaternion(player.model.quaternion);
-            camera.position.copy(player.model.position.clone().add(cameraOffset));
             camera.lookAt(player.model.position);
         }
 function updatePlayerAnimation() {
@@ -757,32 +955,73 @@ function showDialog(npc) {
                 existingPrompt.remove();
             }
         }
-function handleKeyDown(event) {
-            switch (event.key.toLowerCase()) {
-                case 'w': gameState.keys.w = true; break;
-                case 'a': gameState.keys.a = true; break;
-                case 's': gameState.keys.s = true; break;
-                case 'd': gameState.keys.d = true; break;
-                case 'shift': gameState.keys.shift = true; break;
                 case ' ':
                     gameState.keys.space = true;
-                    if (gameState.nearbyNpc && !gameState.isJumping) {
                         showDialog(gameState.nearbyNpc);
-                        event.preventDefault(); // Prevent default space behavior
                     }
                     break;
             }
         }
-function handleKeyUp(event) {
-            switch (event.key.toLowerCase()) {
-                case 'w': gameState.keys.w = false; break;
-                case 'a': gameState.keys.a = false; break;
-                case 's': gameState.keys.s = false; break;
-                case 'd': gameState.keys.d = false; break;
-                case 'shift': gameState.keys.shift = false; break;
-                case ' ': gameState.keys.space = false; break;
             }
         }
-    </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KBLLR/character-selector" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

         body {
             margin: 0;
             overflow: hidden;
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
         }
         #canvas {
             display: block;
         }
         .transition-all {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .character-card {
+            background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9));
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
         }
         .character-card:hover {
+            transform: translateY(-8px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+            border-color: rgba(139, 92, 246, 0.5);
         }
         .dialog-box {
+            background: rgba(15, 23, 42, 0.95);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
         }
         .character-preview {
             width: 100%;
             height: 200px;
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+            border-radius: 1rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .character-preview::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .character-card:hover .character-preview::before {
+            opacity: 1;
+        }
+        .glass-effect {
             background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .floating-animation {
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+        .pulse-glow {
+            animation: pulse-glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes pulse-glow {
+            from { box-shadow: 0 0 20px rgba(139, 92, 246, 0.4); }
+            to { box-shadow: 0 0 30px rgba(139, 92, 246, 0.8); }
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white">
     <!-- Welcome Screen -->
+    <div id="welcome-screen" class="fixed inset-0 flex items-center justify-center bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 z-50 transition-all duration-500">
+        <div class="absolute inset-0 overflow-hidden">
+            <div class="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-conic from-transparent via-purple-500/10 to-transparent animate-spin-slow"></div>
+            <div class="absolute -top-1/2 -right-1/2 w-full h-full bg-gradient-conic from-transparent via-blue-500/10 to-transparent animate-spin-slow" style="animation-delay: -3s;"></div>
+        </div>
+        <div class="text-center max-w-4xl p-12 glass-effect rounded-3xl shadow-2xl relative z-10 border border-white/10">
+            <div class="floating-animation mb-8">
+                <div class="w-32 h-32 mx-auto bg-gradient-to-r from-purple-500 to-blue-500 rounded-full flex items-center justify-center shadow-2xl">
+                    <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                </div>
+            </div>
+            <h1 class="text-6xl font-black mb-6 gradient-text tracking-tight">CharacterVerse</h1>
+            <p class="text-2xl mb-10 text-gray-200 leading-relaxed">Immerse yourself in an expansive 3D universe where every character has a story. Choose your avatar and embark on an unforgettable journey through dynamic worlds filled with interactive companions.</p>
+            <button id="start-btn" class="px-12 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl text-white font-bold text-xl hover:from-purple-700 hover:to-blue-700 transition-all transform hover:scale-110 shadow-2xl pulse-glow border border-white/20">
+                <span class="flex items-center justify-center space-x-3">
+                    <span>Begin Epic Journey</span>
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                    </svg>
+                </span>
             </button>
+            <div class="mt-8 flex justify-center space-x-6 text-sm text-gray-400">
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span>Real-time 3D Graphics</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+                    <span>Interactive Characters</span>
+                </div>
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
+                    <span>Dynamic Environments</span>
+                </div>
+            </div>
         </div>
     </div>
     <!-- Character Selection Screen -->
+    <div id="character-selection" class="fixed inset-0 bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 z-40 transition-all duration-500 opacity-0 pointer-events-none">
+        <div class="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
+        <div class="container mx-auto px-6 py-8 h-full flex flex-col relative z-10">
+            <div class="text-center mb-12">
+                <h2 class="text-5xl font-black mb-4 gradient-text">Choose Your Champion</h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">Select the perfect avatar that represents your journey. Each character comes with unique abilities and personality traits.</p>
+            </div>
+            <div class="flex-1 overflow-y-auto pb-32">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
                     <!-- Character cards will be dynamically inserted here -->
                 </div>
             </div>
+            <div class="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900/95 via-slate-900/80 to-transparent py-8 px-6 z-50 backdrop-blur-lg border-t border-white/10">
                 <div class="container mx-auto text-center">
+                    <button id="confirm-character" class="px-12 py-4 bg-gradient-to-r from-green-600 to-emerald-500 rounded-2xl text-white font-bold text-lg hover:from-green-700 hover:to-emerald-600 transition-all transform hover:scale-105 shadow-2xl border border-white/20 opacity-0 pulse-glow">
+                        <span class="flex items-center justify-center space-x-3">
+                            <span>Confirm Champion</span>
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                        </span>
                     </button>
                 </div>
             </div>
         </div>
     </div>
     <!-- World Selection Screen -->
+    <div id="world-selection" class="fixed inset-0 bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 z-30 transition-all duration-500 opacity-0 pointer-events-none">
+        <div class="absolute inset-0 bg-black/20 backdrop-blur-sm"></div>
+        <div class="container mx-auto px-6 py-8 h-full flex flex-col relative z-10">
+            <div class="text-center mb-12">
+                <h2 class="text-5xl font-black mb-4 gradient-text">Forge Your Universe</h2>
+                <p class="text-xl text-gray-300 max-w-2xl mx-auto">Select 5 unique characters to populate your world. Each will bring their own stories and interactions to your adventure.</p>
+                <div class="mt-4 inline-flex items-center space-x-4 bg-white/5 rounded-full px-6 py-3 border border-white/10">
+                    <span class="text-green-400 font-semibold" id="selected-count">0</span>
+                    <span class="text-gray-400">/</span>
+                    <span class="text-gray-300">5 Characters Selected</span>
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto pb-32">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-8 max-w-7xl mx-auto">
                     <!-- World character cards will be dynamically inserted here -->
                 </div>
             </div>
+            <div class="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-slate-900/95 via-slate-900/80 to-transparent py-8 px-6 z-50 backdrop-blur-lg border-t border-white/10">
                 <div class="container mx-auto text-center">
+                    <button id="start-world" class="px-12 py-4 bg-gradient-to-r from-purple-600 to-blue-600 rounded-2xl text-white font-bold text-lg hover:from-purple-700 hover:to-blue-700 transition-all transform hover:scale-105 shadow-2xl border border-white/20 opacity-0 pulse-glow">
+                        <span class="flex items-center justify-center space-x-3">
+                            <span>Generate Dynamic World</span>
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+                            </svg>
+                        </span>
                     </button>
                 </div>
             </div>
                 space: false
             }
         };
+        // Sample character data with free models from Three.js examples
         const characterData = [
+            { id: 1, name: "Robot", modelUrl: "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", color: "#EF4444", dialog: ["Beep boop! I am a robot.", "Processing your request...", "01010100 01101000 01110010 01100101 01100101"] },
+            { id: 2, name: "Fox", modelUrl: "https://threejs.org/examples/models/gltf/Fox/Fox.glb", color: "#3B82F6", dialog: ["What does the fox say?", "The forest is my home.", "Sly as a fox!"] },
+            { id: 3, name: "Parrot", modelUrl: "https://threejs.org/examples/models/gltf/Parrot.glb", color: "#10B981", dialog: ["Polly want a cracker?", "Squawk! Beautiful day!", "I can talk, can you fly?"] },
+            { id: 4, name: "Flamingo", modelUrl: "https://threejs.org/examples/models/gltf/Flamingo.glb", color: "#F59E0B", dialog: ["Standing on one leg is easy!", "Pink is the new black.", "Elegance is my middle name."] },
+            { id: 5, name: "Stork", modelUrl: "https://threejs.org/examples/models/gltf/Stork.glb", color: "#8B5CF6", dialog: ["I deliver special packages!", "Long flights are my specialty.", "Graceful in the sky."] },
+            { id: 6, name: "Damaged Helmet", modelUrl: "https://threejs.org/examples/models/gltf/DamagedHelmet/DamagedHelmet.glb", color: "#EC4899", dialog: ["I've seen many battles.", "This helmet tells a story.", "Ancient warrior's spirit."] },
+            { id: 7, name: "Cesium Man", modelUrl: "https://threejs.org/examples/models/gltf/CesiumMan/CesiumMan.glb", color: "#6366F1", dialog: ["I represent the future!", "Technology evolves rapidly.", "Digital consciousness rising."] },
+            { id: 8, name: "Flight Helmet", modelUrl: "https://threejs.org/examples/models/gltf/FlightHelmet/FlightHelmet.glb", color: "#F97316", dialog: ["Ready for takeoff!", "The sky is my domain.", "Pilot's best friend."] }
         ];
+// Three.js variables
         let scene, camera, renderer, controls;
         let mixer, clock, loader;
         let world;
                 container.appendChild(card);
             });
         }
         function initThreeJS() {
             // Set up Three.js scene
             scene = new THREE.Scene();
             camera.position.set(0, 5, 10);
             // Renderer
+            const canvas = document.getElementById('canvas');
+            renderer = new THREE.WebGLRenderer({
+                canvas: canvas,
+                antialias: true,
+                alpha: true
+            });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             // Clock for animations
             clock = new THREE.Clock();
             loader = new THREE.GLTFLoader();
             // Add lights
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(10, 20, 15);
             directionalLight.castShadow = true;
             directionalLight.shadow.mapSize.width = 2048;
             directionalLight.shadow.mapSize.height = 2048;
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 50;
+            directionalLight.shadow.camera.left = -20;
+            directionalLight.shadow.camera.right = 20;
+            directionalLight.shadow.camera.top = 20;
+            directionalLight.shadow.camera.bottom = -20;
             scene.add(directionalLight);
             // Create ground
                 renderer.setSize(window.innerWidth, window.innerHeight);
             });
         }
+function addEnvironmentObjects() {
             // Add some trees
             const treeGeometry = new THREE.ConeGeometry(1, 3, 8);
             const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x2e7d32 });
                 scene.add(rock);
             }
         }
         function loadPlayerCharacter() {
+            loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
+                const model = gltf.scene;
+                // Scale and position the model
+                model.scale.set(1, 1, 1);
+                model.position.set(0, 0, 0);
+                // Enable shadows for all children
+                model.traverse((child) => {
+                    if (child.isMesh) {
+                        child.castShadow = true;
+                        child.receiveShadow = true;
+                    }
+                });
+                scene.add(model);
+                // Set up animations if available
+                const mixer = new THREE.AnimationMixer(model);
+                const animations = gltf.animations;
+                gameState.player = {
+                    model: model,
+                    speed: 0.08,
+                    runSpeed: 0.15,
+                    rotationSpeed: 0.08,
+                    isMoving: false,
+                    mixer: mixer,
+                    animations: animations,
+                    currentAnimation: null,
+                    animationActions: {}
+                };
+                // Set up animation actions
+                if (animations && animations.length > 0) {
+                    animations.forEach((clip) => {
+                        gameState.player.animationActions[clip.name] = mixer.clipAction(clip);
+                    });
+                    // Play the first animation by default
+                    if (animations[0]) {
+                        gameState.player.animationActions[animations[0].name].play();
+                        gameState.player.currentAnimation = animations[0].name;
+                    }
+                } else {
+                    // If no animations, create simple placeholder animations
+                    createPlayerAnimations();
+                }
+            }, undefined, (error) => {
+                console.error('Error loading player model:', error);
+                // Fallback to placeholder
+                loadPlayerCharacterFallback();
+            });
+        }
+        function loadPlayerCharacterFallback() {
             const group = new THREE.Group();
             // Body
             gameState.player = {
                 model: group,
+                speed: 0.08,
+                runSpeed: 0.15,
+                rotationSpeed: 0.08,
                 isMoving: false,
                 animations: {
                     idle: null,
             // Add a simple animation mixer for the player
             mixer = new THREE.AnimationMixer(group);
             createPlayerAnimations();
             setPlayerAnimation('idle');
         }
+function createPlayerAnimations() {
             // In a real app, these would come from the GLTF model
+            // For this example, we'll create simple animations using NumberKeyframeTrack
             // Idle animation (slight bounce)
+            const idleTrack = new THREE.NumberKeyframeTrack(
+                '.position[y]',
                 [0, 0.5, 1],
+                [0, 0.1, 0]
             );
             const idleClip = new THREE.AnimationClip('idle', 1, [idleTrack]);
             gameState.player.animations.idle = idleClip;
             // Walk animation (arm and leg movement)
+            const leftArmTrack = new THREE.NumberKeyframeTrack(
                 '.children[2].rotation[z]',
                 [0, 0.5, 1],
+                [0.3, -0.3, 0.3]
             );
+            const rightArmTrack = new THREE.NumberKeyframeTrack(
                 '.children[3].rotation[z]',
                 [0, 0.5, 1],
+                [-0.3, 0.3, -0.3]
             );
+            const leftLegTrack = new THREE.NumberKeyframeTrack(
                 '.children[4].position[y]',
                 [0, 0.5, 1],
+                [-0.4, -0.3, -0.4]
             );
+            const rightLegTrack = new THREE.NumberKeyframeTrack(
                 '.children[5].position[y]',
                 [0, 0.5, 1],
+                [-0.3, -0.4, -0.3]
             );
             const walkClip = new THREE.AnimationClip('walk', 0.5, [
                 leftArmTrack, rightArmTrack, leftLegTrack, rightLegTrack
             gameState.player.animations.run = runClip;
             // Jump animation
+            const jumpTrack = new THREE.NumberKeyframeTrack(
                 '.position[y]',
                 [0, 0.2, 0.4, 0.6, 0.8, 1],
+                [0, 1.5, 1, 0.3, 0, 0]
             );
             const jumpClip = new THREE.AnimationClip('jump', 1, [jumpTrack]);
             gameState.player.animations.jump = jumpClip;
         }
         function setPlayerAnimation(name) {
             if (gameState.player.currentAnimation === name) return;
                 if (clip) {
                     const action = mixer.clipAction(clip);
                     action.setLoop(THREE.LoopRepeat);
+                    action.clampWhenFinished = false;
                     action.play();
                 }
                 gameState.player.currentAnimation = name;
             }
         }
+function loadNPCCharacters() {
             gameState.selectedWorldCharacters.forEach((character, index) => {
                 // In a real app, we would load the GLTF model from the URL
                 // For this example, we'll create a simple placeholder
             });
         }
         function animate() {
+            requestAnimationFrame(animate);
+            const delta = Math.min(clock.getDelta(), 0.1); // Cap delta to prevent large jumps
             // Update player animation mixer
             if (mixer) {
             checkForNearbyNPCs();
             renderer.render(scene, camera);
         }
+function handlePlayerMovement(delta) {
             if (!gameState.player) return;
             const player = gameState.player;
             let moving = false;
+            let moveDirection = new THREE.Vector3();
+            // Check if dialog is open - disable movement if dialog is active
+            const isDialogOpen = !document.getElementById('dialog-box').classList.contains('translate-y-full');
+            if (isDialogOpen) {
+                // Stop any movement and reset animation
+                if (player.isMoving) {
+                    player.isMoving = false;
+                    updatePlayerAnimation();
+                }
+                return;
+            }
             // Forward/backward movement
             if (gameState.keys.w) {
+                moveDirection.z = -1;
                 moving = true;
             }
             if (gameState.keys.s) {
+                moveDirection.z = 1;
                 moving = true;
             }
             // Left/right movement
             if (gameState.keys.a) {
+                moveDirection.x = -1;
                 moving = true;
             }
             if (gameState.keys.d) {
+                moveDirection.x = 1;
                 moving = true;
             }
+            // Normalize direction vector if moving diagonally
             if (moving) {
+                moveDirection.normalize();
+                // Calculate speed with delta time for consistent movement
+                const speed = (gameState.keys.shift ? player.runSpeed : player.speed) * delta * 60;
+                // Apply movement relative to camera direction
+                const cameraForward = new THREE.Vector3();
+                camera.getWorldDirection(cameraForward);
+                cameraForward.y = 0;
+                cameraForward.normalize();
+                const cameraRight = new THREE.Vector3();
+                cameraRight.crossVectors(cameraForward, new THREE.Vector3(0, 1, 0));
+                cameraRight.normalize();
+                const moveVector = new THREE.Vector3();
+                moveVector.addScaledVector(cameraForward, moveDirection.z * speed);
+                moveVector.addScaledVector(cameraRight, moveDirection.x * speed);
+                player.model.position.add(moveVector);
+                // Update player rotation to face movement direction
+                if (moveDirection.length() > 0.1) {
+                    const targetRotation = Math.atan2(moveDirection.x, moveDirection.z) + camera.rotation.y;
+                    player.model.rotation.y = THREE.MathUtils.lerp(player.model.rotation.y, targetRotation, player.rotationSpeed * delta * 60);
+                }
             }
             // Jumping - only trigger when not showing dialog and not already jumping
+            if (gameState.keys.space && !gameState.isJumping && !isDialogOpen) {
                 gameState.isJumping = true;
                 setPlayerAnimation('jump');
+                // Create a more robust jump animation
+                let jumpStartTime = performance.now();
+                const jumpDuration = 1000; // 1 second
+                const originalY = player.model.position.y;
+                const jumpHeight = 1.5;
+                function performJump() {
+                    const currentTime = performance.now();
+                    const elapsed = currentTime - jumpStartTime;
+                    const progress = Math.min(elapsed / jumpDuration, 1);
+                    // Parabolic jump curve
+                    const jumpProgress = 1 - Math.pow(2 * progress - 1, 2);
+                    player.model.position.y = originalY + jumpHeight * jumpProgress;
+                    if (progress < 1) {
+                        requestAnimationFrame(performJump);
+                    } else {
+                        gameState.isJumping = false;
+                        player.model.position.y = originalY;
+                        updatePlayerAnimation();
+                    }
+                }
+                performJump();
             }
             // Update animation based on movement
                 updatePlayerAnimation();
             }
+            // Update camera position to follow player with smooth interpolation
+            const targetCameraPosition = player.model.position.clone().add(new THREE.Vector3(0, 5, 10));
+            camera.position.lerp(targetCameraPosition, 0.1 * delta * 60);
             camera.lookAt(player.model.position);
         }
 function updatePlayerAnimation() {
                 existingPrompt.remove();
             }
         }
+        function handleKeyDown(event) {
+            // Prevent default for space to avoid page scrolling
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+            // Ignore key repeats
+            if (event.repeat) return;
+            const key = event.key.toLowerCase();
+            switch (key) {
+                case 'w':
+                    gameState.keys.w = true;
+                    break;
+                case 'a':
+                    gameState.keys.a = true;
+                    break;
+                case 's':
+                    gameState.keys.s = true;
+                    break;
+                case 'd':
+                    gameState.keys.d = true;
+                    break;
+                case 'shift':
+                    gameState.keys.shift = true;
+                    break;
                 case ' ':
                     gameState.keys.space = true;
+                    // Check if we're near an NPC and dialog isn't already open
+                    const isDialogOpen = !document.getElementById('dialog-box').classList.contains('translate-y-full');
+                    if (gameState.nearbyNpc && !gameState.isJumping && !isDialogOpen) {
                         showDialog(gameState.nearbyNpc);
                     }
                     break;
             }
         }
+        function handleKeyUp(event) {
+            // Ignore key repeats
+            if (event.repeat) return;
+            const key = event.key.toLowerCase();
+            switch (key) {
+                case 'w':
+                    gameState.keys.w = false;
+                    break;
+                case 'a':
+                    gameState.keys.a = false;
+                    break;
+                case 's':
+                    gameState.keys.s = false;
+                    break;
+                case 'd':
+                    gameState.keys.d = false;
+                    break;
+                case 'shift':
+                    gameState.keys.shift = false;
+                    break;
+                case ' ':
+                    gameState.keys.space = false;
+                    break;
+            }
+            // Update animation when keys are released
+            if (gameState.player) {
+                updatePlayerAnimation();
             }
         }
+</script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KBLLR/character-selector" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>