Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Character World</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script> | |
| <style> | |
| 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 flex items-center justify-center bg-gray-900 z-40 transition-all duration-500 opacity-0 pointer-events-none"> | |
| <div class="w-full max-w-6xl p-6"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Choose Your Character</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <!-- Character cards will be dynamically inserted here --> | |
| </div> | |
| <div class="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> | |
| <!-- World Selection Screen --> | |
| <div id="world-selection" class="fixed inset-0 flex items-center justify-center bg-gray-900 z-30 transition-all duration-500 opacity-0 pointer-events-none"> | |
| <div class="w-full max-w-6xl p-6"> | |
| <h2 class="text-3xl font-bold mb-8 text-center">Select 5 Characters for Your World</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8"> | |
| <!-- World character cards will be dynamically inserted here --> | |
| </div> | |
| <div class="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> | |
| </div> | |
| <!-- Game UI --> | |
| <div id="game-ui" class="fixed inset-0 pointer-events-none z-20 opacity-0 transition-all"> | |
| <div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span>WASD: Move</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500"></div> | |
| <span>Space: Jump</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-purple-500"></div> | |
| <span>Shift: Run</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <span>Near NPC: Talk (Space)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dialog Box --> | |
| <div id="dialog-box" class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-90 p-6 rounded-t-2xl transform translate-y-full transition-all duration-300 z-50 max-w-4xl mx-auto"> | |
| <div class="flex items-start space-x-4"> | |
| <div id="dialog-character" class="w-16 h-16 rounded-full bg-gray-700 flex-shrink-0"></div> | |
| <div class="flex-1"> | |
| <h3 id="dialog-name" class="text-xl font-bold mb-2">Character Name</h3> | |
| <p id="dialog-text" class="text-gray-300">Hello there! This is a sample dialog text that will be replaced with actual dialog content.</p> | |
| </div> | |
| </div> | |
| <button id="close-dialog" class="absolute top-4 right-4 text-gray-400 hover:text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Canvas for Three.js --> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| // Game state | |
| const gameState = { | |
| currentScreen: 'welcome', | |
| selectedCharacter: null, | |
| selectedWorldCharacters: [], | |
| characters: [], | |
| worldCharacters: [], | |
| player: null, | |
| npcs: [], | |
| nearbyNpc: null, | |
| isRunning: false, | |
| isJumping: false, | |
| keys: { | |
| w: false, | |
| a: false, | |
| s: false, | |
| d: false, | |
| shift: false, | |
| 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; | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Set up UI event listeners | |
| document.getElementById('start-btn').addEventListener('click', showCharacterSelection); | |
| document.getElementById('confirm-character').addEventListener('click', showWorldSelection); | |
| document.getElementById('start-world').addEventListener('click', startGame); | |
| document.getElementById('close-dialog').addEventListener('click', closeDialog); | |
| // Keyboard event listeners | |
| window.addEventListener('keydown', handleKeyDown); | |
| window.addEventListener('keyup', handleKeyUp); | |
| // Populate character selection | |
| populateCharacterSelection(); | |
| }); | |
| function showCharacterSelection() { | |
| document.getElementById('welcome-screen').classList.add('opacity-0', 'pointer-events-none'); | |
| document.getElementById('character-selection').classList.remove('opacity-0', 'pointer-events-none'); | |
| } | |
| function showWorldSelection() { | |
| if (!gameState.selectedCharacter) return; | |
| document.getElementById('character-selection').classList.add('opacity-0', 'pointer-events-none'); | |
| document.getElementById('world-selection').classList.remove('opacity-0', 'pointer-events-none'); | |
| // Filter out the selected character from world selection | |
| const availableCharacters = characterData.filter(char => char.id !== gameState.selectedCharacter.id); | |
| populateWorldSelection(availableCharacters); | |
| } | |
| function startGame() { | |
| if (gameState.selectedWorldCharacters.length < 5) { | |
| alert('Please select 5 characters for your world!'); | |
| return; | |
| } | |
| document.getElementById('world-selection').classList.add('opacity-0', 'pointer-events-none'); | |
| document.getElementById('game-ui').classList.remove('opacity-0'); | |
| // Initialize Three.js world | |
| initThreeJS(); | |
| } | |
| function populateCharacterSelection() { | |
| const container = document.querySelector('#character-selection .grid'); | |
| container.innerHTML = ''; | |
| characterData.forEach(character => { | |
| const card = document.createElement('div'); | |
| card.className = 'character-card bg-gray-800 rounded-xl p-4 cursor-pointer transition-all shadow-lg'; | |
| card.innerHTML = ` | |
| <div class="character-preview mb-4 flex items-center justify-center"> | |
| <div class="w-24 h-24 rounded-full" style="background-color: ${character.color};"></div> | |
| </div> | |
| <h3 class="text-xl font-bold text-center mb-2">${character.name}</h3> | |
| <p class="text-gray-400 text-center">Click to select</p> | |
| `; | |
| card.addEventListener('click', () => { | |
| // Deselect all cards | |
| document.querySelectorAll('.character-card').forEach(c => { | |
| c.classList.remove('ring-2', 'ring-purple-500'); | |
| }); | |
| // Select this card | |
| card.classList.add('ring-2', 'ring-purple-500'); | |
| // Update selected character | |
| gameState.selectedCharacter = character; | |
| // Show confirm button | |
| document.getElementById('confirm-character').classList.remove('opacity-0'); | |
| }); | |
| container.appendChild(card); | |
| }); | |
| } | |
| function populateWorldSelection(characters) { | |
| const container = document.querySelector('#world-selection .grid'); | |
| container.innerHTML = ''; | |
| characters.forEach(character => { | |
| const card = document.createElement('div'); | |
| card.className = `character-card bg-gray-800 rounded-xl p-4 cursor-pointer transition-all shadow-lg ${ | |
| gameState.selectedWorldCharacters.some(c => c.id === character.id) ? 'ring-2 ring-green-500' : '' | |
| }`; | |
| card.innerHTML = ` | |
| <div class="character-preview mb-4 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full" style="background-color: ${character.color};"></div> | |
| </div> | |
| <h3 class="text-lg font-bold text-center mb-2">${character.name}</h3> | |
| <p class="text-gray-400 text-sm text-center">Click to ${gameState.selectedWorldCharacters.some(c => c.id === character.id) ? 'deselect' : 'select'}</p> | |
| `; | |
| card.addEventListener('click', () => { | |
| // Check if character is already selected | |
| const index = gameState.selectedWorldCharacters.findIndex(c => c.id === character.id); | |
| if (index !== -1) { | |
| // Deselect | |
| gameState.selectedWorldCharacters.splice(index, 1); | |
| card.classList.remove('ring-2', 'ring-green-500'); | |
| card.querySelector('p').textContent = 'Click to select'; | |
| } else { | |
| // Select if we have less than 5 | |
| if (gameState.selectedWorldCharacters.length < 5) { | |
| gameState.selectedWorldCharacters.push(character); | |
| card.classList.add('ring-2', 'ring-green-500'); | |
| card.querySelector('p').textContent = 'Click to deselect'; | |
| } | |
| } | |
| // Update start world button | |
| if (gameState.selectedWorldCharacters.length === 5) { | |
| document.getElementById('start-world').classList.remove('opacity-0'); | |
| } else { | |
| document.getElementById('start-world').classList.add('opacity-0'); | |
| } | |
| }); | |
| container.appendChild(card); | |
| }); | |
| } | |
| function initThreeJS() { | |
| // Set up Three.js scene | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0x87CEEB); // Sky blue | |
| // Camera | |
| camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| 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(); | |
| // Loader | |
| 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 | |
| const groundGeometry = new THREE.PlaneGeometry(100, 100); | |
| const groundMaterial = new THREE.MeshStandardMaterial({ | |
| color: 0x4ade80, | |
| roughness: 0.8, | |
| metalness: 0.2 | |
| }); | |
| const ground = new THREE.Mesh(groundGeometry, groundMaterial); | |
| ground.rotation.x = -Math.PI / 2; | |
| ground.receiveShadow = true; | |
| scene.add(ground); | |
| // Add some environment objects | |
| addEnvironmentObjects(); | |
| // Load player character | |
| loadPlayerCharacter(); | |
| // Load NPC characters | |
| loadNPCCharacters(); | |
| // Start animation loop | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| 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 }); | |
| for (let i = 0; i < 20; i++) { | |
| const tree = new THREE.Mesh(treeGeometry, treeMaterial); | |
| tree.position.x = (Math.random() - 0.5) * 80; | |
| tree.position.z = (Math.random() - 0.5) * 80; | |
| tree.position.y = 1.5; | |
| tree.castShadow = true; | |
| scene.add(tree); | |
| // Add trunk | |
| const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.3, 1); | |
| const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x5e4035 }); | |
| const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); | |
| trunk.position.y = 0.5; | |
| tree.add(trunk); | |
| } | |
| // Add some rocks | |
| const rockGeometry = new THREE.SphereGeometry(0.5, 8, 8); | |
| const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x757575 }); | |
| for (let i = 0; i < 15; i++) { | |
| const rock = new THREE.Mesh(rockGeometry, rockMaterial); | |
| rock.position.x = (Math.random() - 0.5) * 80; | |
| rock.position.z = (Math.random() - 0.5) * 80; | |
| rock.position.y = 0.5; | |
| rock.castShadow = true; | |
| 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 | |
| const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 8); | |
| const bodyMaterial = new THREE.MeshStandardMaterial({ | |
| color: new THREE.Color(gameState.selectedCharacter.color), | |
| roughness: 0.7, | |
| metalness: 0.1 | |
| }); | |
| const body = new THREE.Mesh(bodyGeometry, bodyMaterial); | |
| body.position.y = 0.75; | |
| body.castShadow = true; | |
| group.add(body); | |
| // Head | |
| const headGeometry = new THREE.SphereGeometry(0.4, 8, 8); | |
| const headMaterial = new THREE.MeshStandardMaterial({ color: 0xf5d0b5 }); | |
| const head = new THREE.Mesh(headGeometry, headMaterial); | |
| head.position.y = 1.6; | |
| head.castShadow = true; | |
| group.add(head); | |
| // Arms | |
| const armGeometry = new THREE.CylinderGeometry(0.15, 0.15, 0.8, 6); | |
| const leftArm = new THREE.Mesh(armGeometry, bodyMaterial); | |
| leftArm.position.set(-0.6, 1, 0); | |
| leftArm.rotation.z = 0.5; | |
| leftArm.castShadow = true; | |
| group.add(leftArm); | |
| const rightArm = new THREE.Mesh(armGeometry, bodyMaterial); | |
| rightArm.position.set(0.6, 1, 0); | |
| rightArm.rotation.z = -0.5; | |
| rightArm.castShadow = true; | |
| group.add(rightArm); | |
| // Legs | |
| const legGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.8, 6); | |
| const leftLeg = new THREE.Mesh(legGeometry, new THREE.MeshStandardMaterial({ color: 0x1e40af })); | |
| leftLeg.position.set(-0.2, -0.4, 0); | |
| leftLeg.castShadow = true; | |
| group.add(leftLeg); | |
| const rightLeg = new THREE.Mesh(legGeometry, new THREE.MeshStandardMaterial({ color: 0x1e40af })); | |
| rightLeg.position.set(0.2, -0.4, 0); | |
| rightLeg.castShadow = true; | |
| group.add(rightLeg); | |
| group.position.y = 0; | |
| scene.add(group); | |
| gameState.player = { | |
| model: group, | |
| speed: 0.1, | |
| runSpeed: 0.2, | |
| rotationSpeed: 0.05, | |
| isMoving: false, | |
| animations: { | |
| idle: null, | |
| walk: null, | |
| run: null, | |
| jump: null | |
| }, | |
| currentAnimation: null | |
| }; | |
| // 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 | |
| ]); | |
| gameState.player.animations.walk = walkClip; | |
| // Run animation (faster arm and leg movement) | |
| const runClip = new THREE.AnimationClip('run', 0.3, [ | |
| leftArmTrack, rightArmTrack, leftLegTrack, rightLegTrack | |
| ]); | |
| 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; | |
| if (mixer) { | |
| mixer.stopAllAction(); | |
| const clip = gameState.player.animations[name]; | |
| 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 | |
| const group = new THREE.Group(); | |
| // Body | |
| const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 8); | |
| const bodyMaterial = new THREE.MeshStandardMaterial({ | |
| color: new THREE.Color(character.color), | |
| roughness: 0.7, | |
| metalness: 0.1 | |
| }); | |
| const body = new THREE.Mesh(bodyGeometry, bodyMaterial); | |
| body.position.y = 0.75; | |
| body.castShadow = true; | |
| group.add(body); | |
| // Head | |
| const headGeometry = new THREE.SphereGeometry(0.4, 8, 8); | |
| const headMaterial = new THREE.MeshStandardMaterial({ color: 0xf5d0b5 }); | |
| const head = new THREE.Mesh(headGeometry, headMaterial); | |
| head.position.y = 1.6; | |
| head.castShadow = true; | |
| group.add(head); | |
| // Position NPCs in a circle around the center | |
| const angle = (index / gameState.selectedWorldCharacters.length) * Math.PI * 2; | |
| const radius = 10 + Math.random() * 10; | |
| group.position.x = Math.cos(angle) * radius; | |
| group.position.z = Math.sin(angle) * radius; | |
| group.position.y = 0; | |
| // Make NPC face center | |
| group.lookAt(0, 0, 0); | |
| scene.add(group); | |
| gameState.npcs.push({ | |
| model: group, | |
| character: character, | |
| dialog: character.dialog, | |
| currentDialogIndex: 0 | |
| }); | |
| }); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| const delta = clock.getDelta(); | |
| // Update player animation mixer | |
| if (mixer) { | |
| mixer.update(delta); | |
| } | |
| // Handle player movement | |
| handlePlayerMovement(delta); | |
| // Check for nearby NPCs | |
| checkForNearbyNPCs(); | |
| renderer.render(scene, camera); | |
| } | |
| 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 | |
| if (gameState.keys.space && !gameState.isJumping) { | |
| gameState.isJumping = true; | |
| setPlayerAnimation('jump'); | |
| setTimeout(() => { | |
| gameState.isJumping = false; | |
| updatePlayerAnimation(); | |
| }, 1000); | |
| // Check if we're near an NPC to talk | |
| if (gameState.nearbyNpc) { | |
| showDialog(gameState.nearbyNpc); | |
| } | |
| } | |
| // Update animation based on movement | |
| if (moving !== player.isMoving || gameState.keys.shift) { | |
| player.isMoving = moving; | |
| 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() { | |
| if (gameState.isJumping) return; | |
| if (!gameState.player.isMoving) { | |
| setPlayerAnimation('idle'); | |
| } else if (gameState.keys.shift) { | |
| setPlayerAnimation('run'); | |
| } else { | |
| setPlayerAnimation('walk'); | |
| } | |
| } | |
| function checkForNearbyNPCs() { | |
| if (!gameState.player) return; | |
| let closestNpc = null; | |
| let closestDistance = Infinity; | |
| gameState.npcs.forEach(npc => { | |
| const distance = npc.model.position.distanceTo(gameState.player.model.position); | |
| if (distance < 5 && distance < closestDistance) { | |
| closestDistance = distance; | |
| closestNpc = npc; | |
| } | |
| }); | |
| gameState.nearbyNpc = closestNpc; | |
| } | |
| function showDialog(npc) { | |
| if (!npc) return; | |
| // Get next dialog line | |
| const dialog = npc.dialog[npc.currentDialogIndex]; | |
| npc.currentDialogIndex = (npc.currentDialogIndex + 1) % npc.dialog.length; | |
| // Update dialog UI | |
| document.getElementById('dialog-character').style.backgroundColor = npc.character.color; | |
| document.getElementById('dialog-name').textContent = npc.character.name; | |
| document.getElementById('dialog-text').textContent = dialog; | |
| // Show dialog box | |
| document.getElementById('dialog-box').classList.remove('translate-y-full'); | |
| } | |
| function closeDialog() { | |
| document.getElementById('dialog-box').classList.add('translate-y-full'); | |
| } | |
| 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.currentScreen === 'game' && gameState.nearbyNpc) { | |
| showDialog(gameState.nearbyNpc); | |
| } | |
| 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> |