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

reflet

parent edcbc95a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ALVARIZA-BILLAR_DESERT_KANY/checklistProjet.md
+ 8
− 8
View file @ 887dd171
- [ ] 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
......
ALVARIZA-BILLAR_DESERT_KANY/script.js
+ 92
− 27
View file @ 887dd171
......@@ -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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment