Joyful Park Game

Joyful Park Game body { margin: 0; overflow: hidden; background-color: #87ceeb; /* Sky blue background */ } canvas { display: block; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { setupScene } from './sceneSetup.js'; import { createAvatar, updateAvatar } from './avatar.js'; import { setupControls } from './controls.js'; // Basic Scene Setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // Sky blue scene.fog = new THREE.Fog(0x87ceeb, 50, 150); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 10, 20); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(20, 50, 30); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 500; directionalLight.shadow.camera.left = -100; directionalLight.shadow.camera.right = 100; directionalLight.shadow.camera.top = 100; directionalLight.shadow.camera.bottom = -100; scene.add(directionalLight); // const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera); // scene.add(shadowHelper); // Uncomment to debug shadow camera // Setup Park Elements setupScene(scene); // Avatar const avatar = createAvatar(scene); avatar.position.set(0, 0.5, 5); // Start position // Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 5; controls.maxDistance = 50; controls.maxPolarAngle = Math.PI / 2.1; // Prevent looking straight down or under ground controls.target.copy(avatar.position); // Initial target const keyboardState = setupControls(); // Handle Window Resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation Loop const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); // Update avatar based on keyboard input const moveDelta = updateAvatar(avatar, keyboardState, delta, camera); // Update controls target to follow avatar smoothly controls.target.lerp(avatar.position.clone().add(new THREE.Vector3(0, 1, 0)), 0.1); // Target slightly above avatar feet controls.update(); // Required if controls.enableDamping or controls.autoRotate are set to true renderer.render(scene, camera); } animate(); import * as THREE from 'three'; function createTree(position) { const trunkHeight = THREE.MathUtils.randFloat(3, 6); const trunkRadius = trunkHeight * 0.1; const foliageRadius = trunkHeight * 0.5; const foliageHeight = foliageRadius * 2; const trunkGeometry = new THREE.CylinderGeometry(trunkRadius * 0.7, trunkRadius, trunkHeight, 8); const trunkMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // Brown const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.set(position.x, position.y + trunkHeight / 2, position.z); trunk.castShadow = true; trunk.receiveShadow = true; const foliageGeometry = new THREE.ConeGeometry(foliageRadius, foliageHeight, 16); // Use Cone for simpler trees const foliageMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22 }); // Forest Green const foliage = new THREE.Mesh(foliageGeometry, foliageMaterial); foliage.position.set(position.x, position.y + trunkHeight + foliageHeight * 0.4, position.z); foliage.castShadow = true; foliage.receiveShadow = true; const group = new THREE.Group(); group.add(trunk); group.add(foliage); return group; } function createBench(position, rotationY = 0) { const benchGroup = new THREE.Group(); const seatWidth = 2; const seatHeight = 0.1; const seatDepth = 0.4; const legHeight = 0.4; const legSize = 0.08; const backHeight = 0.5; const woodMaterial = new THREE.MeshPhongMaterial({ color: 0x966F33 }); // Wood color // Seat const seatGeometry = new THREE.BoxGeometry(seatWidth, seatHeight, seatDepth); const seat = new THREE.Mesh(seatGeometry, woodMaterial); seat.position.y = legHeight; seat.castShadow = true; benchGroup.add(seat); // Backrest const backGeometry = new THREE.BoxGeometry(seatWidth, backHeight, seatHeight); const backrest = new THREE.Mesh(backGeometry, woodMaterial); backrest.position.y = legHeight + backHeight / 2; backrest.position.z = -seatDepth / 2 + seatHeight / 2; backrest.rotation.x = Math.PI / 18; // Slight tilt backrest.castShadow = true; benchGroup.add(backrest); // Legs const legGeometry = new THREE.BoxGeometry(legSize, legHeight, legSize); const legPositions = [ { x: seatWidth / 2 - legSize, z: seatDepth / 2 - legSize }, { x: -seatWidth / 2 + legSize, z: seatDepth / 2 - legSize }, { x: seatWidth / 2 - legSize, z: -seatDepth / 2 + legSize }, { x: -seatWidth / 2 + legSize, z: -seatDepth / 2 + legSize }, ]; legPositions.forEach(pos => { const leg = new THREE.Mesh(legGeometry, woodMaterial); leg.position.set(pos.x, legHeight / 2, pos.z); leg.castShadow = true; benchGroup.add(leg); }); benchGroup.position.copy(position); benchGroup.rotation.y = rotationY; return benchGroup; } function createField(position, size, color, lineColor) { const fieldGroup = new THREE.Group(); // Base const fieldGeometry = new THREE.PlaneGeometry(size.x, size.z); const fieldMaterial = new THREE.MeshPhongMaterial({ color: color, side: THREE.DoubleSide }); const fieldPlane = new THREE.Mesh(fieldGeometry, fieldMaterial); fieldPlane.rotation.x = -Math.PI / 2; fieldPlane.receiveShadow = true; fieldGroup.add(fieldPlane); // Simple Lines (example for football) if (lineColor) { const lineMaterial = new THREE.LineBasicMaterial({ color: lineColor }); const points = []; // Outer boundary points.push(new THREE.Vector3(-size.x / 2, 0.01, -size.z / 2)); points.push(new THREE.Vector3(size.x / 2, 0.01, -size.z / 2)); points.push(new THREE.Vector3(size.x / 2, 0.01, size.z / 2)); points.push(new THREE.Vector3(-size.x / 2, 0.01, size.z / 2)); points.push(new THREE.Vector3(-size.x / 2, 0.01, -size.z / 2)); // Center line points.push(new THREE.Vector3(0, 0.01, -size.z / 2)); points.push(new THREE.Vector3(0, 0.01, size.z / 2)); const lineGeometry = new THREE.BufferGeometry().setFromPoints(points); const lines = new THREE.Line(lineGeometry, lineMaterial); fieldGroup.add(lines); } fieldGroup.position.copy(position); return fieldGroup; } export function setupScene(scene) { // Ground const groundGeometry = new THREE.PlaneGeometry(200, 200); const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x90EE90 }); // Light green const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Trees const treePositions = [ { x: -15, z: -20 }, { x: 15, z: -25 }, { x: -20, z: 10 }, { x: 25, z: 15 }, { x: -30, z: -30 }, { x: 35, z: -10 }, { x: -10, z: 30 }, { x: 10, z: 40 }, { x: 40, z: 40 }, { x: -40, z: -5 }, { x: 5, z: -35 }, { x: -25, z: 25 }, ]; treePositions.forEach(pos => { const tree = createTree(new THREE.Vector3(pos.x, 0, pos.z)); scene.add(tree); }); // Benches const benchPositions = [ { pos: new THREE.Vector3(-10, 0, 15), rot: Math.PI / 4 }, { pos: new THREE.Vector3(10, 0, 15), rot: -Math.PI / 4 }, { pos: new THREE.Vector3(0, 0, 25), rot: 0 }, { pos: new THREE.Vector3(-25, 0, -10), rot: Math.PI / 2 }, { pos: new THREE.Vector3(25, 0, -10), rot: -Math.PI / 2 }, ]; benchPositions.forEach(benchData => { const bench = createBench(benchData.pos, benchData.rot); scene.add(bench); }); // Football Field const footballField = createField( new THREE.Vector3(30, 0.01, 0), // Position slightly above ground { x: 40, z: 60 }, // Size 0x32CD32, // Lime Green 0xffffff // White lines ); scene.add(footballField); // Basketball Court const basketballCourt = createField( new THREE.Vector3(-30, 0.01, 0), { x: 28, z: 15 }, // Approx size 0xD2B48C, // Tan/Wood color 0xffffff // White lines (simplified) ); // Add simple hoops (cylinders and planes) const hoopMaterial = new THREE.MeshPhongMaterial({ color: 0x808080 }); // Grey const backboardMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff }); // White [-14, 14].forEach(xOffset => { const poleGeo = new THREE.CylinderGeometry(0.1, 0.1, 3.5, 8); const pole = new THREE.Mesh(poleGeo, hoopMaterial); pole.position.set(xOffset, 3.5 / 2, 0); pole.castShadow = true; basketballCourt.add(pole); const backboardGeo = new THREE.BoxGeometry(1.8, 1.1, 0.1); const backboard = new THREE.Mesh(backboardGeo, backboardMaterial); backboard.position.set(xOffset, 3.3, -0.1); // Position relative to pole top backboard.castShadow = true; basketballCourt.add(backboard); const rimGeo = new THREE.TorusGeometry(0.45, 0.05, 8, 16); const rim = new THREE.Mesh(rimGeo, new THREE.MeshPhongMaterial({ color: 0xff4500 })); // OrangeRed rim.position.set(xOffset, 3.05, 0.4); rim.rotation.x = Math.PI / 2; rim.castShadow = true; basketballCourt.add(rim); }); scene.add(basketballCourt); // Simple Vegetation (Bushes) const bushGeometry = new THREE.SphereGeometry(0.7, 16, 8); const bushMaterial = new THREE.MeshPhongMaterial({ color: 0x006400 }); // Dark Green const bushPositions = [ { x: -8, z: 18 }, { x: 8, z: 18 }, { x: -12, z: -15 }, { x: 12, z: -18 }, { x: 20, z: 25 }, { x: -20, z: -25 }, { x: 30, z: 30 }, { x: -30, z: 30 } ]; bushPositions.forEach(pos => { const bush = new THREE.Mesh(bushGeometry, bushMaterial); bush.position.set(pos.x, 0.5, pos.z); bush.scale.set( THREE.MathUtils.randFloat(0.8, 1.5), THREE.MathUtils.randFloat(0.6, 1.2), THREE.MathUtils.randFloat(0.8, 1.5) ); bush.castShadow = true; scene.add(bush); }); } import * as THREE from 'three'; export function createAvatar(scene) { // Simple capsule shape for the avatar const radius = 0.4; const height = 1.2; // Cylinder part height const geometry = new THREE.CapsuleGeometry(radius, height, 4, 10); // Use CapsuleGeometry const material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // Red color for visibility const avatar = new THREE.Mesh(geometry, material); avatar.castShadow = true; avatar.position.y = height / 2 + radius; // Position base at ground level scene.add(avatar); return avatar; } export function updateAvatar(avatar, keyboardState, delta, camera) { const moveSpeed = 5.0; // units per second const rotationSpeed = 3.0; // radians per second const moveDirection = new THREE.Vector3(0, 0, 0); let rotationAngle = 0; if (keyboardState['w'] || keyboardState['ArrowUp']) { moveDirection.z -= 1; } if (keyboardState['s'] || keyboardState['ArrowDown']) { moveDirection.z += 1; } if (keyboardState['a'] || keyboardState['ArrowLeft']) { rotationAngle += rotationSpeed * delta; } if (keyboardState['d'] || keyboardState['ArrowRight']) { rotationAngle -= rotationSpeed * delta; } // Apply rotation if (rotationAngle !== 0) { avatar.rotateY(rotationAngle); } // Apply movement relative to avatar's orientation if (moveDirection.lengthSq() > 0) { moveDirection.normalize(); const moveDistance = moveSpeed * delta; // Get avatar's forward direction const forward = new THREE.Vector3(0, 0, -1); forward.applyQuaternion(avatar.quaternion); // Calculate movement vector based on input and avatar direction const moveVector = new THREE.Vector3(); if (keyboardState['w'] || keyboardState['ArrowUp']) { moveVector.add(forward); } if (keyboardState['s'] || keyboardState['ArrowDown']) { moveVector.sub(forward); } // Normalize and scale movement vector if (moveVector.lengthSq() > 0) { moveVector.normalize().multiplyScalar(moveDistance); avatar.position.add(moveVector); } } // Keep avatar upright (prevent accidental tilting) - Optional but good practice avatar.rotation.x = 0; avatar.rotation.z = 0; // Return the amount moved (optional, might be useful later) return moveDirection.multiplyScalar(moveSpeed * delta); } export function setupControls() { const keyboardState = {}; window.addEventListener('keydown', (event) => { keyboardState[event.key.toLowerCase()] = true; }); window.addEventListener('keyup', (event) => { keyboardState[event.key.toLowerCase()] = false; }); return keyboardState; }