Low Poly Battlefield

Low Poly Battlefield import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0xabcdef); // Lighter sky blue scene.fog = new THREE.Fog(0xabcdef, 60, 180); // Adjusted fog // Camera setup const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 25, 40); // Slightly higher view // Renderer setup 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); // Orbit Controls const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.maxPolarAngle = Math.PI / 2 - 0.05; // Prevent looking too far down // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); // Slightly brighter ambient scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); // Slightly stronger directional directionalLight.position.set(50, 70, 30); // Higher angle directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 250; // Increased range directionalLight.shadow.camera.left = -120; // Wider shadow area directionalLight.shadow.camera.right = 120; directionalLight.shadow.camera.top = 120; directionalLight.shadow.camera.bottom = -120; scene.add(directionalLight); // const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera); // scene.add(shadowHelper); // Materials (Low Poly Style) const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xaa9966, // Earthy brown/tan flatShading: true, // Apply flat shading to ground side: THREE.DoubleSide }); const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, flatShading: true }); const structureMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, flatShading: true }); const treeTrunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513, flatShading: true }); // Brown const treeLeavesMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, flatShading: true }); // Forest Green // Ground Plane with simple hills const groundSize = 250; const segments = 20; const groundGeometry = new THREE.PlaneGeometry(groundSize, groundSize, segments, segments); const vertices = groundGeometry.attributes.position.array; for (let i = 0; i < vertices.length; i += 3) { // Simple noise-like variation for hills const x = vertices[i]; const y = vertices[i + 1]; const dist = Math.sqrt(x*x + y*y); const variance = Math.max(0, 30 - dist * 0.2); // More variation near center vertices[i + 2] = (Math.random() - 0.5) * 5 + Math.sin(x * 0.1) * 1.5 + Math.cos(y * 0.08) * 1.5; vertices[i + 2] *= Math.random() * 0.5 + 0.5; // Randomize height slightly vertices[i + 2] = Math.max(-3, Math.min(8, vertices[i + 2])); // Clamp height } groundGeometry.computeVertexNormals(); // Recalculate normals for correct lighting const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Helper function to create meshes function createMesh(geometry, material, position, rotation = new THREE.Euler(), scale = new THREE.Vector3(1, 1, 1)) { const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(position); mesh.rotation.copy(rotation); mesh.scale.copy(scale); mesh.castShadow = true; mesh.receiveShadow = true; // Adjust Y position based on ground height (approximate) const groundY = getGroundHeight(position.x, position.z); mesh.position.y += groundY; scene.add(mesh); return mesh; } // Function to get approximate ground height at x, z function getGroundHeight(x, z) { // This is a simplified approximation. A more accurate method would involve raycasting. const xNorm = (x / groundSize + 0.5); const zNorm = (z / groundSize + 0.5); if (xNorm < 0 || xNorm > 1 || zNorm < 0 || zNorm > 1) return 0; // Outside plane bounds const xIndex = Math.floor(xNorm * segments); const zIndex = Math.floor(zNorm * segments); const vertexIndex1 = (zIndex * (segments + 1) + xIndex) * 3; const vertexIndex2 = (zIndex * (segments + 1) + (xIndex + 1)) * 3; const vertexIndex3 = ((zIndex + 1) * (segments + 1) + xIndex) * 3; // Basic average - not perfect interpolation but okay for low poly let h1 = vertices[vertexIndex1 + 2] || 0; let h2 = vertices[vertexIndex2 + 2] || h1; // Fallback if index out of bounds let h3 = vertices[vertexIndex3 + 2] || h1; // Fallback return (h1 + h2 + h3) / 3; } // Obstacles and Scenery const boxGeometry = new THREE.BoxGeometry(1, 1, 1); // Base size 1x1x1 // Concrete Barriers (like Jersey barriers) createMesh(boxGeometry, structureMaterial, new THREE.Vector3(-15, 0.5, -10), new THREE.Euler(), new THREE.Vector3(2, 1, 6)); createMesh(boxGeometry, structureMaterial, new THREE.Vector3(-12, 0.5, -10), new THREE.Euler(0, Math.PI / 10, 0), new THREE.Vector3(2, 1, 6)); // Ruined Wall Section createMesh(boxGeometry, structureMaterial, new THREE.Vector3(20, 2, 15), new THREE.Euler(0, Math.PI / 6, 0), new THREE.Vector3(10, 4, 1.5)); createMesh(boxGeometry, structureMaterial, new THREE.Vector3(26, 1.5, 18), new THREE.Euler(0, Math.PI / 6, Math.PI / 12), new THREE.Vector3(3, 3, 1.5)); // Fallen piece // Taller Structure createMesh(boxGeometry, structureMaterial, new THREE.Vector3(0, 4, -25), new THREE.Euler(), new THREE.Vector3(4, 8, 4)); // Rocks const rockGeometry = new THREE.IcosahedronGeometry(1, 0); // Low detail icosahedron createMesh(rockGeometry, rockMaterial, new THREE.Vector3(30, 1.5, -5), new THREE.Euler(Math.random(), Math.random(), Math.random()), new THREE.Vector3(3, 3, 4)); createMesh(rockGeometry, rockMaterial, new THREE.Vector3(35, 1, -8), new THREE.Euler(Math.random(), Math.random(), Math.random()), new THREE.Vector3(2, 2, 2)); createMesh(rockGeometry, rockMaterial, new THREE.Vector3(-25, 2, 20), new THREE.Euler(Math.random(), Math.random(), Math.random()), new THREE.Vector3(4, 4, 4)); createMesh(rockGeometry, rockMaterial, new THREE.Vector3(-28, 1, 23), new THREE.Euler(Math.random(), Math.random(), Math.random()), new THREE.Vector3(2.5, 2, 3)); // Simple Low Poly Trees const treeTrunkGeometry = new THREE.CylinderGeometry(0.5, 0.7, 4, 6); // Hexagonal trunk const treeLeavesGeometry = new THREE.IcosahedronGeometry(3, 0); // Simple leafy top function createTree(position) { const trunk = createMesh(treeTrunkGeometry, treeTrunkMaterial, position.clone().add(new THREE.Vector3(0, 2, 0))); const leaves = createMesh(treeLeavesGeometry, treeLeavesMaterial, position.clone().add(new THREE.Vector3(0, 5.5, 0))); } createTree(new THREE.Vector3(-40, 0, -30)); createTree(new THREE.Vector3(-35, 0, -45)); createTree(new THREE.Vector3(50, 0, 40)); createTree(new THREE.Vector3(45, 0, 55)); createTree(new THREE.Vector3(10, 0, 60)); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Animation loop function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate();