Spaces:

docto41
/

globe-future

Running

App Files Files Community

docto41 commited on May 23

Commit

93de478

verified ·

1 Parent(s): af14855

Add 2 files

Browse files

Files changed (2) hide show

index.html +69 -718
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,14 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simulateur de Camion - Paysages Réalistes</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/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>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/DRACOLoader.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/objects/Water.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/objects/Sky.js"></script>
     <style>
         body {
             margin: 0;
@@ -108,30 +104,16 @@
         .menu-button:hover {
             background: rgba(255, 255, 255, 0.3);
         }
-        .instructions {
             position: absolute;
             top: 20px;
             right: 20px;
             background: rgba(0, 0, 0, 0.7);
             border-radius: 10px;
-            padding: 15px;
-            color: white;
-            max-width: 300px;
             backdrop-filter: blur(5px);
             border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .instructions h3 {
-            margin-top: 0;
-            margin-bottom: 10px;
-            font-size: 1.2rem;
-        }
-        .instructions ul {
-            padding-left: 20px;
-            margin: 0;
-        }
-        .instructions li {
-            margin-bottom: 5px;
-            font-size: 0.9rem;
         }
         .loading-screen {
             position: absolute;
@@ -161,81 +143,6 @@
             width: 0%;
             transition: width 0.3s;
         }
-        .traffic-light {
-            position: absolute;
-            top: 50%;
-            right: 50px;
-            transform: translateY(-50%);
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            padding: 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .light {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: #555;
-        }
-        .light.active {
-            box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
-        }
-        .light.red.active {
-            background: #ff0000;
-        }
-        .light.yellow.active {
-            background: #ffff00;
-        }
-        .light.green.active {
-            background: #00ff00;
-        }
-        .gps {
-            position: absolute;
-            top: 80px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            padding: 10px;
-            color: white;
-            width: 200px;
-            height: 120px;
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .gps h3 {
-            margin: 0 0 5px 0;
-            font-size: 0.9rem;
-        }
-        .gps p {
-            margin: 0;
-            font-size: 0.8rem;
-        }
-        .mirror {
-            position: absolute;
-            top: 20px;
-            left: 240px;
-            width: 150px;
-            height: 80px;
-            background: rgba(0, 0, 0, 0.3);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 5px;
-            overflow: hidden;
-        }
-        .weather-controls {
-            position: absolute;
-            top: 20px;
-            right: 340px;
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 10px;
-            padding: 10px;
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            pointer-events: all;
-        }
     </style>
 </head>
 <body>
@@ -266,41 +173,16 @@
             <div class="steering-wheel" id="steering-wheel"></div>
             <div class="gear-indicator" id="gear-indicator">N</div>
             <div class="menu">
-                <button class="menu-button" id="toggle-camera">VUE INTERNE</button>
                 <button class="menu-button" id="toggle-lights">PHARES</button>
-                <button class="menu-button" id="toggle-traffic">TRAFIC</button>
                 <button class="menu-button" id="reset-truck">RÉINITIALISER</button>
             </div>
-            <div class="weather-controls">
-                <button class="menu-button" id="weather-sunny">SOLEIL</button>
-                <button class="menu-button" id="weather-rainy">PLUIE</button>
-                <button class="menu-button" id="weather-foggy">BRUME</button>
             </div>
-            <div class="instructions">
-                <h3>CONTROLES</h3>
-                <ul>
-                    <li>Z/Q/S/D : Conduire</li>
-                    <li>Espace : Frein</li>
-                    <li>R : Rétrogradez</li>
-                    <li>F : Phares</li>
-                    <li>H : Klaxon</li>
-                    <li>C : Changer de caméra</li>
-                    <li>Flèches : Regarder autour</li>
-                    <li>1-6 : Vitesses</li>
-                </ul>
-            </div>
-            <div class="traffic-light" id="traffic-light">
-                <div class="light red"></div>
-                <div class="light yellow"></div>
-                <div class="light green"></div>
-            </div>
-            <div class="gps">
-                <h3>GPS</h3>
-                <p id="gps-location">Campagne - Route Départementale</p>
-                <p id="gps-next">Prochain virage: 500m</p>
-                <p id="gps-speed">Limite: 90 km/h</p>
-            </div>
-            <div class="mirror" id="left-mirror"></div>
         </div>
         <div class="loading-screen" id="loading-screen">
             <h1 class="text-2xl font-bold mb-4">SIMULATEUR DE CAMION - PAYSAGES</h1>
@@ -317,28 +199,13 @@
         let scene, camera, renderer, truck, controls;
         let speed = 0, rpm = 1000, fuel = 100, time = 0, distance = 0;
         let steeringAngle = 0, gear = 'N';
-        let lightsOn = false, hornPlaying = false, trafficEnabled = true;
         let cameraMode = 'interior';
         let lastTime = 0;
         let loadingProgress = 0;
         let assetsLoaded = false;
-        let trafficCars = [];
-        let trafficLightState = 'red';
-        let trafficLightTimer = 0;
-        let sky, sun, water;
         let clock = new THREE.Clock();
-        let leftMirrorCamera, leftMirrorTexture;
-        let rainParticles = [];
-        let fog = null;
-        let weather = 'sunny'; // sunny, rainy, foggy
-        // Environnement amélioré
-        const environment = {
-            city: false,
-            highway: false,
-            countryside: true,
-            weather: 'sunny'
-        };
         // Initialisation
         function init() {
@@ -382,14 +249,6 @@
             // Configuration des événements
             setupEventListeners();
-            // Création du trafic
-            if (trafficEnabled) {
-                createTraffic();
-            }
-            // Configuration du rétroviseur
-            setupMirrors();
             // Animation
             animate();
         }
@@ -400,7 +259,6 @@
                 "Initialisation du système...",
                 "Chargement des textures...",
                 "Création de l'environnement...",
-                "Génération du trafic...",
                 "Finalisation..."
             ];
@@ -431,20 +289,6 @@
         // Configuration des lumières
         function setupLights() {
-            // Lumière du soleil
-            sun = new THREE.Vector3();
-            // Skybox
-            sky = new THREE.Sky();
-            sky.scale.setScalar(10000);
-            scene.add(sky);
-            const skyUniforms = sky.material.uniforms;
-            skyUniforms['turbidity'].value = 2;
-            skyUniforms['rayleigh'].value = 2;
-            skyUniforms['mieCoefficient'].value = 0.005;
-            skyUniforms['mieDirectionalG'].value = 0.8;
             // Lumière directionnelle principale
             const sunlight = new THREE.DirectionalLight(0xffffff, 1);
             sunlight.position.set(100, 100, 50);
@@ -481,12 +325,8 @@
         function createEnvironment() {
             // Sol avec texture haute résolution
             const groundGeometry = new THREE.PlaneGeometry(10000, 10000);
-            const groundTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/terrain/grasslight-big.jpg');
-            groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
-            groundTexture.repeat.set(100, 100);
-            groundTexture.anisotropy = 16;
             const groundMaterial = new THREE.MeshStandardMaterial({
-                map: groundTexture,
                 roughness: 0.8,
                 metalness: 0.2
             });
@@ -525,34 +365,8 @@
                 scene.add(line);
             }
-            // Eau avec réflexion réaliste
-            water = new THREE.Water(
-                new THREE.PlaneGeometry(10000, 1000),
-                {
-                    textureWidth: 1024,
-                    textureHeight: 1024,
-                    waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function(texture) {
-                        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-                    }),
-                    sunDirection: new THREE.Vector3(),
-                    sunColor: 0xffffff,
-                    waterColor: 0x0077be,
-                    distortionScale: 3.7,
-                    fog: scene.fog !== undefined
-                }
-            );
-            water.rotation.x = -Math.PI / 2;
-            water.position.set(50, 0.1, 0);
-            scene.add(water);
             // Paysage naturel détaillé
             createNaturalFeatures();
-            // Ponts et éléments architecturaux
-            createBridges();
-            // Feux de circulation
-            createTrafficLights();
         }
         // Création des éléments naturels améliorés
@@ -622,121 +436,6 @@
                 scene.add(mountain);
             }
-            // Rivières et lacs
-            createWaterFeatures();
-            // Rochers
-            createRocks();
-        }
-        // Création des éléments aquatiques
-        function createWaterFeatures() {
-            // Rivière sinueuse
-            const riverGeometry = new THREE.PlaneGeometry(5000, 30);
-            const riverMaterial = new THREE.MeshStandardMaterial({
-                color: 0x0077be,
-                roughness: 0.1,
-                metalness: 0.9,
-                transparent: true,
-                opacity: 0.8
-            });
-            const river = new THREE.Mesh(riverGeometry, riverMaterial);
-            river.rotation.x = -Math.PI / 2;
-            river.position.set(0, 0.05, 0);
-            scene.add(river);
-            // Lac
-            const lakeGeometry = new THREE.CircleGeometry(200, 64);
-            const lakeMaterial = new THREE.MeshStandardMaterial({
-                color: 0x006994,
-                roughness: 0.1,
-                metalness: 0.9,
-                transparent: true,
-                opacity: 0.7
-            });
-            const lake = new THREE.Mesh(lakeGeometry, lakeMaterial);
-            lake.rotation.x = -Math.PI / 2;
-            lake.position.set(300, 0.05, 800);
-            scene.add(lake);
-        }
-        // Création des rochers
-        function createRocks() {
-            const rockGeometry = new THREE.DodecahedronGeometry(3, 1);
-            const rockMaterial = new THREE.MeshStandardMaterial({
-                color: 0x555555,
-                roughness: 0.8,
-                metalness: 0.2
-            });
-            for (let i = 0; i < 200; i++) {
-                const x = (Math.random() > 0.5 ? 1 : -1) * (50 + Math.random() * 300);
-                const z = -2000 + Math.random() * 4000;
-                const y = Math.random() * 2;
-                const scale = 0.5 + Math.random() * 3;
-                const rock = new THREE.Mesh(rockGeometry, rockMaterial);
-                rock.position.set(x, y, z);
-                rock.scale.set(scale, scale, scale);
-                rock.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
-                rock.castShadow = true;
-                scene.add(rock);
-            }
-        }
-        // Création des ponts
-        function createBridges() {
-            // Pont principal
-            const bridgeGeometry = new THREE.BoxGeometry(30, 5, 100);
-            const bridgeMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
-            const bridge = new THREE.Mesh(bridgeGeometry, bridgeMaterial);
-            bridge.position.set(0, 2.5, 0);
-            bridge.castShadow = true;
-            bridge.receiveShadow = true;
-            scene.add(bridge);
-            // Garde-fous
-            const railingGeometry = new THREE.BoxGeometry(1, 1, 100);
-            const railingMaterial = new THREE.MeshStandardMaterial({ color: 0x777777 });
-            const railingLeft = new THREE.Mesh(railingGeometry, railingMaterial);
-            railingLeft.position.set(15.5, 3, 0);
-            scene.add(railingLeft);
-            const railingRight = new THREE.Mesh(railingGeometry, railingMaterial);
-            railingRight.position.set(-15.5, 3, 0);
-            scene.add(railingRight);
-            // Piliers
-            const pillarGeometry = new THREE.CylinderGeometry(2, 2, 10, 8);
-            for (let i = -40; i <= 40; i += 20) {
-                const pillar = new THREE.Mesh(pillarGeometry, bridgeMaterial);
-                pillar.position.set(0, -5, i);
-                scene.add(pillar);
-            }
-        }
-        // Création des feux de circulation
-        function createTrafficLights() {
-            const poleGeometry = new THREE.CylinderGeometry(0.2, 0.2, 5);
-            const poleMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
-            const lightGeometry = new THREE.BoxGeometry(1, 3, 0.5);
-            const lightMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
-            for (let i = 0; i < 10; i++) {
-                const z = -500 + i * 500;
-                const pole = new THREE.Mesh(poleGeometry, poleMaterial);
-                pole.position.set(10, 2.5, z);
-                scene.add(pole);
-                const light = new THREE.Mesh(lightGeometry, lightMaterial);
-                light.position.set(10, 5, z);
-                scene.add(light);
-            }
         }
         // Création du camion
@@ -849,188 +548,6 @@
             // Ajout du camion à la scène
             scene.add(truck);
             truck.position.set(0, 2, 0);
-            // Vue intérieure
-            const interiorGeometry = new THREE.BoxGeometry(2.5, 2, 2.5);
-            const interiorMaterial = new THREE.MeshStandardMaterial({
-                color: 0x555555,
-                side: THREE.BackSide
-            });
-            const interior = new THREE.Mesh(interiorGeometry, interiorMaterial);
-            interior.position.set(0, 2, 0);
-            truck.add(interior);
-            // Volant
-            const steeringWheelGeometry = new THREE.TorusGeometry(0.3, 0.05, 16, 32);
-            const steeringWheelMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
-            const steeringWheel = new THREE.Mesh(steeringWheelGeometry, steeringWheelMaterial);
-            steeringWheel.position.set(0.5, 2.5, 0.5);
-            steeringWheel.rotation.z = Math.PI / 2;
-            truck.add(steeringWheel);
-            // Siège
-            const seatGeometry = new THREE.BoxGeometry(0.8, 0.2, 0.8);
-            const seatMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
-            const seat = new THREE.Mesh(seatGeometry, seatMaterial);
-            seat.position.set(0, 1.5, 0);
-            truck.add(seat);
-            // Tableau de bord
-            const dashboardGeometry = new THREE.BoxGeometry(2.5, 0.5, 0.1);
-            const dashboardMaterial = new THREE.MeshStandardMaterial({ color: 0x111111 });
-            const dashboard = new THREE.Mesh(dashboardGeometry, dashboardMaterial);
-            dashboard.position.set(0, 2, 1.2);
-            truck.add(dashboard);
-            // Rétroviseurs
-            const mirrorGeometry = new THREE.BoxGeometry(0.5, 0.2, 0.1);
-            const mirrorMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
-            const leftMirror = new THREE.Mesh(mirrorGeometry, mirrorMaterial);
-            leftMirror.position.set(1.8, 2.5, 0.5);
-            truck.add(leftMirror);
-            const rightMirror = new THREE.Mesh(mirrorGeometry, mirrorMaterial);
-            rightMirror.position.set(-1.8, 2.5, 0.5);
-            truck.add(rightMirror);
-        }
-        // Configuration des rétroviseurs
-        function setupMirrors() {
-            // Rétroviseur gauche
-            leftMirrorTexture = new THREE.WebGLRenderTarget(512, 256, {
-                minFilter: THREE.LinearFilter,
-                magFilter: THREE.LinearFilter,
-                format: THREE.RGBFormat
-            });
-            leftMirrorCamera = new THREE.PerspectiveCamera(60, 2, 0.1, 1000);
-            leftMirrorCamera.position.set(1.8, 2.5, 0.5);
-            leftMirrorCamera.rotation.y = Math.PI / 2;
-            const mirrorPlane = new THREE.PlaneGeometry(1.5, 0.8);
-            const mirrorMaterial = new THREE.MeshBasicMaterial({
-                map: leftMirrorTexture.texture,
-                side: THREE.DoubleSide
-            });
-            const mirrorMesh = new THREE.Mesh(mirrorPlane, mirrorMaterial);
-            mirrorMesh.position.set(2.5, 2.5, 0);
-            mirrorMesh.rotation.y = Math.PI / 2;
-            truck.add(mirrorMesh);
-        }
-        // Création du trafic
-        function createTraffic() {
-            const carColors = [
-                0xff0000, 0x00ff00, 0x0000ff, 0xffff00,
-                0xff00ff, 0x00ffff, 0xffffff, 0xaaaaaa
-            ];
-            // Création de 20 voitures
-            for (let i = 0; i < 20; i++) {
-                const car = new THREE.Group();
-                // Corps de la voiture
-                const bodyGeometry = new THREE.BoxGeometry(2, 1, 4);
-                const bodyMaterial = new THREE.MeshStandardMaterial({
-                    color: carColors[Math.floor(Math.random() * carColors.length)],
-                    roughness: 0.5,
-                    metalness: 0.5
-                });
-                const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
-                body.position.y = 1;
-                body.castShadow = true;
-                body.receiveShadow = true;
-                car.add(body);
-                // Vitres
-                const windowGeometry = new THREE.BoxGeometry(1.8, 0.6, 3.8);
-                const windowMaterial = new THREE.MeshStandardMaterial({
-                    color: 0x7ec0ee,
-                    transparent: true,
-                    opacity: 0.7,
-                    roughness: 0.1,
-                    metalness: 0.9
-                });
-                const windows = new THREE.Mesh(windowGeometry, windowMaterial);
-                windows.position.y = 1.3;
-                car.add(windows);
-                // Roues
-                const wheelGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.3, 16);
-                const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
-                const wheelFL = new THREE.Mesh(wheelGeometry, wheelMaterial);
-                wheelFL.rotation.z = Math.PI / 2;
-                wheelFL.position.set(1, 0.4, 1.5);
-                car.add(wheelFL);
-                const wheelFR = new THREE.Mesh(wheelGeometry, wheelMaterial);
-                wheelFR.rotation.z = Math.PI / 2;
-                wheelFR.position.set(-1, 0.4, 1.5);
-                car.add(wheelFR);
-                const wheelRL = new THREE.Mesh(wheelGeometry, wheelMaterial);
-                wheelRL.rotation.z = Math.PI / 2;
-                wheelRL.position.set(1, 0.4, -1.5);
-                car.add(wheelRL);
-                const wheelRR = new THREE.Mesh(wheelGeometry, wheelMaterial);
-                wheelRR.rotation.z = Math.PI / 2;
-                wheelRR.position.set(-1, 0.4, -1.5);
-                car.add(wheelRR);
-                // Position aléatoire sur la route
-                const lane = Math.random() > 0.5 ? 1 : -1;
-                const z = -1000 + Math.random() * 2000;
-                const speed = 5 + Math.random() * 10;
-                car.position.set(lane * 8, 0.4, z);
-                car.userData.speed = speed;
-                car.userData.lane = lane;
-                scene.add(car);
-                trafficCars.push(car);
-            }
-        }
-        // Mise à jour du trafic
-        function updateTraffic(delta) {
-            trafficLightTimer += delta;
-            // Changement des feux de circulation
-            if (trafficLightTimer > 10) {
-                trafficLightTimer = 0;
-                trafficLightState = trafficLightState === 'red' ? 'green' : 'red';
-                // Mise à jour de l'UI
-                document.querySelector('.light.red').classList.toggle('active', trafficLightState === 'red');
-                document.querySelector('.light.yellow').classList.toggle('active', false);
-                document.querySelector('.light.green').classList.toggle('active', trafficLightState === 'green');
-            } else if (trafficLightTimer > 8 && trafficLightState === 'green') {
-                document.querySelector('.light.yellow').classList.toggle('active', true);
-                document.querySelector('.light.green').classList.toggle('active', false);
-            }
-            // Mise à jour des voitures
-            trafficCars.forEach(car => {
-                // Déplacement
-                if (trafficLightState === 'green' || car.position.z < -100 || car.position.z > 100) {
-                    car.position.z += car.userData.speed * delta * (car.userData.lane === 1 ? 1 : -1);
-                }
-                // Réinitialisation si hors de la vue
-                if (car.position.z > 1500 || car.position.z < -1500) {
-                    car.position.z = car.userData.lane === 1 ? -1500 : 1500;
-                }
-                // Rotation des roues
-                car.children.forEach(child => {
-                    if (child.geometry?.type === 'CylinderGeometry') {
-                        child.rotation.x += car.userData.speed * delta * 2;
-                    }
-                });
-            });
         }
         // Configuration des événements
@@ -1044,7 +561,6 @@
                 // Klaxon
                 if (event.key.toLowerCase() === 'h' && !hornPlaying) {
                     hornPlaying = true;
-                    // Ici vous pourriez ajouter un son de klaxon
                     setTimeout(() => { hornPlaying = false; }, 1000);
                 }
@@ -1072,13 +588,13 @@
             // Contrôles UI
             document.getElementById('toggle-camera').addEventListener('click', toggleCamera);
             document.getElementById('toggle-lights').addEventListener('click', toggleLights);
-            document.getElementById('toggle-traffic').addEventListener('click', toggleTraffic);
             document.getElementById('reset-truck').addEventListener('click', resetTruck);
-            // Contrôles météo
-            document.getElementById('weather-sunny').addEventListener('click', () => setWeather('sunny'));
-            document.getElementById('weather-rainy').addEventListener('click', () => setWeather('rainy'));
-            document.getElementById('weather-foggy').addEventListener('click', () => setWeather('foggy'));
             // Animation des contrôles
             function updateControls(delta) {
@@ -1142,9 +658,6 @@
                 document.getElementById('time').textContent =
                     (minutes < 10 ? '0' + minutes : minutes) + ':' +
                     (seconds < 10 ? '0' + seconds : seconds);
-                // Mise à jour du GPS
-                updateGPS();
             }
             // Vitesse maximale en fonction de la vitesse
@@ -1175,38 +688,6 @@
                 }
             }
-            // Mise à jour des informations GPS
-            function updateGPS() {
-                let location = "Campagne - Route Départementale";
-                let nextTurn = "Prochain virage: 2.5km";
-                let speedLimit = "Limite: 90 km/h";
-                if (distance < 5) {
-                    location = "Centre de Formation";
-                    speedLimit = "Limite: 30 km/h";
-                } else if (distance < 20) {
-                    location = "Route Départementale";
-                    nextTurn = "Prochain virage: 1.2km";
-                    speedLimit = "Limite: 70 km/h";
-                } else if (distance < 50) {
-                    location = "Périphérique";
-                    nextTurn = "Sortie: 500m";
-                    speedLimit = "Limite: 110 km/h";
-                } else if (distance < 80) {
-                    location = "Pont sur la rivière";
-                    nextTurn = "Virage serré: 300m";
-                    speedLimit = "Limite: 60 km/h";
-                } else if (distance < 120) {
-                    location = "Zone Montagneuse";
-                    nextTurn = "Descente: 1km";
-                    speedLimit = "Limite: 80 km/h";
-                }
-                document.getElementById('gps-location').textContent = location;
-                document.getElementById('gps-next').textContent = nextTurn;
-                document.getElementById('gps-speed').textContent = speedLimit;
-            }
             // Rafraîchissement des contrôles
             let lastUpdateTime = 0;
             function updateControlsLoop(timestamp) {
@@ -1225,7 +706,6 @@
         // Basculer les phares
         function toggleLights() {
             lightsOn = !lightsOn;
-            // Ici vous pourriez activer/désactiver les lumières des phares
             scene.children.forEach(child => {
                 if (child.type === 'SpotLight') {
                     child.visible = lightsOn;
@@ -1234,18 +714,22 @@
             document.getElementById('toggle-lights').textContent = lightsOn ? 'ÉTEINDRE' : 'PHARES';
         }
-        // Basculer le trafic
-        function toggleTraffic() {
-            trafficEnabled = !trafficEnabled;
-            document.getElementById('toggle-traffic').textContent =
-                trafficEnabled ? 'DÉSACTIVER TRAFIC' : 'ACTIVER TRAFIC';
-        }
         // Basculer la caméra
         function toggleCamera() {
             cameraMode = cameraMode === 'interior' ? 'exterior' : 'interior';
             document.getElementById('toggle-camera').textContent =
-                cameraMode === 'interior' ? 'VUE EXTERNE' : 'VUE INTERNE';
         }
         // Réinitialiser le camion
@@ -1260,105 +744,6 @@
             document.getElementById('gear-indicator').textContent = gear;
         }
-        // Changer la météo
-        function setWeather(newWeather) {
-            weather = newWeather;
-            // Mettre à jour le ciel et l'éclairage
-            const skyUniforms = sky.material.uniforms;
-            switch(weather) {
-                case 'sunny':
-                    skyUniforms['turbidity'].value = 2;
-                    skyUniforms['rayleigh'].value = 2;
-                    skyUniforms['mieCoefficient'].value = 0.005;
-                    scene.fog.density = 0.0005;
-                    scene.background = new THREE.Color(0x87CEEB);
-                    break;
-                case 'rainy':
-                    skyUniforms['turbidity'].value = 10;
-                    skyUniforms['rayleigh'].value = 3;
-                    skyUniforms['mieCoefficient'].value = 0.05;
-                    scene.fog.density = 0.003;
-                    scene.background = new THREE.Color(0x666666);
-                    createRain();
-                    break;
-                case 'foggy':
-                    skyUniforms['turbidity'].value = 20;
-                    skyUniforms['rayleigh'].value = 1;
-                    skyUniforms['mieCoefficient'].value = 0.1;
-                    scene.fog.density = 0.01;
-                    scene.background = new THREE.Color(0x999999);
-                    break;
-            }
-        }
-        // Créer l'effet de pluie
-        function createRain() {
-            // Supprimer les anciennes particules de pluie
-            rainParticles.forEach(particle => scene.remove(particle));
-            rainParticles = [];
-            // Créer 1000 particules de pluie
-            const rainGeometry = new THREE.BufferGeometry();
-            const positions = [];
-            const velocities = [];
-            for (let i = 0; i < 1000; i++) {
-                positions.push(
-                    Math.random() * 200 - 100,  // x
-                    Math.random() * 100 + 50,    // y
-                    Math.random() * 200 - 100   // z
-                );
-                velocities.push(
-                    0,                          // vx
-                    -5 - Math.random() * 10,    // vy
-                    0                           // vz
-                );
-            }
-            rainGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
-            rainGeometry.setAttribute('velocity', new THREE.Float32BufferAttribute(velocities, 3));
-            const rainMaterial = new THREE.PointsMaterial({
-                color: 0xAAAAAA,
-                size: 0.1,
-                transparent: true,
-                opacity: 0.8
-            });
-            const rain = new THREE.Points(rainGeometry, rainMaterial);
-            scene.add(rain);
-            rainParticles.push(rain);
-        }
-        // Mettre à jour la pluie
-        function updateRain(delta) {
-            rainParticles.forEach(rain => {
-                const positions = rain.geometry.attributes.position.array;
-                const velocities = rain.geometry.attributes.velocity.array;
-                for (let i = 0; i < positions.length; i += 3) {
-                    // Mettre à jour la position
-                    positions[i] += velocities[i] * delta;
-                    positions[i+1] += velocities[i+1] * delta;
-                    positions[i+2] += velocities[i+2] * delta;
-                    // Réinitialiser les particules qui sont tombées
-                    if (positions[i+1] < 0) {
-                        positions[i] = Math.random() * 200 - 100;
-                        positions[i+1] = Math.random() * 100 + 50;
-                        positions[i+2] = Math.random() * 200 - 100;
-                    }
-                }
-                rain.geometry.attributes.position.needsUpdate = true;
-            });
-        }
         // Animation
         function animate() {
             requestAnimationFrame(animate);
@@ -1367,21 +752,6 @@
             if (!assetsLoaded) return;
-            // Mise à jour de l'eau
-            if (water) {
-                water.material.uniforms['time'].value += delta;
-            }
-            // Mise à jour du trafic
-            if (trafficEnabled) {
-                updateTraffic(delta);
-            }
-            // Mise à jour de la pluie
-            if (weather === 'rainy') {
-                updateRain(delta);
-            }
             // Déplacement du camion
             if (truck) {
                 truck.position.z += speed * delta;
@@ -1403,8 +773,9 @@
                     }
                 });
-                // Positionnement de la caméra
                 if (cameraMode === 'interior') {
                     camera.position.set(
                         truck.position.x + 0.5 * Math.sin(truck.rotation.y),
                         truck.position.y + 2,
@@ -1416,38 +787,44 @@
                         truck.position.z + 10
                     );
                 } else {
-                    camera.position.set(
-                        truck.position.x + 10 * Math.sin(truck.rotation.y),
-                        truck.position.y + 10,
-                        truck.position.z - 15 + 5 * Math.sin(truck.rotation.y)
-                    );
-                    camera.lookAt(truck.position);
-                }
-                // Mise à jour du rétroviseur
-                updateMirror();
-            }
-            // Mise à jour du soleil
-            if (sky) {
-                const theta = Math.PI * (time / 60 / 12 - 0.5);
-                const phi = 2 * Math.PI * (time / 60 / 24);
-                sun.x = Math.cos(phi);
-                sun.y = Math.sin(phi) * Math.sin(theta);
-                sun.z = Math.sin(phi) * Math.cos(theta);
-                sky.material.uniforms['sunPosition'].value.copy(sun);
-                if (water) {
-                    water.material.uniforms['sunDirection'].value.copy(sun).normalize();
-                }
-                // Mise à jour des lumières directionnelles
-                scene.children.forEach(child => {
-                    if (child.type === 'DirectionalLight') {
-                        child.position.copy(sun).multiplyScalar(100);
                     }
-                });
             }
             // Mise à jour des contrôles
@@ -1457,37 +834,11 @@
             renderer.render(scene, camera);
         }
