From 3c9fd899bb0a3d3cefc879ea0d7d8747ce838468 Mon Sep 17 00:00:00 2001
From: deser <romain.desert6@etu.univ-lorraine.fr>
Date: Mon, 10 Mar 2025 20:15:30 +0100
Subject: [PATCH] clarification code + modification dalle beton
---
ALVARIZA-BILLAR_DESERT_KANY/projet.js | 113 ++++++++++++++++----------
1 file changed, 70 insertions(+), 43 deletions(-)
diff --git a/ALVARIZA-BILLAR_DESERT_KANY/projet.js b/ALVARIZA-BILLAR_DESERT_KANY/projet.js
index dd30715..6518737 100644
--- a/ALVARIZA-BILLAR_DESERT_KANY/projet.js
+++ b/ALVARIZA-BILLAR_DESERT_KANY/projet.js
@@ -1,23 +1,31 @@
"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() {
--
GitLab