Three.js Cricket Stadium

Cricket Stadium

body { margin: 0; overflow: hidden; background-color: #f0f0f0; font-family: Arial, sans-serif; } canvas { display: block; } #info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display: block; color: white; font-size: 20px; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { createGround } from './src/ground.js'; import { createStands } from './src/stands.js'; import { createScoreboard } from './src/scoreboard.js'; import { createFloodlights } from './src/floodlights.js'; import { createPavilion } from './src/pavilion.js'; import { setupLighting } from './src/lighting.js'; import { createSky } from './src/sky.js'; let scene, camera, renderer, controls; function init() { // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); // Basic sky blue // Camera camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000); camera.position.set(0, 150, 350); // Elevated view // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; // Enable shadows renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 50; controls.maxDistance = 500; controls.maxPolarAngle = Math.PI / 2 - 0.05; // Prevent going below ground // Stadium Components const ground = createGround(); scene.add(ground); const stands = createStands(); scene.add(stands); const scoreboard = createScoreboard(); scene.add(scoreboard); const floodlights = createFloodlights(); floodlights.forEach(lightSystem => { scene.add(lightSystem.tower); scene.add(lightSystem.light); // scene.add(lightSystem.light.target); // Target is often added automatically or positioned // scene.add(lightSystem.helper); // Optional helper }); const pavilion = createPavilion(); scene.add(pavilion); // Lighting setupLighting(scene); // Sky (optional, if using skybox/dome instead of background color) // const sky = createSky(); // scene.add(sky); // Or use a skybox: // const loader = new THREE.CubeTextureLoader(); // const texture = loader.load([ ... skybox image paths ... ]); // scene.background = texture; // Handle window resize window.addEventListener('resize', onWindowResize, false); // Start animation loop animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } init(); import * as THREE from 'three'; export function createGround() { const groundGroup = new THREE.Group(); // Field (Oval Shape) // We can approximate an oval by scaling a circle const fieldGeometry = new THREE.CircleGeometry(150, 64); // Radius, segments const fieldMaterial = new THREE.MeshStandardMaterial({ color: 0x008000, // Green roughness: 0.8, metalness: 0.1, side: THREE.DoubleSide // Visible from below if needed }); const fieldMesh = new THREE.Mesh(fieldGeometry, fieldMaterial); fieldMesh.rotation.x = -Math.PI / 2; // Lay flat on XZ plane fieldMesh.scale.set(1, 1.3, 1); // Scale Y (which becomes Z after rotation) to make it oval fieldMesh.receiveShadow = true; // Allow shadows on the ground groundGroup.add(fieldMesh); // Pitch const pitchGeometry = new THREE.PlaneGeometry(22, 6); // Length, width const pitchMaterial = new THREE.MeshStandardMaterial({ color: 0xBC8F8F, // RosyBrown (approx pitch color) roughness: 0.9, metalness: 0.0 }); const pitchMesh = new THREE.Mesh(pitchGeometry, pitchMaterial); pitchMesh.rotation.x = -Math.PI / 2; pitchMesh.position.y = 0.01; // Slightly above the field to prevent z-fighting pitchMesh.receiveShadow = true; groundGroup.add(pitchMesh); // Boundary Rope (Optional) - Torus const boundaryRadius = 150 * 1.02; // Slightly larger than field radius const boundaryGeometry = new THREE.TorusGeometry(boundaryRadius, 0.5, 16, 100); const boundaryMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); const boundaryMesh = new THREE.Mesh(boundaryGeometry, boundaryMaterial); boundaryMesh.rotation.x = -Math.PI / 2; boundaryMesh.position.y = 0.1; // Slightly elevated boundaryMesh.scale.set(1, 1.3, 1); // Match oval shape boundaryMesh.receiveShadow = true; groundGroup.add(boundaryMesh); return groundGroup; } import * as THREE from 'three'; export function createStands() { const standsGroup = new THREE.Group(); const standLevels = 5; const levelHeight = 5; const levelDepth = 10; const baseRadius = 165; // Start radius just outside the boundary const angle = Math.PI * 1.8; // Cover most of the circle, leave gap for pavilion/scoreboard const angleStart = -angle / 2; const standMaterial = new THREE.MeshStandardMaterial({ color: 0xAAAAAA, // Light grey concrete roughness: 0.7, metalness: 0.2, side: THREE.DoubleSide }); // Simple approach: Stacked, extruded arcs for (let i = 0; i < standLevels; i++) { const currentRadius = baseRadius + i * levelDepth; const currentHeight = i * levelHeight; const shape = new THREE.Shape(); shape.absarc(0, 0, currentRadius + levelDepth, angleStart, angleStart + angle, false); // Outer arc shape.absarc(0, 0, currentRadius, angleStart + angle, angleStart, true); // Inner arc (reverse direction) shape.closePath(); const extrudeSettings = { steps: 1, depth: levelHeight * 0.8, // Height of the tier wall bevelEnabled: false, }; const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); const mesh = new THREE.Mesh(geometry, standMaterial); // Position and rotate the tier mesh.position.y = currentHeight; mesh.rotation.x = -Math.PI / 2; // Rotate to lay flat initially mesh.rotation.z = Math.PI / 2; // Align extrusion direction vertically mesh.castShadow = true; mesh.receiveShadow = true; standsGroup.add(mesh); // Add simple "seats" plane on top (optional visual) const seatShape = new THREE.Shape(); seatShape.absarc(0, 0, currentRadius + levelDepth, angleStart, angleStart + angle, false); seatShape.absarc(0, 0, currentRadius, angleStart + angle, angleStart, true); seatShape.closePath(); const seatGeo = new THREE.ShapeGeometry(seatShape); const seatMat = new THREE.MeshStandardMaterial({ color: 0x888888, side: THREE.DoubleSide }); // Darker grey for seats const seatMesh = new THREE.Mesh(seatGeo, seatMat); seatMesh.rotation.x = -Math.PI / 2; seatMesh.position.y = currentHeight + levelHeight * 0.8; // Place on top of the tier wall seatMesh.receiveShadow = true; standsGroup.add(seatMesh); } standsGroup.position.y = 0.1; // Lift slightly off the ground plane return standsGroup; } import * as THREE from 'three'; export function createScoreboard() { const scoreboardGroup = new THREE.Group(); // Main structure const boardWidth = 40; const boardHeight = 20; const boardDepth = 2; const structureGeo = new THREE.BoxGeometry(boardWidth, boardHeight, boardDepth); const structureMat = new THREE.MeshStandardMaterial({ color: 0x444444 }); const structureMesh = new THREE.Mesh(structureGeo, structureMat); structureMesh.castShadow = true; structureMesh.receiveShadow = true; // Screen surface const screenGeo = new THREE.PlaneGeometry(boardWidth * 0.9, boardHeight * 0.8); // Basic dark screen, text could be added with CanvasTexture later const screenMat = new THREE.MeshBasicMaterial({ color: 0x111111 }); const screenMesh = new THREE.Mesh(screenGeo, screenMat); screenMesh.position.z = boardDepth / 2 + 0.01; // Slightly in front scoreboardGroup.add(structureMesh); scoreboardGroup.add(screenMesh); // Position the scoreboard const radius = 160; // Place it near the stands radius const angle = Math.PI * 1.1; // Position it in the gap of the stands scoreboardGroup.position.set( Math.cos(angle) * radius, boardHeight / 2 + 5, // Lift it off the ground Math.sin(angle) * radius ); scoreboardGroup.lookAt(0, boardHeight / 2, 0); // Make it face the center return scoreboardGroup; } import * as THREE from 'three'; function createSingleFloodlight(position) { const lightGroup = new THREE.Group(); const towerHeight = 60; const towerRadius = 1; // Tower const towerGeo = new THREE.CylinderGeometry(towerRadius, towerRadius * 1.5, towerHeight, 16); const towerMat = new THREE.MeshStandardMaterial({ color: 0xCCCCCC, roughness: 0.5, metalness: 0.5 }); const towerMesh = new THREE.Mesh(towerGeo, towerMat); towerMesh.position.y = towerHeight / 2; // Base at y=0 towerMesh.castShadow = true; towerMesh.receiveShadow = true; // Light Fixture (simplified) const fixtureGeo = new THREE.BoxGeometry(5, 2, 5); const fixtureMat = new THREE.MeshStandardMaterial({ color: 0x555555 }); const fixtureMesh = new THREE.Mesh(fixtureGeo, fixtureMat); fixtureMesh.position.y = towerHeight; // At the top fixtureMesh.castShadow = true; // Spotlight const spotLight = new THREE.SpotLight(0xffffff, 5000); // Color, Intensity spotLight.position.set(0, towerHeight - 1, 0); // Inside the fixture spotLight.angle = Math.PI / 6; // Angle of the light cone spotLight.penumbra = 0.2; // Softness of the edge spotLight.decay = 1.5; // How light dims with distance spotLight.distance = 300; // Max distance light travels spotLight.castShadow = true; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; spotLight.shadow.camera.near = 10; spotLight.shadow.camera.far = 300; spotLight.shadow.focus = 1; // Setting focus can sometimes help shadow quality // Target the light towards the center of the pitch spotLight.target.position.set(0, 0, 0); lightGroup.add(spotLight.target); // Target needs to be added to the group/scene // Optional: Helper to visualize the spotlight cone // const lightHelper = new THREE.SpotLightHelper(spotLight); lightGroup.add(towerMesh); lightGroup.add(fixtureMesh); lightGroup.add(spotLight); // lightGroup.add(lightHelper); // Add helper if needed lightGroup.position.copy(position); // Return structure containing meshes and light for easier management return { tower: lightGroup, // Contains tower, fixture, light, target light: spotLight, // helper: lightHelper // Return helper if created }; } export function createFloodlights() { const floodlights = []; const radius = 155; // Just inside the stands const positions = [ new THREE.Vector3(radius, 0, radius), new THREE.Vector3(-radius, 0, radius), new THREE.Vector3(radius, 0, -radius), new THREE.Vector3(-radius, 0, -radius), ]; positions.forEach(pos => { floodlights.push(createSingleFloodlight(pos)); }); return floodlights; } import * as THREE from 'three'; export function createPavilion() { const pavilionGroup = new THREE.Group(); // Main building structure const buildingWidth = 50; const buildingHeight = 15; const buildingDepth = 20; const buildingGeo = new THREE.BoxGeometry(buildingWidth, buildingHeight, buildingDepth); const buildingMat = new THREE.MeshStandardMaterial({ color: 0xE0E0E0, // Off-white roughness: 0.6, metalness: 0.1 }); const buildingMesh = new THREE.Mesh(buildingGeo, buildingMat); buildingMesh.castShadow = true; buildingMesh.receiveShadow = true; pavilionGroup.add(buildingMesh); // Simple roof const roofGeo = new THREE.BoxGeometry(buildingWidth * 1.1, 1, buildingDepth * 1.1); const roofMat = new THREE.MeshStandardMaterial({ color: 0x8B4513 }); // SaddleBrown const roofMesh = new THREE.Mesh(roofGeo, roofMat); roofMesh.position.y = buildingHeight / 2 + 0.5; roofMesh.castShadow = true; pavilionGroup.add(roofMesh); // Simple "glass" front (using a semi-transparent plane) const glassGeo = new THREE.PlaneGeometry(buildingWidth * 0.8, buildingHeight * 0.7); const glassMat = new THREE.MeshPhysicalMaterial({ color: 0xADD8E6, // Light blue tint metalness: 0.1, roughness: 0.05, transmission: 0.9, // Make it transparent transparent: true, side: THREE.DoubleSide, }); const glassMesh = new THREE.Mesh(glassGeo, glassMat); glassMesh.position.z = buildingDepth / 2 + 0.01; // Slightly in front glassMesh.position.y = -buildingHeight * 0.05; // Adjust vertical position pavilionGroup.add(glassMesh); // Position the pavilion const radius = 160; // Place it near the stands radius const angle = -Math.PI * 0.05; // Position it in the gap of the stands (opposite scoreboard) pavilionGroup.position.set( Math.cos(angle) * radius, buildingHeight / 2, // Base at y=0 Math.sin(angle) * radius ); pavilionGroup.lookAt(0, buildingHeight / 2, 0); // Make it face the center return pavilionGroup; } import * as THREE from 'three'; export function setupLighting(scene) { // Ambient Light const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); // Soft white light scene.add(ambientLight); // Directional Light (Sun) const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Brighter white light directionalLight.position.set(100, 200, 150); // Position the sun high and to the side directionalLight.target.position.set(0, 0, 0); // Target the center of the scene // Configure shadows for the directional light directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; // Higher resolution for better shadow quality directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 50; directionalLight.shadow.camera.far = 500; // Adjust the shadow camera frustum to cover the stadium area const shadowCamSize = 200; directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize; directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize; // directionalLight.shadow.bias = -0.001; // Adjust if shadow acne occurs scene.add(directionalLight); scene.add(directionalLight.target); // Optional: Helper to visualize the directional light's shadow camera // const helper = new THREE.CameraHelper( directionalLight.shadow.camera ); // scene.add( helper ); } import * as THREE from 'three'; // This file is currently optional as scene background color is used in main.js // You can use this to implement a sky sphere or skybox later. export function createSky() { // Example: Sky Sphere const skyGeometry = new THREE.SphereGeometry(2000, 32, 16); // Large sphere // Basic blue material, could use a texture later const skyMaterial = new THREE.MeshBasicMaterial({ color: 0x87ceeb, side: THREE.BackSide // Render the inside of the sphere }); const skyMesh = new THREE.Mesh(skyGeometry, skyMaterial); return skyMesh; /* // Example: Skybox Loader (requires 6 texture images) const loader = new THREE.CubeTextureLoader(); loader.setPath( 'path/to/skybox/textures/' ); // Set the path to your textures const textureCube = loader.load( [ 'px.jpg', 'nx.jpg', // Right, Left 'py.jpg', 'ny.jpg', // Top, Bottom 'pz.jpg', 'nz.jpg' // Front, Back ] ); // Set the scene background directly (no mesh needed) // In main.js: scene.background = textureCube; // Return null or the texture if needed elsewhere return null; */ }