-        // Mise à jour du rétroviseur
-        function updateMirror() {
-            if (leftMirrorCamera && leftMirrorTexture) {
-                // Position et orientation de la caméra du rétroviseur
-                leftMirrorCamera.position.copy(truck.position).add(new THREE.Vector3(1.8, 2.5, 0.5));
-                leftMirrorCamera.rotation.copy(truck.rotation);
-                leftMirrorCamera.rotation.y += Math.PI / 2;
-                // Rendu de la vue du rétroviseur
-                renderer.setRenderTarget(leftMirrorTexture);
-                renderer.clear();
-                renderer.render(scene, leftMirrorCamera);
-                renderer.setRenderTarget(null);
-                // Mise à jour de la texture dans l'UI
-                const mirrorUI = document.getElementById('left-mirror');
-                mirrorUI.style.backgroundImage = `url(${leftMirrorTexture.texture.image.src})`;
-                mirrorUI.style.backgroundSize = 'cover';
-            }
-        }
         // Redimensionnement
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
-            if (leftMirrorCamera) {
-                leftMirrorCamera.aspect = 2;
-                leftMirrorCamera.updateProjectionMatrix();
-            }
         });
         // Démarrer l'application

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simulateur de Camion - Vues Extérieures</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
     <style>
         body {
             margin: 0;
         .menu-button:hover {
             background: rgba(255, 255, 255, 0.3);
         }
+        .view-buttons {
             position: absolute;
             top: 20px;
             right: 20px;
             background: rgba(0, 0, 0, 0.7);
             border-radius: 10px;
+            padding: 10px;
             backdrop-filter: blur(5px);
             border: 1px solid rgba(255, 255, 255, 0.2);
+            pointer-events: all;
         }
         .loading-screen {
             position: absolute;
             width: 0%;
             transition: width 0.3s;
         }
     </style>
 </head>
 <body>
             <div class="steering-wheel" id="steering-wheel"></div>
             <div class="gear-indicator" id="gear-indicator">N</div>
             <div class="menu">
+                <button class="menu-button" id="toggle-camera">VUE INTÉRIEURE</button>
                 <button class="menu-button" id="toggle-lights">PHARES</button>
                 <button class="menu-button" id="reset-truck">RÉINITIALISER</button>
             </div>
+            <div class="view-buttons">
+                <button class="menu-button" id="view-behind">VUE ARRIÈRE</button>
+                <button class="menu-button" id="view-side">VUE LATÉRALE</button>
+                <button class="menu-button" id="view-top">VUE AÉRIENNE</button>
+                <button class="menu-button" id="view-free">CAMÉRA LIBRE</button>
             </div>
         </div>
         <div class="loading-screen" id="loading-screen">
             <h1 class="text-2xl font-bold mb-4">SIMULATEUR DE CAMION - PAYSAGES</h1>
         let scene, camera, renderer, truck, controls;
         let speed = 0, rpm = 1000, fuel = 100, time = 0, distance = 0;
         let steeringAngle = 0, gear = 'N';
+        let lightsOn = false, hornPlaying = false;
         let cameraMode = 'interior';
+        let currentView = 'free'; // free, behind, side, top
         let lastTime = 0;
         let loadingProgress = 0;
         let assetsLoaded = false;
         let clock = new THREE.Clock();
         // Initialisation
         function init() {
             // Configuration des événements
             setupEventListeners();
             // Animation
             animate();
         }
                 "Initialisation du système...",
                 "Chargement des textures...",
                 "Création de l'environnement...",
                 "Finalisation..."
             ];
         // Configuration des lumières
         function setupLights() {
             // Lumière directionnelle principale
             const sunlight = new THREE.DirectionalLight(0xffffff, 1);
             sunlight.position.set(100, 100, 50);
         function createEnvironment() {
             // Sol avec texture haute résolution
             const groundGeometry = new THREE.PlaneGeometry(10000, 10000);
             const groundMaterial = new THREE.MeshStandardMaterial({
+                color: 0x3a5f0b,
                 roughness: 0.8,
                 metalness: 0.2
             });
                 scene.add(line);
             }
             // Paysage naturel détaillé
             createNaturalFeatures();
         }
         // Création des éléments naturels améliorés
                 scene.add(mountain);
             }
         }
         // Création du camion
             // Ajout du camion à la scène
             scene.add(truck);
             truck.position.set(0, 2, 0);
         }
         // Configuration des événements
                 // Klaxon
                 if (event.key.toLowerCase() === 'h' && !hornPlaying) {
                     hornPlaying = true;
                     setTimeout(() => { hornPlaying = false; }, 1000);
                 }
             // Contrôles UI
             document.getElementById('toggle-camera').addEventListener('click', toggleCamera);
             document.getElementById('toggle-lights').addEventListener('click', toggleLights);
             document.getElementById('reset-truck').addEventListener('click', resetTruck);
+            // Boutons de vue
+            document.getElementById('view-behind').addEventListener('click', () => setView('behind'));
+            document.getElementById('view-side').addEventListener('click', () => setView('side'));
+            document.getElementById('view-top').addEventListener('click', () => setView('top'));
+            document.getElementById('view-free').addEventListener('click', () => setView('free'));
             // Animation des contrôles
             function updateControls(delta) {
                 document.getElementById('time').textContent =
                     (minutes < 10 ? '0' + minutes : minutes) + ':' +
                     (seconds < 10 ? '0' + seconds : seconds);
             }
             // Vitesse maximale en fonction de la vitesse
                 }
             }
             // Rafraîchissement des contrôles
             let lastUpdateTime = 0;
             function updateControlsLoop(timestamp) {
         // Basculer les phares
         function toggleLights() {
             lightsOn = !lightsOn;
             scene.children.forEach(child => {
                 if (child.type === 'SpotLight') {
                     child.visible = lightsOn;
             document.getElementById('toggle-lights').textContent = lightsOn ? 'ÉTEINDRE' : 'PHARES';
         }
         // Basculer la caméra
         function toggleCamera() {
             cameraMode = cameraMode === 'interior' ? 'exterior' : 'interior';
             document.getElementById('toggle-camera').textContent =
+                cameraMode === 'interior' ? 'VUE EXTÉRIEURE' : 'VUE INTÉRIEURE';
+        }
+        // Changer la vue
+        function setView(view) {
+            currentView = view;
+            // Mettre à jour l'état des boutons
+            document.getElementById('view-behind').classList.toggle('bg-blue-500', view === 'behind');
+            document.getElementById('view-side').classList.toggle('bg-blue-500', view === 'side');
+            document.getElementById('view-top').classList.toggle('bg-blue-500', view === 'top');
+            document.getElementById('view-free').classList.toggle('bg-blue-500', view === 'free');
         }
         // Réinitialiser le camion
             document.getElementById('gear-indicator').textContent = gear;
         }
         // Animation
         function animate() {
             requestAnimationFrame(animate);
             if (!assetsLoaded) return;
             // Déplacement du camion
             if (truck) {
                 truck.position.z += speed * delta;
                     }
                 });
+                // Positionnement de la caméra en fonction de la vue
                 if (cameraMode === 'interior') {
+                    // Vue intérieure
                     camera.position.set(
                         truck.position.x + 0.5 * Math.sin(truck.rotation.y),
                         truck.position.y + 2,
                         truck.position.z + 10
                     );
                 } else {
+                    // Vue extérieure avec différentes perspectives
+                    switch(currentView) {
+                        case 'behind':
+                            // Vue arrière
+                            camera.position.set(
+                                truck.position.x + 5 * Math.sin(truck.rotation.y),
+                                truck.position.y + 5,
+                                truck.position.z - 15 + 5 * Math.sin(truck.rotation.y)
+                            );
+                            camera.lookAt(truck.position);
+                            break;
+                        case 'side':
+                            // Vue latérale
+                            camera.position.set(
+                                truck.position.x + 15,
+                                truck.position.y + 5,
+                                truck.position.z
+                            );
+                            camera.lookAt(truck.position);
+                            break;
+                        case 'top':
+                            // Vue aérienne
+                            camera.position.set(
+                                truck.position.x,
+                                truck.position.y + 25,
+                                truck.position.z - 10
+                            );
+                            camera.lookAt(truck.position);
+                            break;
+                        case 'free':
+                        default:
+                            // Caméra libre (contrôlée par OrbitControls)
+                            break;
                     }
+                }
             }
             // Mise à jour des contrôles
             renderer.render(scene, camera);
         }
         // Redimensionnement
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
         // Démarrer l'application

prompts.txt CHANGED Viewed

@@ -7,4 +7,5 @@ JE VEUX QUIL TOURNE PLUS VISTE
 ecrire les mots :   BAVOL JEAN ERIC EN GROS CARACTERE AVEC DES PARTICULE QUI FAIT LE TOUR DU GLOBE
 CREER MOI UN VRAIS SIMULATEUR DE CONDUITE DES  VRAIS CAMION   DAND UN CENTRE DE FORMATION
 JE VEUT DES VRAI PAYSAGE ET DES VRAIS CIRCULATION EN TEMP REEL
-JJE VEUX CONDUIRE  SUR LA ROUTE AVEC DE BEAUX PAYSAGE

 ecrire les mots :   BAVOL JEAN ERIC EN GROS CARACTERE AVEC DES PARTICULE QUI FAIT LE TOUR DU GLOBE
 CREER MOI UN VRAIS SIMULATEUR DE CONDUITE DES  VRAIS CAMION   DAND UN CENTRE DE FORMATION
 JE VEUT DES VRAI PAYSAGE ET DES VRAIS CIRCULATION EN TEMP REEL
+JJE VEUX CONDUIRE  SUR LA ROUTE AVEC DE BEAUX PAYSAGE
+JE VEUX D AUTRE VUE EXTERRIEUR ACE