Skip to content
Snippets Groups Projects
Commit 887dd171 authored by Romain's avatar Romain
Browse files

reflet

parent edcbc95a
Branches
No related tags found
No related merge requests found
- [ ] Esthetisme
- [ ] Mise en page de la page web
- [x] Mise en page de la page web
- [ ] Paragraphe(s) d'explications techniques
- [ ] Légèreté du dossier (<2Mo)
- [x] Légèreté du dossier (<2Mo)
- [x] Géométrie
- [x] Couleur
- [ ] Transparence
- [ ] Eclairage
- [x] Eclairage
- [ ] Ombres portées
- [ ] Position de la caméra
- [ ] Brouillard
- [ ] Effet miroir
- [x] Position de la caméra
- [x] Brouillard
- [x] Effet miroir
- [x] Texture classique
- [ ] Texture avec transparence
- [ ] Sprites
- [ ] Environment map
- [x] Sprites
- [x] Environment map
- [x] Skybox
- [x] Animations
- [ ] normal maps
......
......@@ -21,6 +21,9 @@ let cameraControls;
const clock = new THREE.Clock();
let beton;
let car;
let envMap;
let cubeCamera, renderTarget;
const stats = new Stats();
stats.showPanel(0); // 0: afficher le panneau des FPS
......@@ -39,11 +42,11 @@ function fillScene() {
capsuleBeton();
dalleBeton();
poleAndFlag();
house(); // TODO : à compléter
house();
pompe();
forest();
man();
//scene.fog = new THREE.Fog(0x999999, 10000, 20000); // Couleur grise, densité du brouillard
scene.fog = new THREE.Fog(0x999999, 10000, 50000); // Couleur grise, densité du brouillard
}
......@@ -51,13 +54,16 @@ function fillScene() {
* Fonction qui gère les lumières
*/
function light() {
scene.add(new THREE.AmbientLight(0x222222));
var light = new THREE.DirectionalLight(0xFFFFFF, 0.9);
light.position.set(200, 500, 500);
scene.add(light);
light = new THREE.DirectionalLight(0xFFFFFF, 10);
light.position.set(-200, -100, -400);
scene.add(light);
// Lumière forte pour accentuer les reflets métalliques
const metallicLight = new THREE.PointLight(0xffffff, 200, 5000);
metallicLight.position.set(-3000, 1000, 2000);
scene.add(metallicLight);
// Une lumière directionnelle pour les reflets doux
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(500, 1000, -1000);
scene.add(directionalLight);
}
/**
......@@ -72,7 +78,7 @@ function ground() {
var solidGround = new THREE.Mesh(
new THREE.PlaneGeometry(100000, 100000, 1000, 1000),
new THREE.MeshLambertMaterial({map: grassTexture})
new THREE.MeshStandardMaterial({map: grassTexture})
);
solidGround.rotation.x = -Math.PI / 2;
scene.add(solidGround);
......@@ -92,7 +98,7 @@ function road() {
roadTexture.wrapT = THREE.RepeatWrapping;
roadTexture.repeat.set(1, 10);
var roadMaterial = new THREE.MeshLambertMaterial({ // Matériau de la route pour éviter le clipping
var roadMaterial = new THREE.MeshStandardMaterial({ // Matériau de la route pour éviter le clipping
map: roadTexture,
polygonOffset: true,
polygonOffsetFactor: -2,
......@@ -167,7 +173,7 @@ function capsuleBeton() {
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 capsuleMaterial = new THREE.MeshStandardMaterial({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;
......@@ -183,7 +189,7 @@ function dalleBeton() {
// Récupérer la texture béton via la fonction dédiée
var betonTexture = createBetonTexture();
var betonMaterial = new THREE.MeshLambertMaterial({map: betonTexture});
var betonMaterial = new THREE.MeshStandardMaterial({map: betonTexture});
beton = new THREE.Mesh(
new THREE.BoxGeometry(5500, 350, 5500),
......@@ -246,7 +252,7 @@ function house() {
const outerCubeDepth = 4000;
const outerCubeMesh = new THREE.Mesh(
new THREE.BoxGeometry(outerCubeWidth, outerCubeHeight, outerCubeDepth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
outerCubeMesh.updateMatrix();
......@@ -257,7 +263,7 @@ function house() {
const houseRoof1Depth = outerCubeDepth + 250;
const houseRoof1 = new THREE.Mesh(
new THREE.BoxGeometry(houseRoof1Width, houseRoof1Height, houseRoof1Depth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
......@@ -267,7 +273,7 @@ function house() {
const houseRoof2Depth = houseRoof1Depth + 250;
const houseRoof2 = new THREE.Mesh(
new THREE.BoxGeometry(houseRoof2Width, houseRoof2Height, houseRoof2Depth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
......@@ -277,7 +283,7 @@ function house() {
const innerCubeDepth = outerCubeDepth - 500;
const innerCubeMesh = new THREE.Mesh(
new THREE.BoxGeometry(innerCubeWidth, innerCubeHeight, innerCubeDepth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
innerCubeMesh.updateMatrix();
......@@ -287,7 +293,7 @@ function house() {
const doorDepth = outerCubeDepth / 5;
const doorMesh = new THREE.Mesh(
new THREE.BoxGeometry(doorWidth, doorHeight, doorDepth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
doorMesh.position.set(
(innerCubeWidth / 1.9) + 1,
......@@ -302,7 +308,7 @@ function house() {
const windowLeftDepth = outerCubeDepth / 5;
const windowLeftMesh = new THREE.Mesh(
new THREE.BoxGeometry(windowLeftWidth, windowLeftHeight, windowLeftDepth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
windowLeftMesh.position.set(
(innerCubeWidth / 1.9) + 1,
......@@ -317,7 +323,7 @@ function house() {
const windowRightDepth = windowLeftDepth;
const windowRightMesh = new THREE.Mesh(
new THREE.BoxGeometry(windowRightWidth, windowRightHeight, windowRightDepth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
windowRightMesh.position.set(
(innerCubeWidth / 1.9) + 1,
......@@ -332,7 +338,7 @@ function house() {
const windowCentralDepth = outerCubeWidth + 2;
const windowCentralMesh = new THREE.Mesh(
new THREE.BoxGeometry(windowCentralWidth, windowCentralHeight, windowCentralDepth),
new THREE.MeshLambertMaterial({color: 0x888888})
new THREE.MeshStandardMaterial({color: 0x888888})
);
windowCentralMesh.position.set(0, 0, 0);
windowCentralMesh.updateMatrix();
......@@ -342,11 +348,11 @@ function house() {
const roofConeHeight = outerCubeHeight;
const roofConeMesh = new THREE.Mesh(
new THREE.ConeGeometry(roofConeWidth, roofConeHeight, 4),
new THREE.MeshLambertMaterial({color: 0xFF0000})
new THREE.MeshStandardMaterial({color: 0xFF0000})
);
roofConeMesh.position.set(
dallePosition.x,
dallePosition.y + (dalleHeight * 2) + outerCubeHeight + (houseRoof1Height * 2) + (houseRoof2Height * 2) - 100 , // Posé sur le 1er toit
dallePosition.y + (dalleHeight * 2) + outerCubeHeight + (houseRoof1Height * 2) + (houseRoof2Height * 2) - 100, // Posé sur le 1er toit
dallePosition.z
);
......@@ -360,6 +366,18 @@ function house() {
const roofHesh1 = CSG.subtract(houseRoof1, innerCubeMesh);
const roofHesh2 = CSG.subtract(houseRoof2, innerCubeMesh);
roofConeMesh.castShadow = true;
roofConeMesh.receiveShadow = true;
baseHesh.castShadow = true;
baseHesh.receiveShadow = true;
roofHesh1.castShadow = true;
roofHesh1.receiveShadow = true;
roofHesh2.castShadow = true;
roofHesh2.receiveShadow = true;
baseHesh.position.set(
dallePosition.x,
......@@ -395,7 +413,29 @@ function house() {
// Creation de la lumiere à 360° au centre du toit pyramidal
const pyramidLight = new THREE.PointLight(0xFFCC06, 1, 1000);
const pyramidLight = new THREE.PointLight(0xffcc66, 1000, 5000);
pyramidLight.position.set(
dallePosition.x,
dallePosition.y + dalleHeight / 2 + outerCubeHeight + houseRoof1Height * 1.655 + houseRoof2Height * 1.655 + roofConeHeight / 3,
dallePosition.z
)
// Activer les ombres pour la lumière
// Activation des ombres
pyramidLight.castShadow = true;
pyramidLight.shadow.mapSize.width = 4096; // Résolution élevée pour des ombres nettes
pyramidLight.shadow.mapSize.height = 4096;
pyramidLight.shadow.camera.near = 1;
pyramidLight.shadow.camera.far = 5000;
// Ajouter la lumière à la scène
scene.add(pyramidLight);
// Ajouter un helper pour voir la position de la lumière
const lightHelper = new THREE.PointLightHelper(pyramidLight, 1000);
scene.add(lightHelper);
}
......@@ -410,14 +450,23 @@ function pompe() {
];
pompePositions.forEach(position => {
// Base de la pompe (rectangle rou ge)
// Base de la pompe (rectangle rouge)
// Matériau métallique avec reflets pour la base de la pompe
const baseMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000, // Rouge brillant
metalness: 1.0, // Métallique au maximum
roughness: 0.05, // Surface réfléchissante
envMap: envMap, // Appliquer l'environnement pour les reflets
});
// Base de la pompe (rectangle rouge métallique)
const baseGeometry = new THREE.BoxGeometry(300, 1000, 300);
const baseMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
const base = new THREE.Mesh(baseGeometry, baseMaterial);
base.position.set(position.x, 500, position.z);
base.rotation.y = 0.2225;
scene.add(base);
// Partie métallique supérieure (détail en acier)
const metalGeometry = new THREE.BoxGeometry(320, 50, 320);
const metalMaterial = new THREE.MeshStandardMaterial({color: 0xaaaaaa, metalness: 1, roughness: 0.3});
......@@ -467,7 +516,7 @@ function forest() {
.load('tree_bonus.obj', function (object) {
object.traverse(function (child) {
if (child.isMesh) {
child.material = new THREE.MeshLambertMaterial({color: 0x006600});
child.material = new THREE.MeshStandardMaterial({color: 0x006600});
}
});
......@@ -509,6 +558,12 @@ function init() {
renderer.setSize(canvasWidth, canvasHeight);
renderer.setClearColor(0xAAAAAA, 1.0);
// Création d'une caméra de capture pour les reflets dynamiques
renderTarget = new THREE.WebGLCubeRenderTarget(1024, {format: THREE.RGBAFormat, generateMipmaps: true});
cubeCamera = new THREE.CubeCamera(1, 10000, renderTarget);
scene.add(cubeCamera);
var container = document.getElementById('webGL');
container.appendChild(renderer.domElement);
......@@ -526,6 +581,16 @@ function init() {
gui.add(window, 'carSpeed', 10, 200).step(5).name('Vitesse f1');
gui.add(window, 'carMoving').name('F1 mouvement');
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// Charger un environnement de réflexion pour le métal
const cubeTextureLoader = new THREE.CubeTextureLoader();
envMap = cubeTextureLoader.setPath('textures/skybox/').load([
'px.jpg', 'nx.jpg', // Côtés
'py.jpg', 'ny.jpg', // Dessus / Dessous
'pz.jpg', 'nz.jpg' // Devant / Derrière
]);
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment