From 127f197c62e2450877e7088504d2e519da99becf Mon Sep 17 00:00:00 2001
From: deser <romain.desert6@etu.univ-lorraine.fr>
Date: Tue, 11 Mar 2025 21:09:36 +0100
Subject: [PATCH] ajout capsule beton + suppression clipping road
---
ALVARIZA-BILLAR_DESERT_KANY/projet.js | 99 +++++++++++++++++++--------
1 file changed, 69 insertions(+), 30 deletions(-)
diff --git a/ALVARIZA-BILLAR_DESERT_KANY/projet.js b/ALVARIZA-BILLAR_DESERT_KANY/projet.js
index f5fba8c..397bdcd 100644
--- a/ALVARIZA-BILLAR_DESERT_KANY/projet.js
+++ b/ALVARIZA-BILLAR_DESERT_KANY/projet.js
@@ -5,10 +5,10 @@
/*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();
@@ -17,8 +17,8 @@ var camera, renderer;
var cameraControls;
var clock = new THREE.Clock();
var beton;
-var car;
-window.carSpeed = 50;
+var car;
+window.carSpeed = 50;
window.carMoving = true;
function fillScene() {
@@ -42,7 +42,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;
scene.add(solidGround);
@@ -57,32 +57,68 @@ function fillScene() {
roadTexture.wrapT = THREE.RepeatWrapping;
roadTexture.repeat.set(1, 10);
+ var roadMaterial = new THREE.MeshLambertMaterial({ // Matériau de la route pour éviter le clipping
+ map: roadTexture,
+ polygonOffset: true,
+ polygonOffsetFactor: -2,
+ polygonOffsetUnits: -2
+ });
var road = new THREE.Mesh(
new THREE.PlaneGeometry(2000, 100000),
- new THREE.MeshLambertMaterial({ map: roadTexture })
+ roadMaterial
);
road.rotation.x = -Math.PI / 2;
road.position.y = 10;
road.position.z = 10;
scene.add(road);
+
// 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 betonMaterial = new THREE.MeshLambertMaterial({ map: betonTexture });
+ var betonMaterial = new THREE.MeshLambertMaterial({map: betonTexture});
beton = new THREE.Mesh(
- new THREE.BoxGeometry(5000, 350, 5000),
+ new THREE.BoxGeometry(5500, 350, 5500),
betonMaterial
);
- beton.position.set(-5000, 0, 2000);
- beton.rotation.y = 0.46;
+ beton.position.set(-8000, 0, 1850);
+ beton.rotation.y = 0.2225;
scene.add(beton);
-
+
+ // CAPSULE EN BÉTON (sous les pompes à essence)
+ var capsuleLength = 5700; // Longueur de la capsule
+ var capsuleHeight = 800; // Largeur de la capsule
+ var radius = capsuleHeight / 2; // Rayon des extrémités arrondies
+
+ var capsuleShape = new THREE.Shape();
+ capsuleShape.moveTo(radius, 0); // Début du tracé
+ capsuleShape.lineTo(capsuleLength - radius, 0); // Ligne droite avant arrondi
+ capsuleShape.absarc(capsuleLength - radius, radius, radius, -Math.PI / 2, Math.PI / 2, false); // Arrondi
+ capsuleShape.lineTo(radius, capsuleHeight); // Ligne droite après arrondi
+ capsuleShape.absarc(radius, radius, radius, Math.PI / 2, 3 * Math.PI / 2, false); // Arrondi
+
+ var extrudeSettings = {
+ depth: 350, // Hauteur de la capsule
+ bevelEnabled: false // Pas de biseau
+ };
+
+ var capsuleGeometry = new THREE.ExtrudeGeometry(capsuleShape, extrudeSettings); // Géométrie de la capsule
+ capsuleGeometry.center(); // Centrer la géométrie
+ var capsuleMaterial = new THREE.MeshLambertMaterial({map: betonTexture}); // Matériau de la capsule (béton)
+ var capsuleMesh = new THREE.Mesh(capsuleGeometry, capsuleMaterial); // Création du mesh
+ capsuleMesh.rotation.x = Math.PI / 2;
+ capsuleMesh.rotation.z = 1.35;
+ capsuleMesh.position.set(-2750, 0, 650);
+
+ scene.add(capsuleMesh);
+
+
+ // ARBRES
new MTLLoader()
.load('tree_bonus.mtl', function (materials) {
materials.preload();
@@ -91,12 +127,13 @@ function fillScene() {
.load('tree_bonus.obj', function (object) {
object.traverse(function (child) {
if (child.isMesh) {
- child.material = new THREE.MeshLambertMaterial({ color: 0x006600 });
+ child.material = new THREE.MeshLambertMaterial({color: 0x006600});
}
});
// Arbres à gauche de la route
- var numTreesX = 23, numTreesZ = 100, spacingX = 2000, spacingZ = 1000, startX = 3000, startZ = -50000;
+ var numTreesX = 23, numTreesZ = 100, spacingX = 2000, spacingZ = 1000, startX = 3000,
+ startZ = -50000;
for (var x = 0; x < numTreesX; x++) {
for (var z = 0; z < numTreesZ; z++) {
var tree = object.clone();
@@ -107,8 +144,9 @@ function fillScene() {
}
// Arbres à droite de la route
- var numTreesX = 20, numTreesZ = 100, spacingX = 2000, spacingZ = 1000, startX = 3000, startZ = -50000;
- startX = -7000;
+ var numTreesX = 20, numTreesZ = 100, spacingX = 2000, spacingZ = 1000, startX = 3000,
+ startZ = -50000;
+ startX = -10000;
for (var x = 0; x < numTreesX; x++) {
for (var z = 0; z < numTreesZ; z++) {
var tree = object.clone();
@@ -120,35 +158,36 @@ function fillScene() {
});
});
+ // Voiture
loadCar();
}
// Charger la voiture
function loadCar() {
new OBJLoader().load('car.obj', function (object) {
- car = object;
- car.scale.setScalar(200);
- car.position.set(0, 30, -9000);
- car.rotation.y = 0;
-
+ car = object;
+ car.scale.setScalar(200);
+ car.position.set(0, 30, -9000);
+ car.rotation.y = 0;
+
- car.traverse(function (child) {
+ car.traverse(function (child) {
if (child.isMesh) {
- child.material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
+ child.material = new THREE.MeshStandardMaterial({color: 0xff0000});
}
});
-
- scene.add(car);
- });
+
+ scene.add(car);
+ });
}
function init() {
- var canvasWidth = 846;
+ var canvasWidth = 846;
var canvasHeight = 494;
var canvasRatio = canvasWidth / canvasHeight;
// RENDERER
- renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColor(0xAAAAAA, 1.0);
@@ -163,10 +202,10 @@ function init() {
cameraControls = new OrbitControls(camera, renderer.domElement);
cameraControls.target.set(0, 270, 0);
-
+
var gui = new dat.GUI();
gui.add(window, 'carSpeed', 10, 200).step(5).name('Vitesse f1');
- gui.add(window, 'carMoving').name('f1 on/off');
+ gui.add(window, 'carMoving').name('F1 mouvement');
}
function animate() {
--
GitLab