clarification code + modification dalle beton

ALVARIZA-BILLAR_DESERT_KANY/projet.js

 "use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
 ////////////////////////////////////////////////////////////////////////////////
-// Add a grassy plain underneath the drinking bird
+// Reproduction du tableau Gas de Edward Hopper en 3D
 ////////////////////////////////////////////////////////////////////////////////
 /*global THREE, $ */
 import * as THREE from 'three';
 
-import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
 import * as dat from 'https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.module.js';
-import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
+import {MTLLoader} from 'three/addons/loaders/MTLLoader.js';
 
 window.scene = new THREE.Scene();
 
+// Variables globales
 var camera, renderer;
 var cameraControls;
 var bevelRadius = 1.9;
 var clock = new THREE.Clock();
 var cylinder, sphere, cube;
 
+
+var beton;
+
+// var controls = {
+//     rotationY: Math.PI / 1      // valeur par défaut
+// }
+
 function fillScene() {
     scene = new THREE.Scene();
 
@@ -32,7 +40,7 @@ function fillScene() {
 
     // GROUND
     var texture = new THREE.TextureLoader();
-    var grassTexture = texture.load('textures/grass.png'); // Assurez-vous que la texture d'herbe est dans le dossier textures
+    var grassTexture = texture.load('textures/grass.png');
 
     grassTexture.wrapS = THREE.RepeatWrapping;
     grassTexture.wrapT = THREE.RepeatWrapping;
@@ -40,7 +48,7 @@ function fillScene() {
 
     var solidGround = new THREE.Mesh(
         new THREE.PlaneGeometry(100000, 100000, 1000, 1000),
-        new THREE.MeshLambertMaterial({ map: grassTexture })
+        new THREE.MeshLambertMaterial({map: grassTexture})
     );
     solidGround.rotation.x = -Math.PI / 2;
 
@@ -58,27 +66,35 @@ function fillScene() {
 
     var road = new THREE.Mesh(
         new THREE.PlaneGeometry(2000, 20000),
-        new THREE.MeshLambertMaterial({ map: roadTexture })
+        new THREE.MeshLambertMaterial({map: roadTexture})
     );
     road.rotation.x = -Math.PI / 2;
     road.position.y = 20;
-	road.position.z = 20;
+    road.position.z = 20;
 
     scene.add(road);
 
 
-	//Ajout du carré de beton pour la station essence 
+    // Ajouter une dalle de béton
+    var betonTexture = texture.load('textures/beton.jpg');
+    betonTexture.wrapS = THREE.RepeatWrapping;
+    betonTexture.wrapT = THREE.RepeatWrapping;
+    betonTexture.repeat.set(1, 1);
 
-	var betonTexture = texture.load('textures/beton.jpg');
-    var beton = new THREE.Mesh(
-        new THREE.PlaneGeometry(5000, 5000),
-        new THREE.MeshLambertMaterial({ map: betonTexture })
+    var betonMaterial = new THREE.MeshLambertMaterial({map: betonTexture});
+
+    beton = new THREE.Mesh(
+        new THREE.BoxGeometry(5000, 350, 5000),
+        betonMaterial
     );
-    beton.rotation.x = -Math.PI / 2;
-	beton.position.set(-4000, 20, 0); // Positionner le carré de béton plus à droite
+    beton.position.set(-5000, 0, 2000);
+    beton.rotation.y = 0.46;
+
 
     scene.add(beton);
 
+
+    // Ajouter les arbres
     new MTLLoader()
         .load('tree_bonus.mtl', function (materials) {
             materials.preload();
@@ -87,32 +103,32 @@ function fillScene() {
                 .setMaterials(materials)
                 .load('tree_bonus.obj', function (object) {
                     // Colorer l'arbre en vert sapin et enlever le reflet blanc
-					object.traverse(function (child) {
-						if (child.isMesh) {
-							child.material = new THREE.MeshLambertMaterial({ color: 0x228B22 }); // Vert sapin
-						}
-					});
-
-					// Créer un rectangle de sapins à gauche de la route
-					var numTreesX = 20; // Nombre de sapins sur l'axe X
-					var numTreesZ = 100; // Nombre de sapins sur l'axe Z
-					var spacingX = 2000; // Espacement entre les sapins sur l'axe X
-					var spacingZ = 1000; // Espacement entre les sapins sur l'axe Z
-					var startX = 5000; // Position de départ sur l'axe X
-					var startZ = -50000; // Position de départ sur l'axe Z
-					 // Position de départ sur l'axe Z pour déplacer les arbres plus au sud
-					for (var x = 0; x < numTreesX; x++) {
-						for (var z = 0; z < numTreesZ; z++) {
-							var tree = object.clone();
-							tree.position.set(
-								startX + x * spacingX,
-								0,
-								startZ + z * spacingZ
-							);
-							tree.scale.setScalar(400);
-							scene.add(tree);
-						}
-					}
+                    object.traverse(function (child) {
+                        if (child.isMesh) {
+                            child.material = new THREE.MeshLambertMaterial({color: 0x228B22}); // Vert sapin
+                        }
+                    });
+
+                    // Créer un rectangle de sapins à gauche de la route
+                    var numTreesX = 20; // Nombre de sapins sur l'axe X
+                    var numTreesZ = 100; // Nombre de sapins sur l'axe Z
+                    var spacingX = 2000; // Espacement entre les sapins sur l'axe X
+                    var spacingZ = 1000; // Espacement entre les sapins sur l'axe Z
+                    var startX = 3000; // Position de départ sur l'axe X
+                    var startZ = -50000; // Position de départ sur l'axe Z
+                    // Position de départ sur l'axe Z pour déplacer les arbres plus au sud
+                    for (var x = 0; x < numTreesX; x++) {
+                        for (var z = 0; z < numTreesZ; z++) {
+                            var tree = object.clone();
+                            tree.position.set(
+                                startX + x * spacingX,
+                                0,
+                                startZ + z * spacingZ
+                            );
+                            tree.scale.setScalar(400);
+                            scene.add(tree);
+                        }
+                    }
 
                     // Créer plusieurs cercles de sapins
                     var numCircles = 10; // Nombre de cercles
@@ -136,7 +152,8 @@ function fillScene() {
                     }
                 });
         });
-}
+    }
+
 
 function init() {
     var canvasWidth = 846;
@@ -144,7 +161,7 @@ function init() {
     var canvasRatio = canvasWidth / canvasHeight;
 
     // RENDERER
-    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.gammaInput = true;
     renderer.gammaOutput = true;
     renderer.setSize(canvasWidth, canvasHeight);
@@ -160,6 +177,16 @@ function init() {
     // CONTROLS
     cameraControls = new OrbitControls(camera, renderer.domElement);
     cameraControls.target.set(0, 270, 0);
+
+    // GUI
+    var gui = new dat.GUI();
+
+    // Slider pour la rotation de la dalle de béton
+    // gui.add(controls, 'rotationY', 0, Math.PI * 2).step(0.01).name('Rotation Y').onChange(function (value) {
+    //     if (beton) {
+    //         beton.rotation.y = value;
+    //     }
+    // });
 }
 
 function addToDOM() {