Hugging Face's logo

Spaces:
docto41
/
globe-future
Running

App Files Community
docto41 commited on
Commit
af14855
·
verified ·
1 Parent(s): 4139056

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +1412 -240
  2. prompts.txt +4 -1
index.html CHANGED
@@ -3,324 +3,1496 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Globe avec BAVOL JEAN ERIC</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 
 
 
 
 
9
  <style>
10
  body {
11
  margin: 0;
12
  overflow: hidden;
13
- background-color: #000;
14
  }
15
- canvas {
16
- display: block;
 
 
17
  }
18
- #info {
19
  position: absolute;
20
- top: 20px;
 
21
  width: 100%;
22
- text-align: center;
23
- color: white;
24
- font-family: 'Arial', sans-serif;
25
  pointer-events: none;
26
- text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;
27
- font-size: 2rem;
28
- letter-spacing: 2px;
29
- text-transform: uppercase;
30
- opacity: 0.8;
31
  }
32
- .controls {
33
  position: absolute;
34
- bottom: 30px;
35
  left: 50%;
36
  transform: translateX(-50%);
 
 
 
37
  display: flex;
38
- gap: 15px;
39
- z-index: 100;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  }
41
- button {
42
- background: rgba(0, 255, 255, 0.3);
43
  color: white;
44
- border: 1px solid #0ff;
45
- padding: 10px 20px;
46
- border-radius: 25px;
 
47
  cursor: pointer;
48
- transition: all 0.3s;
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  backdrop-filter: blur(5px);
50
- font-weight: bold;
51
- box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
 
 
 
 
52
  }
53
- button:hover {
54
- background: rgba(0, 255, 255, 0.6);
55
- box-shadow: 0 0 20px #0ff;
56
- transform: scale(1.05);
57
  }
58
- .glow {
 
 
 
 
59
  position: absolute;
 
 
60
  width: 100%;
61
  height: 100%;
62
- background: radial-gradient(circle at center, rgba(0, 255, 255, 0.15) 0%, transparent 70%);
63
- pointer-events: none;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  }
65
  </style>
66
  </head>
67
  <body>
68
- <div class="glow"></div>
69
- <div id="info">BAVOL JEAN ERIC</div>
70
- <div class="controls">
71
- <button id="speedUp">TURBO</button>
72
- <button id="slowDown">RALENTIR</button>
73
- <button id="changeColor">CHANGER COULEURS</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  </div>
75
 
76
  <script>
77
- // Initialisation de la scène Three.js
78
- const scene = new THREE.Scene();
79
- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
80
- const renderer = new THREE.WebGLRenderer({ antialias: true });
81
- renderer.setSize(window.innerWidth, window.innerHeight);
82
- renderer.setPixelRatio(window.devicePixelRatio);
83
- renderer.setClearColor(0x000000);
84
- document.body.appendChild(renderer.domElement);
 
 
 
 
 
 
 
 
 
 
85
 
86
- // Configuration de la caméra
87
- camera.position.z = 40;
 
 
 
 
 
88
 
89
- // Paramètres du globe
90
- const globeRadius = 15;
91
- const particleCount = 5000;
92
- const nameParticleCount = 500; // Plus de particules pour les lettres
93
- let rotationSpeed = 0.02;
94
- let colorPalette = [
95
- 0xff6600, 0xff3300, 0xff9900, 0xffff00, 0xffcc00
96
- ];
97
-
98
- // Création des particules pour le globe
99
- const particlesGeometry = new THREE.BufferGeometry();
100
- const particlesMaterial = new THREE.PointsMaterial({
101
- size: 0.1,
102
- vertexColors: true,
103
- transparent: true,
104
- opacity: 0.8,
105
- blending: THREE.AdditiveBlending,
106
- sizeAttenuation: true
107
- });
108
-
109
- const particlesPositions = new Float32Array(particleCount * 3);
110
- const particlesColors = new Float32Array(particleCount * 3);
111
-
112
- for (let i = 0; i < particleCount; i++) {
113
- const radius = globeRadius * (0.9 + Math.random() * 0.2);
114
- const theta = Math.random() * Math.PI * 2;
115
- const phi = Math.acos(2 * Math.random() - 1);
 
 
 
 
 
116
 
117
- particlesPositions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
118
- particlesPositions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
119
- particlesPositions[i * 3 + 2] = radius * Math.cos(phi);
120
 
121
- const color = new THREE.Color(colorPalette[Math.floor(Math.random() * colorPalette.length)]);
122
- particlesColors[i * 3] = color.r;
123
- particlesColors[i * 3 + 1] = color.g;
124
- particlesColors[i * 3 + 2] = color.b;
 
 
 
 
 
 
 
 
 
 
 
 
125
  }
126
-
127
- particlesGeometry.setAttribute('position', new THREE.BufferAttribute(particlesPositions, 3));
128
- particlesGeometry.setAttribute('color', new THREE.BufferAttribute(particlesColors, 3));
129
-
130
- const particles = new THREE.Points(particlesGeometry, particlesMaterial);
131
- scene.add(particles);
132
-
133
- // Création des particules pour le nom "BAVOL JEAN ERIC"
134
- const nameGeometry = new THREE.BufferGeometry();
135
- const nameMaterial = new THREE.PointsMaterial({
136
- size: 0.4,
137
- color: 0xff6600,
138
- transparent: true,
139
- opacity: 1,
140
- blending: THREE.AdditiveBlending,
141
- sizeAttenuation: true
142
- });
143
-
144
- const namePositions = new Float32Array(nameParticleCount * 3);
145
- const nameColors = new Float32Array(nameParticleCount * 3);
146
- const nameSizes = new Float32Array(nameParticleCount);
147
-
148
- // Configuration des lettres
149
- const letters = "BAVOL JEAN ERIC";
150
- const letterSpacing = 2.5;
151
- const letterHeight = 3;
152
- const letterWidth = 2;
153
- const nameRadius = globeRadius * 1.8;
154
 
155
- // Fonction pour créer une lettre à partir de points
156
- function createLetterPoints(letter, offsetX, offsetY, offsetZ) {
157
- const points = [];
158
- const canvas = document.createElement('canvas');
159
- const context = canvas.getContext('2d');
160
- canvas.width = 64;
161
- canvas.height = 64;
162
- context.font = "Bold 50px Arial";
163
- context.fillStyle = "white";
164
- context.textAlign = "center";
165
- context.textBaseline = "middle";
166
- context.fillText(letter, 32, 32);
167
-
168
- const imageData = context.getImageData(0, 0, 64, 64).data;
169
-
170
- for (let y = 0; y < 64; y++) {
171
- for (let x = 0; x < 64; x++) {
172
- const index = (y * 64 + x) * 4;
173
- if (imageData[index] > 0) {
174
- points.push({
175
- x: (x - 32) * 0.1 * letterWidth + offsetX,
176
- y: (32 - y) * 0.1 * letterHeight + offsetY,
177
- z: offsetZ
178
- });
179
  }
180
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  }
182
 
183
- return points;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
184
  }
185
-
186
- // Création des points pour chaque lettre
187
- let currentIndex = 0;
188
- const totalLetters = letters.length;
189
- const angleStep = (Math.PI * 2) / totalLetters;
190
 
191
- for (let i = 0; i < totalLetters; i++) {
192
- const letter = letters[i];
193
- if (letter === ' ') continue;
 
 
 
 
 
194
 
195
- const angle = angleStep * i;
196
- const x = nameRadius * Math.cos(angle);
197
- const y = nameRadius * Math.sin(angle);
198
- const z = (Math.random() - 0.5) * 2;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
 
200
- const letterPoints = createLetterPoints(letter, x, y, z);
 
 
 
 
 
 
201
 
202
- for (let j = 0; j < letterPoints.length && currentIndex < nameParticleCount; j++) {
203
- const point = letterPoints[j];
204
- const fireIntensity = 0.7 + Math.random() * 0.3;
205
 
206
- namePositions[currentIndex * 3] = point.x;
207
- namePositions[currentIndex * 3 + 1] = point.y;
208
- namePositions[currentIndex * 3 + 2] = point.z;
209
 
210
- // Couleur feu (orange/rouge/jaune)
211
- nameColors[currentIndex * 3] = 0.9 + Math.random() * 0.1;
212
- nameColors[currentIndex * 3 + 1] = 0.3 + Math.random() * 0.3;
213
- nameColors[currentIndex * 3 + 2] = Math.random() * 0.2;
 
 
214
 
215
- nameSizes[currentIndex] = 0.3 + Math.random() * 0.2;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
216
 
217
- currentIndex++;
 
 
 
 
 
218
  }
219
  }
220
-
221
- // Remplir les particules restantes avec des particules aléatoires autour des lettres
222
- for (let i = currentIndex; i < nameParticleCount; i++) {
223
- const angle = Math.random() * Math.PI * 2;
224
- const radius = nameRadius * (0.9 + Math.random() * 0.2);
 
 
 
 
 
 
 
 
 
 
225
 
226
- namePositions[i * 3] = radius * Math.cos(angle);
227
- namePositions[i * 3 + 1] = radius * Math.sin(angle);
228
- namePositions[i * 3 + 2] = (Math.random() - 0.5) * 2;
229
 
230
- // Couleur feu
231
- nameColors[i * 3] = 0.9 + Math.random() * 0.1;
232
- nameColors[i * 3 + 1] = 0.3 + Math.random() * 0.3;
233
- nameColors[i * 3 + 2] = Math.random() * 0.2;
234
 
235
- nameSizes[i] = 0.2 + Math.random() * 0.15;
 
 
 
 
 
 
 
236
  }
237
-
238
- nameGeometry.setAttribute('position', new THREE.BufferAttribute(namePositions, 3));
239
- nameGeometry.setAttribute('color', new THREE.BufferAttribute(nameColors, 3));
240
- nameGeometry.setAttribute('size', new THREE.BufferAttribute(nameSizes, 1));
241
-
242
- const nameParticles = new THREE.Points(nameGeometry, nameMaterial);
243
- scene.add(nameParticles);
244
-
245
- // Lumière centrale
246
- const pointLight = new THREE.PointLight(0xff6600, 1, 50);
247
- pointLight.position.set(0, 0, 0);
248
- scene.add(pointLight);
249
-
250
- const ambientLight = new THREE.AmbientLight(0x404040);
251
- scene.add(ambientLight);
252
-
253
- // Halo lumineux central
254
- const haloGeometry = new THREE.SphereGeometry(1, 32, 32);
255
- const haloMaterial = new THREE.MeshBasicMaterial({
256
- color: 0xff6600,
257
- transparent: true,
258
- opacity: 0.3,
259
- blending: THREE.AdditiveBlending
260
- });
261
- const halo = new THREE.Mesh(haloGeometry, haloMaterial);
262
- scene.add(halo);
263
-
264
- // Contrôles
265
- document.getElementById('speedUp').addEventListener('click', () => {
266
- rotationSpeed *= 1.5;
267
- });
268
-
269
- document.getElementById('slowDown').addEventListener('click', () => {
270
- rotationSpeed /= 1.5;
271
- });
272
-
273
- document.getElementById('changeColor').addEventListener('click', () => {
274
- // Nouvelles couleurs de feu
275
- colorPalette = [
276
- 0xff3300, 0xff6600, 0xff9900, 0xffcc00, 0xffff00,
277
- 0xff0066, 0xff0099, 0xff00cc, 0xff00ff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
278
  ];
279
 
280
- // Mettre à jour les couleurs des particules du globe
281
- const colors = particlesGeometry.attributes.color.array;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
 
283
- for (let i = 0; i < particleCount; i++) {
284
- const color = new THREE.Color(colorPalette[Math.floor(Math.random() * colorPalette.length)]);
285
- colors[i * 3] = color.r;
286
- colors[i * 3 + 1] = color.g;
287
- colors[i * 3 + 2] = color.b;
 
 
 
 
 
 
 
288
  }
289
 
290
- particlesGeometry.attributes.color.needsUpdate = true;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
291
 
292
- // Mettre à jour la couleur du halo
293
- haloMaterial.color.setHex(colorPalette[Math.floor(Math.random() * colorPalette.length)]);
294
- pointLight.color.setHex(colorPalette[Math.floor(Math.random() * colorPalette.length)]);
295
- });
296
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
297
  // Animation
298
  function animate() {
299
  requestAnimationFrame(animate);
300
 
301
- // Rotation du globe
302
- particles.rotation.x += rotationSpeed * 0.5;
303
- particles.rotation.y += rotationSpeed * 0.7;
 
 
 
 
 
 
 
 
 
 
304
 
305
- // Rotation des lettres autour du globe
306
- nameParticles.rotation.y -= rotationSpeed * 0.3;
 
 
307
 
308
- // Pulsation du halo
309
- halo.scale.x = 1 + Math.sin(Date.now() * 0.001) * 0.1;
310
- halo.scale.y = 1 + Math.sin(Date.now() * 0.0013) * 0.1;
311
- halo.scale.z = 1 + Math.sin(Date.now() * 0.0007) * 0.1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
312
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  renderer.render(scene, camera);
314
  }
315
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
316
  // Redimensionnement
317
  window.addEventListener('resize', () => {
318
  camera.aspect = window.innerWidth / window.innerHeight;
319
  camera.updateProjectionMatrix();
320
  renderer.setSize(window.innerWidth, window.innerHeight);
 
 
 
 
 
321
  });
322
-
323
- animate();
 
 
324
  </script>
325
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/globe-future" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
326
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Simulateur de Camion - Paysages Réalistes</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/DRACOLoader.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/objects/Water.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/objects/Sky.js"></script>
14
  <style>
15
  body {
16
  margin: 0;
17
  overflow: hidden;
18
+ font-family: 'Arial', sans-serif;
19
  }
20
+ #container {
21
+ position: relative;
22
+ width: 100vw;
23
+ height: 100vh;
24
  }
25
+ #ui {
26
  position: absolute;
27
+ top: 0;
28
+ left: 0;
29
  width: 100%;
30
+ height: 100%;
 
 
31
  pointer-events: none;
32
+ z-index: 100;
 
 
 
 
33
  }
34
+ .dashboard {
35
  position: absolute;
36
+ bottom: 20px;
37
  left: 50%;
38
  transform: translateX(-50%);
39
+ background: rgba(0, 0, 0, 0.7);
40
+ border-radius: 15px;
41
+ padding: 15px;
42
  display: flex;
43
+ gap: 30px;
44
+ backdrop-filter: blur(5px);
45
+ border: 1px solid rgba(255, 255, 255, 0.2);
46
+ }
47
+ .gauge {
48
+ display: flex;
49
+ flex-direction: column;
50
+ align-items: center;
51
+ color: white;
52
+ }
53
+ .gauge-value {
54
+ font-size: 1.5rem;
55
+ font-weight: bold;
56
+ margin-top: 5px;
57
+ color: #4ade80;
58
+ }
59
+ .gauge-label {
60
+ font-size: 0.8rem;
61
+ opacity: 0.8;
62
+ }
63
+ .steering-wheel {
64
+ position: absolute;
65
+ bottom: 120px;
66
+ left: 50%;
67
+ transform: translateX(-50%);
68
+ width: 120px;
69
+ height: 120px;
70
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="white" stroke-width="5"/><circle cx="50" cy="50" r="15" fill="none" stroke="white" stroke-width="5"/><path d="M50,5 L50,25 M50,75 L50,95 M5,50 L25,50 M75,50 L95,50" stroke="white" stroke-width="5"/></svg>') no-repeat center;
71
+ background-size: contain;
72
+ pointer-events: none;
73
+ }
74
+ .gear-indicator {
75
+ position: absolute;
76
+ bottom: 100px;
77
+ right: 30px;
78
+ background: rgba(0, 0, 0, 0.7);
79
+ color: white;
80
+ padding: 10px 15px;
81
+ border-radius: 8px;
82
+ font-size: 1.2rem;
83
+ font-weight: bold;
84
+ backdrop-filter: blur(5px);
85
+ border: 1px solid rgba(255, 255, 255, 0.2);
86
+ }
87
+ .menu {
88
+ position: absolute;
89
+ top: 20px;
90
+ left: 20px;
91
+ background: rgba(0, 0, 0, 0.7);
92
+ border-radius: 10px;
93
+ padding: 10px;
94
+ backdrop-filter: blur(5px);
95
+ border: 1px solid rgba(255, 255, 255, 0.2);
96
+ pointer-events: all;
97
  }
98
+ .menu-button {
99
+ background: rgba(255, 255, 255, 0.1);
100
  color: white;
101
+ border: none;
102
+ padding: 8px 15px;
103
+ border-radius: 5px;
104
+ margin: 5px;
105
  cursor: pointer;
106
+ transition: all 0.2s;
107
+ }
108
+ .menu-button:hover {
109
+ background: rgba(255, 255, 255, 0.3);
110
+ }
111
+ .instructions {
112
+ position: absolute;
113
+ top: 20px;
114
+ right: 20px;
115
+ background: rgba(0, 0, 0, 0.7);
116
+ border-radius: 10px;
117
+ padding: 15px;
118
+ color: white;
119
+ max-width: 300px;
120
  backdrop-filter: blur(5px);
121
+ border: 1px solid rgba(255, 255, 255, 0.2);
122
+ }
123
+ .instructions h3 {
124
+ margin-top: 0;
125
+ margin-bottom: 10px;
126
+ font-size: 1.2rem;
127
  }
128
+ .instructions ul {
129
+ padding-left: 20px;
130
+ margin: 0;
 
131
  }
132
+ .instructions li {
133
+ margin-bottom: 5px;
134
+ font-size: 0.9rem;
135
+ }
136
+ .loading-screen {
137
  position: absolute;
138
+ top: 0;
139
+ left: 0;
140
  width: 100%;
141
  height: 100%;
142
+ background: #111;
143
+ display: flex;
144
+ flex-direction: column;
145
+ justify-content: center;
146
+ align-items: center;
147
+ color: white;
148
+ z-index: 1000;
149
+ }
150
+ .progress-bar {
151
+ width: 300px;
152
+ height: 10px;
153
+ background: rgba(255, 255, 255, 0.2);
154
+ border-radius: 5px;
155
+ margin-top: 20px;
156
+ overflow: hidden;
157
+ }
158
+ .progress {
159
+ height: 100%;
160
+ background: #3b82f6;
161
+ width: 0%;
162
+ transition: width 0.3s;
163
+ }
164
+ .traffic-light {
165
+ position: absolute;
166
+ top: 50%;
167
+ right: 50px;
168
+ transform: translateY(-50%);
169
+ background: rgba(0, 0, 0, 0.7);
170
+ border-radius: 10px;
171
+ padding: 10px;
172
+ display: flex;
173
+ flex-direction: column;
174
+ gap: 5px;
175
+ backdrop-filter: blur(5px);
176
+ border: 1px solid rgba(255, 255, 255, 0.2);
177
+ }
178
+ .light {
179
+ width: 20px;
180
+ height: 20px;
181
+ border-radius: 50%;
182
+ background: #555;
183
+ }
184
+ .light.active {
185
+ box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
186
+ }
187
+ .light.red.active {
188
+ background: #ff0000;
189
+ }
190
+ .light.yellow.active {
191
+ background: #ffff00;
192
+ }
193
+ .light.green.active {
194
+ background: #00ff00;
195
+ }
196
+ .gps {
197
+ position: absolute;
198
+ top: 80px;
199
+ left: 20px;
200
+ background: rgba(0, 0, 0, 0.7);
201
+ border-radius: 10px;
202
+ padding: 10px;
203
+ color: white;
204
+ width: 200px;
205
+ height: 120px;
206
+ backdrop-filter: blur(5px);
207
+ border: 1px solid rgba(255, 255, 255, 0.2);
208
+ }
209
+ .gps h3 {
210
+ margin: 0 0 5px 0;
211
+ font-size: 0.9rem;
212
+ }
213
+ .gps p {
214
+ margin: 0;
215
+ font-size: 0.8rem;
216
+ }
217
+ .mirror {
218
+ position: absolute;
219
+ top: 20px;
220
+ left: 240px;
221
+ width: 150px;
222
+ height: 80px;
223
+ background: rgba(0, 0, 0, 0.3);
224
+ border: 1px solid rgba(255, 255, 255, 0.2);
225
+ border-radius: 5px;
226
+ overflow: hidden;
227
+ }
228
+ .weather-controls {
229
+ position: absolute;
230
+ top: 20px;
231
+ right: 340px;
232
+ background: rgba(0, 0, 0, 0.7);
233
+ border-radius: 10px;
234
+ padding: 10px;
235
+ backdrop-filter: blur(5px);
236
+ border: 1px solid rgba(255, 255, 255, 0.2);
237
+ pointer-events: all;
238
  }
239
  </style>
240
  </head>
241
  <body>
242
+ <div id="container">
243
+ <div id="ui">
244
+ <div class="dashboard">
245
+ <div class="gauge">
246
+ <div class="gauge-label">VITESSE</div>
247
+ <div id="speed" class="gauge-value">0 km/h</div>
248
+ </div>
249
+ <div class="gauge">
250
+ <div class="gauge-label">RPM</div>
251
+ <div id="rpm" class="gauge-value">0</div>
252
+ </div>
253
+ <div class="gauge">
254
+ <div class="gauge-label">RÉSERVOIR</div>
255
+ <div id="fuel" class="gauge-value">100%</div>
256
+ </div>
257
+ <div class="gauge">
258
+ <div class="gauge-label">TEMPS</div>
259
+ <div id="time" class="gauge-value">00:00</div>
260
+ </div>
261
+ <div class="gauge">
262
+ <div class="gauge-label">DISTANCE</div>
263
+ <div id="distance" class="gauge-value">0 km</div>
264
+ </div>
265
+ </div>
266
+ <div class="steering-wheel" id="steering-wheel"></div>
267
+ <div class="gear-indicator" id="gear-indicator">N</div>
268
+ <div class="menu">
269
+ <button class="menu-button" id="toggle-camera">VUE INTERNE</button>
270
+ <button class="menu-button" id="toggle-lights">PHARES</button>
271
+ <button class="menu-button" id="toggle-traffic">TRAFIC</button>
272
+ <button class="menu-button" id="reset-truck">RÉINITIALISER</button>
273
+ </div>
274
+ <div class="weather-controls">
275
+ <button class="menu-button" id="weather-sunny">SOLEIL</button>
276
+ <button class="menu-button" id="weather-rainy">PLUIE</button>
277
+ <button class="menu-button" id="weather-foggy">BRUME</button>
278
+ </div>
279
+ <div class="instructions">
280
+ <h3>CONTROLES</h3>
281
+ <ul>
282
+ <li>Z/Q/S/D : Conduire</li>
283
+ <li>Espace : Frein</li>
284
+ <li>R : Rétrogradez</li>
285
+ <li>F : Phares</li>
286
+ <li>H : Klaxon</li>
287
+ <li>C : Changer de caméra</li>
288
+ <li>Flèches : Regarder autour</li>
289
+ <li>1-6 : Vitesses</li>
290
+ </ul>
291
+ </div>
292
+ <div class="traffic-light" id="traffic-light">
293
+ <div class="light red"></div>
294
+ <div class="light yellow"></div>
295
+ <div class="light green"></div>
296
+ </div>
297
+ <div class="gps">
298
+ <h3>GPS</h3>
299
+ <p id="gps-location">Campagne - Route Départementale</p>
300
+ <p id="gps-next">Prochain virage: 500m</p>
301
+ <p id="gps-speed">Limite: 90 km/h</p>
302
+ </div>
303
+ <div class="mirror" id="left-mirror"></div>
304
+ </div>
305
+ <div class="loading-screen" id="loading-screen">
306
+ <h1 class="text-2xl font-bold mb-4">SIMULATEUR DE CAMION - PAYSAGES</h1>
307
+ <p class="mb-2">Chargement des ressources...</p>
308
+ <div class="progress-bar">
309
+ <div class="progress" id="progress-bar"></div>
310
+ </div>
311
+ <p class="mt-4 text-sm" id="loading-text">Initialisation du système...</p>
312
+ </div>
313
  </div>
314
 
315
  <script>
316
+ // Variables globales
317
+ let scene, camera, renderer, truck, controls;
318
+ let speed = 0, rpm = 1000, fuel = 100, time = 0, distance = 0;
319
+ let steeringAngle = 0, gear = 'N';
320
+ let lightsOn = false, hornPlaying = false, trafficEnabled = true;
321
+ let cameraMode = 'interior';
322
+ let lastTime = 0;
323
+ let loadingProgress = 0;
324
+ let assetsLoaded = false;
325
+ let trafficCars = [];
326
+ let trafficLightState = 'red';
327
+ let trafficLightTimer = 0;
328
+ let sky, sun, water;
329
+ let clock = new THREE.Clock();
330
+ let leftMirrorCamera, leftMirrorTexture;
331
+ let rainParticles = [];
332
+ let fog = null;
333
+ let weather = 'sunny'; // sunny, rainy, foggy
334
 
335
+ // Environnement amélioré
336
+ const environment = {
337
+ city: false,
338
+ highway: false,
339
+ countryside: true,
340
+ weather: 'sunny'
341
+ };
342
 
343
+ // Initialisation
344
+ function init() {
345
+ // Création de la scène
346
+ scene = new THREE.Scene();
347
+ scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
348
+
349
+ // Création de la caméra
350
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
351
+ camera.position.set(0, 5, -10);
352
+ camera.lookAt(0, 2, 10);
353
+
354
+ // Création du rendu
355
+ renderer = new THREE.WebGLRenderer({ antialias: true });
356
+ renderer.setSize(window.innerWidth, window.innerHeight);
357
+ renderer.shadowMap.enabled = true;
358
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
359
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
360
+ renderer.toneMappingExposure = 0.8;
361
+ document.getElementById('container').appendChild(renderer.domElement);
362
+
363
+ // Contrôles de la caméra
364
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
365
+ controls.enableDamping = true;
366
+ controls.dampingFactor = 0.25;
367
+ controls.enableZoom = true;
368
+ controls.enablePan = false;
369
+ controls.maxPolarAngle = Math.PI * 0.5;
370
+ controls.minDistance = 5;
371
+ controls.maxDistance = 50;
372
+
373
+ // Configuration des lumières
374
+ setupLights();
375
 
376
+ // Création de l'environnement
377
+ createEnvironment();
 
378
 
379
+ // Création du camion
380
+ createTruck();
381
+
382
+ // Configuration des événements
383
+ setupEventListeners();
384
+
385
+ // Création du trafic
386
+ if (trafficEnabled) {
387
+ createTraffic();
388
+ }
389
+
390
+ // Configuration du rétroviseur
391
+ setupMirrors();
392
+
393
+ // Animation
394
+ animate();
395
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
396
 
397
+ // Chargement des assets
398
+ function loadAssets() {
399
+ const loadingStages = [
400
+ "Initialisation du système...",
401
+ "Chargement des textures...",
402
+ "Création de l'environnement...",
403
+ "Génération du trafic...",
404
+ "Finalisation..."
405
+ ];
406
+
407
+ let currentStage = 0;
408
+ document.getElementById('loading-text').textContent = loadingStages[currentStage];
409
+
410
+ const loadingInterval = setInterval(() => {
411
+ loadingProgress += Math.random() * 3;
412
+ if (loadingProgress > (currentStage + 1) * 20) {
413
+ currentStage++;
414
+ if (currentStage < loadingStages.length) {
415
+ document.getElementById('loading-text').textContent = loadingStages[currentStage];
 
 
 
 
 
416
  }
417
  }
418
+
419
+ if (loadingProgress > 100) loadingProgress = 100;
420
+ document.getElementById('progress-bar').style.width = loadingProgress + '%';
421
+
422
+ if (loadingProgress >= 100) {
423
+ clearInterval(loadingInterval);
424
+ setTimeout(() => {
425
+ document.getElementById('loading-screen').style.display = 'none';
426
+ assetsLoaded = true;
427
+ }, 500);
428
+ }
429
+ }, 100);
430
+ }
431
+
432
+ // Configuration des lumières
433
+ function setupLights() {
434
+ // Lumière du soleil
435
+ sun = new THREE.Vector3();
436
+
437
+ // Skybox
438
+ sky = new THREE.Sky();
439
+ sky.scale.setScalar(10000);
440
+ scene.add(sky);
441
+
442
+ const skyUniforms = sky.material.uniforms;
443
+ skyUniforms['turbidity'].value = 2;
444
+ skyUniforms['rayleigh'].value = 2;
445
+ skyUniforms['mieCoefficient'].value = 0.005;
446
+ skyUniforms['mieDirectionalG'].value = 0.8;
447
+
448
+ // Lumière directionnelle principale
449
+ const sunlight = new THREE.DirectionalLight(0xffffff, 1);
450
+ sunlight.position.set(100, 100, 50);
451
+ sunlight.castShadow = true;
452
+ sunlight.shadow.mapSize.width = 2048;
453
+ sunlight.shadow.mapSize.height = 2048;
454
+ sunlight.shadow.camera.near = 0.5;
455
+ sunlight.shadow.camera.far = 500;
456
+ sunlight.shadow.camera.left = -100;
457
+ sunlight.shadow.camera.right = 100;
458
+ sunlight.shadow.camera.top = 100;
459
+ sunlight.shadow.camera.bottom = -100;
460
+ scene.add(sunlight);
461
+
462
+ // Lumière ambiante
463
+ const ambientLight = new THREE.AmbientLight(0x404040);
464
+ scene.add(ambientLight);
465
+
466
+ // Phares du camion
467
+ const headlight1 = new THREE.SpotLight(0xffffff, 1, 100, Math.PI/4, 0.5);
468
+ headlight1.position.set(1, 2, 3);
469
+ headlight1.castShadow = true;
470
+ headlight1.visible = false;
471
+ scene.add(headlight1);
472
+
473
+ const headlight2 = new THREE.SpotLight(0xffffff, 1, 100, Math.PI/4, 0.5);
474
+ headlight2.position.set(-1, 2, 3);
475
+ headlight2.castShadow = true;
476
+ headlight2.visible = false;
477
+ scene.add(headlight2);
478
+ }
479
+
480
+ // Création de l'environnement amélioré
481
+ function createEnvironment() {
482
+ // Sol avec texture haute résolution
483
+ const groundGeometry = new THREE.PlaneGeometry(10000, 10000);
484
+ const groundTexture = new THREE.TextureLoader().load('https://threejs.org/examples/textures/terrain/grasslight-big.jpg');
485
+ groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
486
+ groundTexture.repeat.set(100, 100);
487
+ groundTexture.anisotropy = 16;
488
+ const groundMaterial = new THREE.MeshStandardMaterial({
489
+ map: groundTexture,
490
+ roughness: 0.8,
491
+ metalness: 0.2
492
+ });
493
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
494
+ ground.rotation.x = -Math.PI / 2;
495
+ ground.receiveShadow = true;
496
+ scene.add(ground);
497
+
498
+ // Route principale avec marquages détaillés
499
+ const roadGeometry = new THREE.PlaneGeometry(20, 10000);
500
+ const roadMaterial = new THREE.MeshStandardMaterial({
501
+ color: 0x333333,
502
+ roughness: 0.7,
503
+ metalness: 0.1
504
+ });
505
+ const road = new THREE.Mesh(roadGeometry, roadMaterial);
506
+ road.rotation.x = -Math.PI / 2;
507
+ road.position.y = 0.01;
508
+ road.receiveShadow = true;
509
+ scene.add(road);
510
+
511
+ // Lignes de la route avec réflexion
512
+ const lineGeometry = new THREE.PlaneGeometry(0.5, 5);
513
+ const lineMaterial = new THREE.MeshStandardMaterial({
514
+ color: 0xffff00,
515
+ emissive: 0x333300,
516
+ emissiveIntensity: 0.5,
517
+ roughness: 0.1,
518
+ metalness: 0.8
519
+ });
520
+
521
+ for (let i = -5000; i < 5000; i += 15) {
522
+ const line = new THREE.Mesh(lineGeometry, lineMaterial);
523
+ line.rotation.x = -Math.PI / 2;
524
+ line.position.set(0, 0.02, i);
525
+ scene.add(line);
526
  }
527
 
528
+ // Eau avec réflexion réaliste
529
+ water = new THREE.Water(
530
+ new THREE.PlaneGeometry(10000, 1000),
531
+ {
532
+ textureWidth: 1024,
533
+ textureHeight: 1024,
534
+ waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function(texture) {
535
+ texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
536
+ }),
537
+ sunDirection: new THREE.Vector3(),
538
+ sunColor: 0xffffff,
539
+ waterColor: 0x0077be,
540
+ distortionScale: 3.7,
541
+ fog: scene.fog !== undefined
542
+ }
543
+ );
544
+ water.rotation.x = -Math.PI / 2;
545
+ water.position.set(50, 0.1, 0);
546
+ scene.add(water);
547
+
548
+ // Paysage naturel détaillé
549
+ createNaturalFeatures();
550
+
551
+ // Ponts et éléments architecturaux
552
+ createBridges();
553
+
554
+ // Feux de circulation
555
+ createTrafficLights();
556
  }
 
 
 
 
 
557
 
558
+ // Création des éléments naturels améliorés
559
+ function createNaturalFeatures() {
560
+ // Arbres variés
561
+ const treeTypes = [
562
+ { height: 5, trunkColor: 0x8b4513, leavesColor: 0x3a5f0b },
563
+ { height: 8, trunkColor: 0x654321, leavesColor: 0x2a4b0d },
564
+ { height: 12, trunkColor: 0x5e2605, leavesColor: 0x1e3b0a }
565
+ ];
566
 
567
+ for (let i = 0; i < 500; i++) {
568
+ const type = treeTypes[Math.floor(Math.random() * treeTypes.length)];
569
+ const x = (Math.random() > 0.5 ? 1 : -1) * (30 + Math.random() * 500);
570
+ const z = -2000 + Math.random() * 4000;
571
+
572
+ const tree = new THREE.Group();
573
+
574
+ // Tronc
575
+ const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.5, type.height * 0.3, 8);
576
+ const trunkMaterial = new THREE.MeshStandardMaterial({ color: type.trunkColor });
577
+ const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
578
+ trunk.position.y = type.height * 0.15;
579
+ trunk.castShadow = true;
580
+ tree.add(trunk);
581
+
582
+ // Feuillage
583
+ const leavesGeometry = new THREE.SphereGeometry(type.height * 0.4, 16, 16);
584
+ const leavesMaterial = new THREE.MeshStandardMaterial({
585
+ color: type.leavesColor,
586
+ transparent: true,
587
+ opacity: 0.9
588
+ });
589
+ const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
590
+ leaves.position.y = type.height * 0.3;
591
+ leaves.castShadow = true;
592
+ tree.add(leaves);
593
+
594
+ // Position aléatoire
595
+ tree.position.set(x, 0, z);
596
+ tree.rotation.y = Math.random() * Math.PI;
597
+ scene.add(tree);
598
+ }
599
 
600
+ // Montagnes réalistes
601
+ const mountainGeometry = new THREE.ConeGeometry(300, 500, 64);
602
+ const mountainMaterial = new THREE.MeshStandardMaterial({
603
+ color: 0x777777,
604
+ roughness: 0.9,
605
+ metalness: 0.1
606
+ });
607
 
608
+ for (let i = 0; i < 8; i++) {
609
+ const x = (Math.random() > 0.5 ? 1 : -1) * (1000 + Math.random() * 2000);
610
+ const z = -4000 + Math.random() * 8000;
611
 
612
+ const mountain = new THREE.Mesh(mountainGeometry, mountainMaterial);
613
+ mountain.position.set(x, -100, z);
614
+ mountain.rotation.y = Math.random() * Math.PI;
615
 
616
+ // Détails supplémentaires
617
+ const snowGeometry = new THREE.ConeGeometry(250, 100, 64);
618
+ const snowMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
619
+ const snow = new THREE.Mesh(snowGeometry, snowMaterial);
620
+ snow.position.y = 200;
621
+ mountain.add(snow);
622
 
623
+ scene.add(mountain);
624
+ }
625
+
626
+ // Rivières et lacs
627
+ createWaterFeatures();
628
+
629
+ // Rochers
630
+ createRocks();
631
+ }
632
+
633
+ // Création des éléments aquatiques
634
+ function createWaterFeatures() {
635
+ // Rivière sinueuse
636
+ const riverGeometry = new THREE.PlaneGeometry(5000, 30);
637
+ const riverMaterial = new THREE.MeshStandardMaterial({
638
+ color: 0x0077be,
639
+ roughness: 0.1,
640
+ metalness: 0.9,
641
+ transparent: true,
642
+ opacity: 0.8
643
+ });
644
+ const river = new THREE.Mesh(riverGeometry, riverMaterial);
645
+ river.rotation.x = -Math.PI / 2;
646
+ river.position.set(0, 0.05, 0);
647
+ scene.add(river);
648
+
649
+ // Lac
650
+ const lakeGeometry = new THREE.CircleGeometry(200, 64);
651
+ const lakeMaterial = new THREE.MeshStandardMaterial({
652
+ color: 0x006994,
653
+ roughness: 0.1,
654
+ metalness: 0.9,
655
+ transparent: true,
656
+ opacity: 0.7
657
+ });
658
+ const lake = new THREE.Mesh(lakeGeometry, lakeMaterial);
659
+ lake.rotation.x = -Math.PI / 2;
660
+ lake.position.set(300, 0.05, 800);
661
+ scene.add(lake);
662
+ }
663
+
664
+ // Création des rochers
665
+ function createRocks() {
666
+ const rockGeometry = new THREE.DodecahedronGeometry(3, 1);
667
+ const rockMaterial = new THREE.MeshStandardMaterial({
668
+ color: 0x555555,
669
+ roughness: 0.8,
670
+ metalness: 0.2
671
+ });
672
+
673
+ for (let i = 0; i < 200; i++) {
674
+ const x = (Math.random() > 0.5 ? 1 : -1) * (50 + Math.random() * 300);
675
+ const z = -2000 + Math.random() * 4000;
676
+ const y = Math.random() * 2;
677
+ const scale = 0.5 + Math.random() * 3;
678
 
679
+ const rock = new THREE.Mesh(rockGeometry, rockMaterial);
680
+ rock.position.set(x, y, z);
681
+ rock.scale.set(scale, scale, scale);
682
+ rock.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
683
+ rock.castShadow = true;
684
+ scene.add(rock);
685
  }
686
  }
687
+
688
+ // Création des ponts
689
+ function createBridges() {
690
+ // Pont principal
691
+ const bridgeGeometry = new THREE.BoxGeometry(30, 5, 100);
692
+ const bridgeMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
693
+ const bridge = new THREE.Mesh(bridgeGeometry, bridgeMaterial);
694
+ bridge.position.set(0, 2.5, 0);
695
+ bridge.castShadow = true;
696
+ bridge.receiveShadow = true;
697
+ scene.add(bridge);
698
+
699
+ // Garde-fous
700
+ const railingGeometry = new THREE.BoxGeometry(1, 1, 100);
701
+ const railingMaterial = new THREE.MeshStandardMaterial({ color: 0x777777 });
702
 
703
+ const railingLeft = new THREE.Mesh(railingGeometry, railingMaterial);
704
+ railingLeft.position.set(15.5, 3, 0);
705
+ scene.add(railingLeft);
706
 
707
+ const railingRight = new THREE.Mesh(railingGeometry, railingMaterial);
708
+ railingRight.position.set(-15.5, 3, 0);
709
+ scene.add(railingRight);
 
710
 
711
+ // Piliers
712
+ const pillarGeometry = new THREE.CylinderGeometry(2, 2, 10, 8);
713
+
714
+ for (let i = -40; i <= 40; i += 20) {
715
+ const pillar = new THREE.Mesh(pillarGeometry, bridgeMaterial);
716
+ pillar.position.set(0, -5, i);
717
+ scene.add(pillar);
718
+ }
719
  }
720
+
721
+ // Création des feux de circulation
722
+ function createTrafficLights() {
723
+ const poleGeometry = new THREE.CylinderGeometry(0.2, 0.2, 5);
724
+ const poleMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
725
+
726
+ const lightGeometry = new THREE.BoxGeometry(1, 3, 0.5);
727
+ const lightMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
728
+
729
+ for (let i = 0; i < 10; i++) {
730
+ const z = -500 + i * 500;
731
+
732
+ const pole = new THREE.Mesh(poleGeometry, poleMaterial);
733
+ pole.position.set(10, 2.5, z);
734
+ scene.add(pole);
735
+
736
+ const light = new THREE.Mesh(lightGeometry, lightMaterial);
737
+ light.position.set(10, 5, z);
738
+ scene.add(light);
739
+ }
740
+ }
741
+
742
+ // Création du camion
743
+ function createTruck() {
744
+ // Groupe principal du camion
745
+ truck = new THREE.Group();
746
+
747
+ // Cabine
748
+ const cabinGeometry = new THREE.BoxGeometry(3, 2.5, 3);
749
+ const cabinMaterial = new THREE.MeshStandardMaterial({
750
+ color: 0x2a75bb,
751
+ roughness: 0.5,
752
+ metalness: 0.5
753
+ });
754
+ const cabin = new THREE.Mesh(cabinGeometry, cabinMaterial);
755
+ cabin.position.set(0, 2, 0);
756
+ cabin.castShadow = true;
757
+ cabin.receiveShadow = true;
758
+ truck.add(cabin);
759
+
760
+ // Pare-brise
761
+ const windshieldGeometry = new THREE.BoxGeometry(2.8, 1.5, 0.1);
762
+ const windshieldMaterial = new THREE.MeshStandardMaterial({
763
+ color: 0x7ec0ee,
764
+ transparent: true,
765
+ opacity: 0.7,
766
+ roughness: 0.1,
767
+ metalness: 0.9
768
+ });
769
+ const windshield = new THREE.Mesh(windshieldGeometry, windshieldMaterial);
770
+ windshield.position.set(0, 2.5, 1.5);
771
+ truck.add(windshield);
772
+
773
+ // Châssis
774
+ const chassisGeometry = new THREE.BoxGeometry(4, 1, 8);
775
+ const chassisMaterial = new THREE.MeshStandardMaterial({
776
+ color: 0x1a1a1a,
777
+ roughness: 0.7,
778
+ metalness: 0.3
779
+ });
780
+ const chassis = new THREE.Mesh(chassisGeometry, chassisMaterial);
781
+ chassis.position.set(0, 1, -2);
782
+ chassis.castShadow = true;
783
+ chassis.receiveShadow = true;
784
+ truck.add(chassis);
785
+
786
+ // Roues
787
+ const wheelGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.4, 32);
788
+ const wheelMaterial = new THREE.MeshStandardMaterial({
789
+ color: 0x333333,
790
+ roughness: 0.8,
791
+ metalness: 0.2
792
+ });
793
+
794
+ const wheelTireGeometry = new THREE.TorusGeometry(0.5, 0.2, 16, 32);
795
+ const wheelTireMaterial = new THREE.MeshStandardMaterial({ color: 0x111111 });
796
+
797
+ // Roues avant
798
+ const wheelFL = new THREE.Group();
799
+ const wheelFLBase = new THREE.Mesh(wheelGeometry, wheelMaterial);
800
+ wheelFLBase.rotation.z = Math.PI / 2;
801
+ wheelFL.add(wheelFLBase);
802
+
803
+ const wheelFLTire = new THREE.Mesh(wheelTireGeometry, wheelTireMaterial);
804
+ wheelFLTire.rotation.x = Math.PI / 2;
805
+ wheelFL.add(wheelFLTire);
806
+
807
+ wheelFL.position.set(1.5, 1, 2);
808
+ truck.add(wheelFL);
809
+
810
+ const wheelFR = new THREE.Group();
811
+ const wheelFRBase = new THREE.Mesh(wheelGeometry, wheelMaterial);
812
+ wheelFRBase.rotation.z = Math.PI / 2;
813
+ wheelFR.add(wheelFRBase);
814
+
815
+ const wheelFRTire = new THREE.Mesh(wheelTireGeometry, wheelTireMaterial);
816
+ wheelFRTire.rotation.x = Math.PI / 2;
817
+ wheelFR.add(wheelFRTire);
818
+
819
+ wheelFR.position.set(-1.5, 1, 2);
820
+ truck.add(wheelFR);
821
+
822
+ // Roues arrière (double essieu)
823
+ for (let i = 0; i < 2; i++) {
824
+ const wheelRL = new THREE.Group();
825
+ const wheelRLBase = new THREE.Mesh(wheelGeometry, wheelMaterial);
826
+ wheelRLBase.rotation.z = Math.PI / 2;
827
+ wheelRL.add(wheelRLBase);
828
+
829
+ const wheelRLTire = new THREE.Mesh(wheelTireGeometry, wheelTireMaterial);
830
+ wheelRLTire.rotation.x = Math.PI / 2;
831
+ wheelRL.add(wheelRLTire);
832
+
833
+ wheelRL.position.set(1.5, 1, -4 + i * 0.8);
834
+ truck.add(wheelRL);
835
+
836
+ const wheelRR = new THREE.Group();
837
+ const wheelRRBase = new THREE.Mesh(wheelGeometry, wheelMaterial);
838
+ wheelRRBase.rotation.z = Math.PI / 2;
839
+ wheelRR.add(wheelRRBase);
840
+
841
+ const wheelRRTire = new THREE.Mesh(wheelTireGeometry, wheelTireMaterial);
842
+ wheelRRTire.rotation.x = Math.PI / 2;
843
+ wheelRR.add(wheelRRTire);
844
+
845
+ wheelRR.position.set(-1.5, 1, -4 + i * 0.8);
846
+ truck.add(wheelRR);
847
+ }
848
+
849
+ // Ajout du camion à la scène
850
+ scene.add(truck);
851
+ truck.position.set(0, 2, 0);
852
+
853
+ // Vue intérieure
854
+ const interiorGeometry = new THREE.BoxGeometry(2.5, 2, 2.5);
855
+ const interiorMaterial = new THREE.MeshStandardMaterial({
856
+ color: 0x555555,
857
+ side: THREE.BackSide
858
+ });
859
+ const interior = new THREE.Mesh(interiorGeometry, interiorMaterial);
860
+ interior.position.set(0, 2, 0);
861
+ truck.add(interior);
862
+
863
+ // Volant
864
+ const steeringWheelGeometry = new THREE.TorusGeometry(0.3, 0.05, 16, 32);
865
+ const steeringWheelMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
866
+ const steeringWheel = new THREE.Mesh(steeringWheelGeometry, steeringWheelMaterial);
867
+ steeringWheel.position.set(0.5, 2.5, 0.5);
868
+ steeringWheel.rotation.z = Math.PI / 2;
869
+ truck.add(steeringWheel);
870
+
871
+ // Siège
872
+ const seatGeometry = new THREE.BoxGeometry(0.8, 0.2, 0.8);
873
+ const seatMaterial = new THREE.MeshStandardMaterial({ color: 0x222222 });
874
+ const seat = new THREE.Mesh(seatGeometry, seatMaterial);
875
+ seat.position.set(0, 1.5, 0);
876
+ truck.add(seat);
877
+
878
+ // Tableau de bord
879
+ const dashboardGeometry = new THREE.BoxGeometry(2.5, 0.5, 0.1);
880
+ const dashboardMaterial = new THREE.MeshStandardMaterial({ color: 0x111111 });
881
+ const dashboard = new THREE.Mesh(dashboardGeometry, dashboardMaterial);
882
+ dashboard.position.set(0, 2, 1.2);
883
+ truck.add(dashboard);
884
+
885
+ // Rétroviseurs
886
+ const mirrorGeometry = new THREE.BoxGeometry(0.5, 0.2, 0.1);
887
+ const mirrorMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
888
+
889
+ const leftMirror = new THREE.Mesh(mirrorGeometry, mirrorMaterial);
890
+ leftMirror.position.set(1.8, 2.5, 0.5);
891
+ truck.add(leftMirror);
892
+
893
+ const rightMirror = new THREE.Mesh(mirrorGeometry, mirrorMaterial);
894
+ rightMirror.position.set(-1.8, 2.5, 0.5);
895
+ truck.add(rightMirror);
896
+ }
897
+
898
+ // Configuration des rétroviseurs
899
+ function setupMirrors() {
900
+ // Rétroviseur gauche
901
+ leftMirrorTexture = new THREE.WebGLRenderTarget(512, 256, {
902
+ minFilter: THREE.LinearFilter,
903
+ magFilter: THREE.LinearFilter,
904
+ format: THREE.RGBFormat
905
+ });
906
+
907
+ leftMirrorCamera = new THREE.PerspectiveCamera(60, 2, 0.1, 1000);
908
+ leftMirrorCamera.position.set(1.8, 2.5, 0.5);
909
+ leftMirrorCamera.rotation.y = Math.PI / 2;
910
+
911
+ const mirrorPlane = new THREE.PlaneGeometry(1.5, 0.8);
912
+ const mirrorMaterial = new THREE.MeshBasicMaterial({
913
+ map: leftMirrorTexture.texture,
914
+ side: THREE.DoubleSide
915
+ });
916
+ const mirrorMesh = new THREE.Mesh(mirrorPlane, mirrorMaterial);
917
+ mirrorMesh.position.set(2.5, 2.5, 0);
918
+ mirrorMesh.rotation.y = Math.PI / 2;
919
+ truck.add(mirrorMesh);
920
+ }
921
+
922
+ // Création du trafic
923
+ function createTraffic() {
924
+ const carColors = [
925
+ 0xff0000, 0x00ff00, 0x0000ff, 0xffff00,
926
+ 0xff00ff, 0x00ffff, 0xffffff, 0xaaaaaa
927
  ];
928
 
929
+ // Création de 20 voitures
930
+ for (let i = 0; i < 20; i++) {
931
+ const car = new THREE.Group();
932
+
933
+ // Corps de la voiture
934
+ const bodyGeometry = new THREE.BoxGeometry(2, 1, 4);
935
+ const bodyMaterial = new THREE.MeshStandardMaterial({
936
+ color: carColors[Math.floor(Math.random() * carColors.length)],
937
+ roughness: 0.5,
938
+ metalness: 0.5
939
+ });
940
+ const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
941
+ body.position.y = 1;
942
+ body.castShadow = true;
943
+ body.receiveShadow = true;
944
+ car.add(body);
945
+
946
+ // Vitres
947
+ const windowGeometry = new THREE.BoxGeometry(1.8, 0.6, 3.8);
948
+ const windowMaterial = new THREE.MeshStandardMaterial({
949
+ color: 0x7ec0ee,
950
+ transparent: true,
951
+ opacity: 0.7,
952
+ roughness: 0.1,
953
+ metalness: 0.9
954
+ });
955
+ const windows = new THREE.Mesh(windowGeometry, windowMaterial);
956
+ windows.position.y = 1.3;
957
+ car.add(windows);
958
+
959
+ // Roues
960
+ const wheelGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.3, 16);
961
+ const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
962
+
963
+ const wheelFL = new THREE.Mesh(wheelGeometry, wheelMaterial);
964
+ wheelFL.rotation.z = Math.PI / 2;
965
+ wheelFL.position.set(1, 0.4, 1.5);
966
+ car.add(wheelFL);
967
+
968
+ const wheelFR = new THREE.Mesh(wheelGeometry, wheelMaterial);
969
+ wheelFR.rotation.z = Math.PI / 2;
970
+ wheelFR.position.set(-1, 0.4, 1.5);
971
+ car.add(wheelFR);
972
+
973
+ const wheelRL = new THREE.Mesh(wheelGeometry, wheelMaterial);
974
+ wheelRL.rotation.z = Math.PI / 2;
975
+ wheelRL.position.set(1, 0.4, -1.5);
976
+ car.add(wheelRL);
977
+
978
+ const wheelRR = new THREE.Mesh(wheelGeometry, wheelMaterial);
979
+ wheelRR.rotation.z = Math.PI / 2;
980
+ wheelRR.position.set(-1, 0.4, -1.5);
981
+ car.add(wheelRR);
982
+
983
+ // Position aléatoire sur la route
984
+ const lane = Math.random() > 0.5 ? 1 : -1;
985
+ const z = -1000 + Math.random() * 2000;
986
+ const speed = 5 + Math.random() * 10;
987
+
988
+ car.position.set(lane * 8, 0.4, z);
989
+ car.userData.speed = speed;
990
+ car.userData.lane = lane;
991
+
992
+ scene.add(car);
993
+ trafficCars.push(car);
994
+ }
995
+ }
996
+
997
+ // Mise à jour du trafic
998
+ function updateTraffic(delta) {
999
+ trafficLightTimer += delta;
1000
 
1001
+ // Changement des feux de circulation
1002
+ if (trafficLightTimer > 10) {
1003
+ trafficLightTimer = 0;
1004
+ trafficLightState = trafficLightState === 'red' ? 'green' : 'red';
1005
+
1006
+ // Mise à jour de l'UI
1007
+ document.querySelector('.light.red').classList.toggle('active', trafficLightState === 'red');
1008
+ document.querySelector('.light.yellow').classList.toggle('active', false);
1009
+ document.querySelector('.light.green').classList.toggle('active', trafficLightState === 'green');
1010
+ } else if (trafficLightTimer > 8 && trafficLightState === 'green') {
1011
+ document.querySelector('.light.yellow').classList.toggle('active', true);
1012
+ document.querySelector('.light.green').classList.toggle('active', false);
1013
  }
1014
 
1015
+ // Mise à jour des voitures
1016
+ trafficCars.forEach(car => {
1017
+ // Déplacement
1018
+ if (trafficLightState === 'green' || car.position.z < -100 || car.position.z > 100) {
1019
+ car.position.z += car.userData.speed * delta * (car.userData.lane === 1 ? 1 : -1);
1020
+ }
1021
+
1022
+ // Réinitialisation si hors de la vue
1023
+ if (car.position.z > 1500 || car.position.z < -1500) {
1024
+ car.position.z = car.userData.lane === 1 ? -1500 : 1500;
1025
+ }
1026
+
1027
+ // Rotation des roues
1028
+ car.children.forEach(child => {
1029
+ if (child.geometry?.type === 'CylinderGeometry') {
1030
+ child.rotation.x += car.userData.speed * delta * 2;
1031
+ }
1032
+ });
1033
+ });
1034
+ }
1035
+
1036
+ // Configuration des événements
1037
+ function setupEventListeners() {
1038
+ // Contrôles clavier
1039
+ const keyStates = {};
1040
 
1041
+ document.addEventListener('keydown', (event) => {
1042
+ keyStates[event.key.toLowerCase()] = true;
1043
+
1044
+ // Klaxon
1045
+ if (event.key.toLowerCase() === 'h' && !hornPlaying) {
1046
+ hornPlaying = true;
1047
+ // Ici vous pourriez ajouter un son de klaxon
1048
+ setTimeout(() => { hornPlaying = false; }, 1000);
1049
+ }
1050
+
1051
+ // Phares
1052
+ if (event.key.toLowerCase() === 'f') {
1053
+ toggleLights();
1054
+ }
1055
+
1056
+ // Changement de caméra
1057
+ if (event.key.toLowerCase() === 'c') {
1058
+ toggleCamera();
1059
+ }
1060
+
1061
+ // Changement de vitesse
1062
+ if (event.key >= '1' && event.key <= '6') {
1063
+ gear = event.key;
1064
+ document.getElementById('gear-indicator').textContent = gear;
1065
+ }
1066
+ });
1067
+
1068
+ document.addEventListener('keyup', (event) => {
1069
+ keyStates[event.key.toLowerCase()] = false;
1070
+ });
1071
+
1072
+ // Contrôles UI
1073
+ document.getElementById('toggle-camera').addEventListener('click', toggleCamera);
1074
+ document.getElementById('toggle-lights').addEventListener('click', toggleLights);
1075
+ document.getElementById('toggle-traffic').addEventListener('click', toggleTraffic);
1076
+ document.getElementById('reset-truck').addEventListener('click', resetTruck);
1077
+
1078
+ // Contrôles météo
1079
+ document.getElementById('weather-sunny').addEventListener('click', () => setWeather('sunny'));
1080
+ document.getElementById('weather-rainy').addEventListener('click', () => setWeather('rainy'));
1081
+ document.getElementById('weather-foggy').addEventListener('click', () => setWeather('foggy'));
1082
+
1083
+ // Animation des contrôles
1084
+ function updateControls(delta) {
1085
+ // Accélération/freinage
1086
+ if (keyStates['z'] || keyStates['arrowup']) {
1087
+ if (speed < getMaxSpeed()) speed += 0.1 * delta * 60;
1088
+ if (rpm < getMaxRpm()) rpm += 50 * delta * 60;
1089
+ } else if (keyStates['s'] || keyStates['arrowdown']) {
1090
+ if (speed > -20) speed -= 0.2 * delta * 60;
1091
+ if (rpm > 1000) rpm -= 100 * delta * 60;
1092
+ } else {
1093
+ // Ralentissement naturel
1094
+ if (speed > 0) speed = Math.max(0, speed - 0.05 * delta * 60);
1095
+ if (speed < 0) speed = Math.min(0, speed + 0.05 * delta * 60);
1096
+ if (rpm > 1000) rpm = Math.max(1000, rpm - 50 * delta * 60);
1097
+ }
1098
+
1099
+ // Direction
1100
+ if (keyStates['q'] || keyStates['arrowleft']) {
1101
+ steeringAngle = Math.min(0.5, steeringAngle + 0.02 * delta * 60);
1102
+ } else if (keyStates['d'] || keyStates['arrowright']) {
1103
+ steeringAngle = Math.max(-0.5, steeringAngle - 0.02 * delta * 60);
1104
+ } else {
1105
+ // Retour au centre
1106
+ if (steeringAngle > 0) steeringAngle = Math.max(0, steeringAngle - 0.01 * delta * 60);
1107
+ if (steeringAngle < 0) steeringAngle = Math.min(0, steeringAngle + 0.01 * delta * 60);
1108
+ }
1109
+
1110
+ // Frein
1111
+ if (keyStates[' ']) {
1112
+ if (speed > 0) speed = Math.max(0, speed - 0.2 * delta * 60);
1113
+ if (speed < 0) speed = Math.min(0, speed + 0.2 * delta * 60);
1114
+ if (rpm > 1000) rpm = Math.max(1000, rpm - 100 * delta * 60);
1115
+ }
1116
+
1117
+ // Rétrograder
1118
+ if (keyStates['r'] && speed < 5) {
1119
+ gear = gear === 'R' ? '1' : 'R';
1120
+ document.getElementById('gear-indicator').textContent = gear;
1121
+ }
1122
+
1123
+ // Mise à jour de l'UI
1124
+ document.getElementById('speed').textContent = Math.abs(Math.round(speed)) + ' km/h';
1125
+ document.getElementById('rpm').textContent = rpm;
1126
+ document.getElementById('steering-wheel').style.transform = `translateX(-50%) rotate(${steeringAngle * 60}deg)`;
1127
+
1128
+ // Consommation de carburant
1129
+ if (speed > 0) {
1130
+ fuel = Math.max(0, fuel - 0.001 * delta * 60);
1131
+ document.getElementById('fuel').textContent = Math.round(fuel) + '%';
1132
+ }
1133
+
1134
+ // Mise à jour de la distance
1135
+ distance += speed * delta * 0.01;
1136
+ document.getElementById('distance').textContent = Math.round(distance) + ' km';
1137
+
1138
+ // Mise à jour du temps
1139
+ time += delta;
1140
+ const minutes = Math.floor(time / 60);
1141
+ const seconds = Math.floor(time % 60);
1142
+ document.getElementById('time').textContent =
1143
+ (minutes < 10 ? '0' + minutes : minutes) + ':' +
1144
+ (seconds < 10 ? '0' + seconds : seconds);
1145
+
1146
+ // Mise à jour du GPS
1147
+ updateGPS();
1148
+ }
1149
+
1150
+ // Vitesse maximale en fonction de la vitesse
1151
+ function getMaxSpeed() {
1152
+ switch(gear) {
1153
+ case '1': return 30;
1154
+ case '2': return 50;
1155
+ case '3': return 80;
1156
+ case '4': return 110;
1157
+ case '5': return 140;
1158
+ case '6': return 180;
1159
+ case 'R': return 20;
1160
+ default: return 30;
1161
+ }
1162
+ }
1163
+
1164
+ // RPM maximal en fonction de la vitesse
1165
+ function getMaxRpm() {
1166
+ switch(gear) {
1167
+ case '1': return 4000;
1168
+ case '2': return 4500;
1169
+ case '3': return 5000;
1170
+ case '4': return 5500;
1171
+ case '5': return 6000;
1172
+ case '6': return 6500;
1173
+ case 'R': return 3000;
1174
+ default: return 4000;
1175
+ }
1176
+ }
1177
+
1178
+ // Mise à jour des informations GPS
1179
+ function updateGPS() {
1180
+ let location = "Campagne - Route Départementale";
1181
+ let nextTurn = "Prochain virage: 2.5km";
1182
+ let speedLimit = "Limite: 90 km/h";
1183
+
1184
+ if (distance < 5) {
1185
+ location = "Centre de Formation";
1186
+ speedLimit = "Limite: 30 km/h";
1187
+ } else if (distance < 20) {
1188
+ location = "Route Départementale";
1189
+ nextTurn = "Prochain virage: 1.2km";
1190
+ speedLimit = "Limite: 70 km/h";
1191
+ } else if (distance < 50) {
1192
+ location = "Périphérique";
1193
+ nextTurn = "Sortie: 500m";
1194
+ speedLimit = "Limite: 110 km/h";
1195
+ } else if (distance < 80) {
1196
+ location = "Pont sur la rivière";
1197
+ nextTurn = "Virage serré: 300m";
1198
+ speedLimit = "Limite: 60 km/h";
1199
+ } else if (distance < 120) {
1200
+ location = "Zone Montagneuse";
1201
+ nextTurn = "Descente: 1km";
1202
+ speedLimit = "Limite: 80 km/h";
1203
+ }
1204
+
1205
+ document.getElementById('gps-location').textContent = location;
1206
+ document.getElementById('gps-next').textContent = nextTurn;
1207
+ document.getElementById('gps-speed').textContent = speedLimit;
1208
+ }
1209
+
1210
+ // Rafraîchissement des contrôles
1211
+ let lastUpdateTime = 0;
1212
+ function updateControlsLoop(timestamp) {
1213
+ const delta = (timestamp - lastUpdateTime) / 1000;
1214
+ lastUpdateTime = timestamp;
1215
+
1216
+ if (delta < 0.1) { // Éviter les gros sauts en cas de perte de focus
1217
+ updateControls(delta);
1218
+ }
1219
+
1220
+ requestAnimationFrame(updateControlsLoop);
1221
+ }
1222
+ requestAnimationFrame(updateControlsLoop);
1223
+ }
1224
+
1225
+ // Basculer les phares
1226
+ function toggleLights() {
1227
+ lightsOn = !lightsOn;
1228
+ // Ici vous pourriez activer/désactiver les lumières des phares
1229
+ scene.children.forEach(child => {
1230
+ if (child.type === 'SpotLight') {
1231
+ child.visible = lightsOn;
1232
+ }
1233
+ });
1234
+ document.getElementById('toggle-lights').textContent = lightsOn ? 'ÉTEINDRE' : 'PHARES';
1235
+ }
1236
+
1237
+ // Basculer le trafic
1238
+ function toggleTraffic() {
1239
+ trafficEnabled = !trafficEnabled;
1240
+ document.getElementById('toggle-traffic').textContent =
1241
+ trafficEnabled ? 'DÉSACTIVER TRAFIC' : 'ACTIVER TRAFIC';
1242
+ }
1243
+
1244
+ // Basculer la caméra
1245
+ function toggleCamera() {
1246
+ cameraMode = cameraMode === 'interior' ? 'exterior' : 'interior';
1247
+ document.getElementById('toggle-camera').textContent =
1248
+ cameraMode === 'interior' ? 'VUE EXTERNE' : 'VUE INTERNE';
1249
+ }
1250
+
1251
+ // Réinitialiser le camion
1252
+ function resetTruck() {
1253
+ truck.position.set(0, 2, 0);
1254
+ truck.rotation.set(0, 0, 0);
1255
+ speed = 0;
1256
+ rpm = 1000;
1257
+ steeringAngle = 0;
1258
+ gear = 'N';
1259
+ distance = 0;
1260
+ document.getElementById('gear-indicator').textContent = gear;
1261
+ }
1262
+
1263
+ // Changer la météo
1264
+ function setWeather(newWeather) {
1265
+ weather = newWeather;
1266
+
1267
+ // Mettre à jour le ciel et l'éclairage
1268
+ const skyUniforms = sky.material.uniforms;
1269
+
1270
+ switch(weather) {
1271
+ case 'sunny':
1272
+ skyUniforms['turbidity'].value = 2;
1273
+ skyUniforms['rayleigh'].value = 2;
1274
+ skyUniforms['mieCoefficient'].value = 0.005;
1275
+ scene.fog.density = 0.0005;
1276
+ scene.background = new THREE.Color(0x87CEEB);
1277
+ break;
1278
+
1279
+ case 'rainy':
1280
+ skyUniforms['turbidity'].value = 10;
1281
+ skyUniforms['rayleigh'].value = 3;
1282
+ skyUniforms['mieCoefficient'].value = 0.05;
1283
+ scene.fog.density = 0.003;
1284
+ scene.background = new THREE.Color(0x666666);
1285
+ createRain();
1286
+ break;
1287
+
1288
+ case 'foggy':
1289
+ skyUniforms['turbidity'].value = 20;
1290
+ skyUniforms['rayleigh'].value = 1;
1291
+ skyUniforms['mieCoefficient'].value = 0.1;
1292
+ scene.fog.density = 0.01;
1293
+ scene.background = new THREE.Color(0x999999);
1294
+ break;
1295
+ }
1296
+ }
1297
+
1298
+ // Créer l'effet de pluie
1299
+ function createRain() {
1300
+ // Supprimer les anciennes particules de pluie
1301
+ rainParticles.forEach(particle => scene.remove(particle));
1302
+ rainParticles = [];
1303
+
1304
+ // Créer 1000 particules de pluie
1305
+ const rainGeometry = new THREE.BufferGeometry();
1306
+ const positions = [];
1307
+ const velocities = [];
1308
+
1309
+ for (let i = 0; i < 1000; i++) {
1310
+ positions.push(
1311
+ Math.random() * 200 - 100, // x
1312
+ Math.random() * 100 + 50, // y
1313
+ Math.random() * 200 - 100 // z
1314
+ );
1315
+
1316
+ velocities.push(
1317
+ 0, // vx
1318
+ -5 - Math.random() * 10, // vy
1319
+ 0 // vz
1320
+ );
1321
+ }
1322
+
1323
+ rainGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
1324
+ rainGeometry.setAttribute('velocity', new THREE.Float32BufferAttribute(velocities, 3));
1325
+
1326
+ const rainMaterial = new THREE.PointsMaterial({
1327
+ color: 0xAAAAAA,
1328
+ size: 0.1,
1329
+ transparent: true,
1330
+ opacity: 0.8
1331
+ });
1332
+
1333
+ const rain = new THREE.Points(rainGeometry, rainMaterial);
1334
+ scene.add(rain);
1335
+ rainParticles.push(rain);
1336
+ }
1337
+
1338
+ // Mettre à jour la pluie
1339
+ function updateRain(delta) {
1340
+ rainParticles.forEach(rain => {
1341
+ const positions = rain.geometry.attributes.position.array;
1342
+ const velocities = rain.geometry.attributes.velocity.array;
1343
+
1344
+ for (let i = 0; i < positions.length; i += 3) {
1345
+ // Mettre à jour la position
1346
+ positions[i] += velocities[i] * delta;
1347
+ positions[i+1] += velocities[i+1] * delta;
1348
+ positions[i+2] += velocities[i+2] * delta;
1349
+
1350
+ // Réinitialiser les particules qui sont tombées
1351
+ if (positions[i+1] < 0) {
1352
+ positions[i] = Math.random() * 200 - 100;
1353
+ positions[i+1] = Math.random() * 100 + 50;
1354
+ positions[i+2] = Math.random() * 200 - 100;
1355
+ }
1356
+ }
1357
+
1358
+ rain.geometry.attributes.position.needsUpdate = true;
1359
+ });
1360
+ }
1361
+
1362
  // Animation
1363
  function animate() {
1364
  requestAnimationFrame(animate);
1365
 
1366
+ const delta = clock.getDelta();
1367
+
1368
+ if (!assetsLoaded) return;
1369
+
1370
+ // Mise à jour de l'eau
1371
+ if (water) {
1372
+ water.material.uniforms['time'].value += delta;
1373
+ }
1374
+
1375
+ // Mise à jour du trafic
1376
+ if (trafficEnabled) {
1377
+ updateTraffic(delta);
1378
+ }
1379
 
1380
+ // Mise à jour de la pluie
1381
+ if (weather === 'rainy') {
1382
+ updateRain(delta);
1383
+ }
1384
 
1385
+ // Déplacement du camion
1386
+ if (truck) {
1387
+ truck.position.z += speed * delta;
1388
+ truck.rotation.y = -steeringAngle * 0.5;
1389
+
1390
+ // Rotation des roues
1391
+ truck.children.forEach(child => {
1392
+ if (child.type === 'Group') { // Roues
1393
+ child.children.forEach(wheel => {
1394
+ if (wheel.geometry?.type === 'CylinderGeometry') {
1395
+ wheel.rotation.x += speed * delta;
1396
+ }
1397
+ });
1398
+
1399
+ // Direction des roues avant
1400
+ if (Math.abs(child.position.z - 2) < 0.1) {
1401
+ child.rotation.y = steeringAngle * 2;
1402
+ }
1403
+ }
1404
+ });
1405
+
1406
+ // Positionnement de la caméra
1407
+ if (cameraMode === 'interior') {
1408
+ camera.position.set(
1409
+ truck.position.x + 0.5 * Math.sin(truck.rotation.y),
1410
+ truck.position.y + 2,
1411
+ truck.position.z - 5 + 2 * Math.sin(truck.rotation.y)
1412
+ );
1413
+ camera.lookAt(
1414
+ truck.position.x,
1415
+ truck.position.y + 1,
1416
+ truck.position.z + 10
1417
+ );
1418
+ } else {
1419
+ camera.position.set(
1420
+ truck.position.x + 10 * Math.sin(truck.rotation.y),
1421
+ truck.position.y + 10,
1422
+ truck.position.z - 15 + 5 * Math.sin(truck.rotation.y)
1423
+ );
1424
+ camera.lookAt(truck.position);
1425
+ }
1426
+
1427
+ // Mise à jour du rétroviseur
1428
+ updateMirror();
1429
+ }
1430
 
1431
+ // Mise à jour du soleil
1432
+ if (sky) {
1433
+ const theta = Math.PI * (time / 60 / 12 - 0.5);
1434
+ const phi = 2 * Math.PI * (time / 60 / 24);
1435
+
1436
+ sun.x = Math.cos(phi);
1437
+ sun.y = Math.sin(phi) * Math.sin(theta);
1438
+ sun.z = Math.sin(phi) * Math.cos(theta);
1439
+
1440
+ sky.material.uniforms['sunPosition'].value.copy(sun);
1441
+ if (water) {
1442
+ water.material.uniforms['sunDirection'].value.copy(sun).normalize();
1443
+ }
1444
+
1445
+ // Mise à jour des lumières directionnelles
1446
+ scene.children.forEach(child => {
1447
+ if (child.type === 'DirectionalLight') {
1448
+ child.position.copy(sun).multiplyScalar(100);
1449
+ }
1450
+ });
1451
+ }
1452
+
1453
+ // Mise à jour des contrôles
1454
+ controls.update();
1455
+
1456
+ // Rendu
1457
  renderer.render(scene, camera);
1458
  }
