import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // 1. SCENA E CAMERA const scene = new THREE.Scene(); scene.background = new THREE.Color(0x33ccff); // Cielo più azzurro const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); window.addEventListener('resize', function () { renderer.setSize(window.innerWidth, window.innerHeight) }) // AGGIUNTA MARE const oceanGeometry = new THREE.PlaneGeometry(2000, 2000); const oceanMaterial = new THREE.MeshStandardMaterial({ color: 0x0077be, transparent: true, opacity: 0.8 }); const ocean = new THREE.Mesh(oceanGeometry, oceanMaterial); ocean.rotation.x = -Math.PI / 2; ocean.position.y = -0.2; // Leggermente sotto l'isola scene.add(ocean); // 2. LUCI E AMBIENTE scene.add(new THREE.AmbientLight(0xffffff, 0.8)); const sunLight = new THREE.DirectionalLight(0xffffff, 1); sunLight.position.set(10, 20, 10); scene.add(sunLight); const islandGroup = new THREE.Group(); const altezzaIsola = 0.5; // Quanto sta il prato sopra il livello del mare (0.0) const altezzaOcchi = 1.6; // L'altezza standard della telecamera // --- IL FONDALE (Sabbia scura sul fondo) --- const floorGeo = new THREE.PlaneGeometry(1000, 1000); const floorMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a }); // Grigio scuro/Fondale const floor = new THREE.Mesh(floorGeo, floorMat); floor.rotation.x = -Math.PI / 2; floor.position.y = -3; // 5 metri sotto il livello del mare scene.add(floor); // --- IL PRATO --- const raggioPrato = 19; const grassGeo = new THREE.CircleGeometry(raggioPrato, 64); const grassMat = new THREE.MeshStandardMaterial({ color: 0x4df556 }); const grass = new THREE.Mesh(grassGeo, grassMat); grass.rotation.x = -Math.PI / 2; // Posizioniamo il prato all'altezza desiderata grass.position.y = altezzaIsola; islandGroup.add(grass); // --- LA SABBIA (Cilindro Svasato) --- const altezzaSabbia = 1.5; // Altezza totale del blocco sabbia const sandGeo = new THREE.CylinderGeometry(raggioPrato, 22 + 10, altezzaSabbia + 3, 64, 1, true); const sandMat = new THREE.MeshStandardMaterial({ color: 0xedc9af, side: THREE.DoubleSide }); const sand = new THREE.Mesh(sandGeo, sandMat); // Per far combaciare la cima del cilindro con il prato: // L'altezza è 1.5, il centro del cilindro deve stare a (AltezzaIsola - metà altezza cilindro) sand.position.y = altezzaIsola - (altezzaSabbia / 2) - 1.5; islandGroup.add(sand); scene.add(islandGroup); scene.fog = new THREE.Fog(0x33ccff, 20, 100); // 3. CONTROLLI function lock() { document.getElementById('start').style.display = 'none'; document.getElementById('punti').style.display = 'block'; document.getElementById('tempo').style.display = 'block'; document.getElementById('crosshair').style.display = 'block'; } function unlock() { const startDiv = document.getElementById('start'); startDiv.style.display = 'flex'; // Forza il layout Flexbox // Nascondi l'HUD document.getElementById('punti').style.display = 'none'; document.getElementById('tempo').style.display = 'none'; document.getElementById('crosshair').style.display = 'none'; } const controls = new PointerLockControls(camera, document.body); document.getElementById('start').addEventListener('click', () => controls.lock()); controls.addEventListener('lock', lock); controls.addEventListener('unlock', unlock); // 4. GESTIONE OGGETTI DI SCENA (20 rifiuti + 6 alberi) const trashArray = []; let score = 0; const loader = new GLTFLoader(); loader.load('models/rifiuto.glb', (gltf) => { const mesh = gltf.scene.getObjectByName("Trash_Pile_03_GEO"); mesh.geometry.center(); // Centra l'oggetto per collisioni precise for (let i = 0; i < 20; i++) { const clone = mesh.clone(); scene.add(clone); trashArray.push(clone); spawn(clone, 0.2); } }); loader.load('models/tree.glb', (gltf) => { const mesh = gltf.scene; mesh.scale.set(4, 4, 4); console.log(mesh); function spawn(obj, radius, minDistance) { const points = []; const attempts = 1000; // Numero massimo di tentativi per trovare un punto valido for (let i = 0; i < attempts; i++) { let angle = Math.random() * 2 * Math.PI; let dist = Math.random() * radius; let x = dist * Math.cos(angle); let z = dist * Math.sin(angle); let valid = true; for (let j = 0; j < points.length; j++) { const dx = x - points[j].x; const dz = z - points[j].z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < minDistance) { valid = false; break; } } if (valid) { points.push({ x: x, z: z }); } } // Spawna gli alberi nei punti generati for (let i = 0; i < points.length; i++) { const clone = obj.clone(); const a = Math.random() * Math.PI * 2; const r = Math.random() * 18; const x = Math.cos(a) * r; const z = Math.sin(a) * r; // Y deve essere altezzaIsola + un piccolo offset clone.position.set(points[i].x, altezzaIsola - 0.1, points[i].z); clone.rotation.y = Math.random() * Math.PI * 2; // Rotazione tra 0 e 360 gradi scene.add(clone); } } spawn(mesh, 18, 8); // Raggio 18, distanza minima 5 }); console.log(scene) function spawn(obj) { const a = Math.random() * Math.PI * 2; const r = Math.random() * 18; const x = Math.cos(a) * r; const z = Math.sin(a) * r; // Y deve essere altezzaIsola + un piccolo offset obj.position.set(x, altezzaIsola + 0.1, z); } // 5. MOVIMENTO E COLLISIONI const keys = {}; document.onkeydown = (e) => keys[e.code] = true; document.onkeyup = (e) => keys[e.code] = false; // Setup Raycaster (fuori dal loop animate) const raycaster = new THREE.Raycaster(); const downVector = new THREE.Vector3(0, -1, 0); // --- CONFIGURAZIONE MOVIMENTO --- let canLeaveIsland = false; // Se false, l'acqua blocca il movimento. let lastSafePosition = camera.position.clone(); function animate() { requestAnimationFrame(animate); if (controls.isLocked) { // 1. Salva la posizione attuale prima del movimento const oldPos = camera.position.clone(); // 2. Esegui il movimento WASD if (keys['KeyW']) controls.moveForward(0.15); if (keys['KeyS']) controls.moveForward(-0.15); if (keys['KeyA']) controls.moveRight(-0.15); if (keys['KeyD']) controls.moveRight(0.15); // 3. --- GESTIONE ALTEZZA DINAMICA --- const rayOrigin = camera.position.clone(); rayOrigin.y = 10; // Spara dall'alto verso il basso raycaster.set(rayOrigin, downVector); // Controlliamo Prato e Sabbia const intersects = raycaster.intersectObjects([grass, sand]); if (intersects.length > 0) { // Logica del "Punto più alto": // Se il raggio colpisce sia prato che sabbia, prendiamo il prato. let highestPoint = -Infinity; for (let i = 0; i < intersects.length; i++) { if (intersects[i].point.y > highestPoint) { highestPoint = intersects[i].point.y; } } // Applichiamo l'altezza alla camera camera.position.y = highestPoint + altezzaOcchi; // --- CONTROLLO BARRIERA ACQUA --- // Se il punto più alto è sotto il livello del mare (0) // e non possiamo uscire, blocchiamo il movimento if (!canLeaveIsland && highestPoint < 0) { camera.position.x = oldPos.x; camera.position.z = oldPos.z; camera.position.y = oldPos.y; } else { // Posizione valida, la salviamo lastSafePosition.copy(camera.position); camera.position.y = camera.position.y > (-2.25 + altezzaOcchi) ? camera.position.y : (-2.25 + altezzaOcchi); } } else { // --- FUORI DALL'ISOLA (VUOTO) --- if (!canLeaveIsland) { camera.position.copy(oldPos); } else { camera.position.y = -2.25 + altezzaOcchi; // Volo sull'acqua } } // --- COLLISIONI RIFIUTI --- trashArray.forEach(t => { if (camera.position.distanceTo(t.position) < 1.8) { score++; document.getElementById('score').innerText = score; spawn(t); } }); } renderer.render(scene, camera); } animate();