1459
+
1460
+ // Mise à jour du rétroviseur
1461
+ function updateMirror() {
1462
+ if (leftMirrorCamera && leftMirrorTexture) {
1463
+ // Position et orientation de la caméra du rétroviseur
1464
+ leftMirrorCamera.position.copy(truck.position).add(new THREE.Vector3(1.8, 2.5, 0.5));
1465
+ leftMirrorCamera.rotation.copy(truck.rotation);
1466
+ leftMirrorCamera.rotation.y += Math.PI / 2;
1467
+
1468
+ // Rendu de la vue du rétroviseur
1469
+ renderer.setRenderTarget(leftMirrorTexture);
1470
+ renderer.clear();
1471
+ renderer.render(scene, leftMirrorCamera);
1472
+ renderer.setRenderTarget(null);
1473
+
1474
+ // Mise à jour de la texture dans l'UI
1475
+ const mirrorUI = document.getElementById('left-mirror');
1476
+ mirrorUI.style.backgroundImage = `url(${leftMirrorTexture.texture.image.src})`;
1477
+ mirrorUI.style.backgroundSize = 'cover';
1478
+ }
1479
+ }
1480
+
1481
  // Redimensionnement
1482
  window.addEventListener('resize', () => {
1483
  camera.aspect = window.innerWidth / window.innerHeight;
1484
  camera.updateProjectionMatrix();
1485
  renderer.setSize(window.innerWidth, window.innerHeight);
1486
+
1487
+ if (leftMirrorCamera) {
1488
+ leftMirrorCamera.aspect = 2;
1489
+ leftMirrorCamera.updateProjectionMatrix();
1490
+ }
1491
  });
1492
+
1493
+ // Démarrer l'application
1494
+ init();
1495
+ loadAssets();
1496
  </script>
1497
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/globe-future" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1498
  </html>
prompts.txt CHANGED
@@ -4,4 +4,7 @@ AURORA
4
  creer moi une globe geant fait que des particule de couleur qui tourne en rond avec des etoile trasnparent qui clignote je veux en futuriste
5
  JE VEUX QUIL TOURNE PLUS VISTE
6
  JE VEUX QUE LE MOT : BAVOL JEAN ERIC EN PETITE PARICULE DE FEUX QUI TOURNE AUTOUR DU GLOBE
7
- ecrire les mots : BAVOL JEAN ERIC EN GROS CARACTERE AVEC DES PARTICULE QUI FAIT LE TOUR DU GLOBE
 
 
 
 
4
  creer moi une globe geant fait que des particule de couleur qui tourne en rond avec des etoile trasnparent qui clignote je veux en futuriste
5
  JE VEUX QUIL TOURNE PLUS VISTE
6
  JE VEUX QUE LE MOT : BAVOL JEAN ERIC EN PETITE PARICULE DE FEUX QUI TOURNE AUTOUR DU GLOBE
7
+ ecrire les mots : BAVOL JEAN ERIC EN GROS CARACTERE AVEC DES PARTICULE QUI FAIT LE TOUR DU GLOBE
8
+ CREER MOI UN VRAIS SIMULATEUR DE CONDUITE DES VRAIS CAMION DAND UN CENTRE DE FORMATION
9
+ JE VEUT DES VRAI PAYSAGE ET DES VRAIS CIRCULATION EN TEMP REEL
10
+ JJE VEUX CONDUIRE SUR LA ROUTE AVEC DE BEAUX PAYSAGE