Skip to content
Snippets Groups Projects
Commit 26bc4151 authored by Romain's avatar Romain
Browse files

last version

parent c6e87d84
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
ALVARIZA-BILLAR_DESERT_KANY/Threejs.html deleted 100644 → 0
+ 0
− 43
View file @ c6e87d84
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
.centre {
text-align: center;
}
</style>
</head>
<body>
<!-- API importe du site de Three.js -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<!-- JQuery pour afficher les erreurs -->
<script src="../lib/jquery-1.8.3.min.js"></script>
<!-- Stats pour afficher les FPS -->
<script src="../lib/stats-ALVARIZA_DESERT_KANY/stats.min.js"></script>
<!-- Un titre centre -->
<h1 class="centre"> projet peinture </h1>
<div id="webGL" class="centre"></div>
<!-- Mon script avec un chemin relatif -->
<script type="module" src="script.js"></script>
<p class="centre"> projet </p>
</body>
</html>
\ No newline at end of file
ALVARIZA-BILLAR_DESERT_KANY/checklistProjet.md
+ 1
− 1
View file @ 26bc4151
......@@ -6,7 +6,7 @@
- [x] Couleur
- [ ] Transparence
- [x] Eclairage
- [ ] Ombres portées
- [x] Ombres portées
- [x] Position de la caméra
- [x] Brouillard
- [x] Effet miroir
......
ALVARIZA-BILLAR_DESERT_KANY/credits.md deleted 100644 → 0
+ 0
− 0
View file @ c6e87d84
ALVARIZA-BILLAR_DESERT_KANY/index.html
+ 1
− 1
View file @ 26bc4151
......@@ -26,7 +26,7 @@
<input type="checkbox" id="item6" checked> <label for="item6">Couleur</label>
<input type="checkbox" id="item7" checked> <label for="item7">Transparence</label>
<input type="checkbox" id="item8" checked> <label for="item8">Éclairage</label>
<input type="checkbox" id="item9" > <label for="item9">Ombres portées</label>
<input type="checkbox" id="item9" checked > <label for="item9">Ombres portées</label>
<input type="checkbox" id="item10" checked> <label for="item10">Position de la caméra</label>
<input type="checkbox" id="item11" checked> <label for="item11">Brouillard</label>
<input type="checkbox" id="item12" > <label for="item12">Effet miroir</label>
......
ALVARIZA-BILLAR_DESERT_KANY/script.js
+ 73
− 19
View file @ 26bc4151
......@@ -22,8 +22,6 @@ 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
......@@ -55,15 +53,33 @@ function fillScene() {
*/
function light() {
// Lumière forte pour accentuer les reflets métalliques
const metallicLight = new THREE.PointLight(0xffffff, 200, 5000);
const metallicLight = new THREE.PointLight(0xffffff, 2, 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);
// Lumière directionnelle principale (simule le soleil)
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.8);
directionalLight.position.set(5000, 7000, -5000); // Position élevée pour projeter des ombres longues
directionalLight.castShadow = true;
// Améliorer la qualité des ombres
directionalLight.shadow.mapSize.width = 8192;
directionalLight.shadow.mapSize.height = 8192;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 20000;
directionalLight.shadow.camera.left = -10000;
directionalLight.shadow.camera.right = 10000;
directionalLight.shadow.camera.top = 10000;
directionalLight.shadow.camera.bottom = -10000;
// Ajouter la lumière à la scène
scene.add(directionalLight);
// Ajouter un helper pour visualiser la zone de projection des ombres
const lightHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
//scene.add(lightHelper);
}
/**
......@@ -78,8 +94,12 @@ function ground() {
var solidGround = new THREE.Mesh(
new THREE.PlaneGeometry(100000, 100000, 1000, 1000),
new THREE.MeshStandardMaterial({map: grassTexture})
new THREE.MeshStandardMaterial({
map: grassTexture,
side: THREE.DoubleSide
})
);
solidGround.receiveShadow = true;
solidGround.rotation.x = -Math.PI / 2;
scene.add(solidGround);
......@@ -111,6 +131,8 @@ function road() {
road.rotation.x = -Math.PI / 2;
road.position.y = 10;
road.position.z = 10;
road.receiveShadow = true;
road.castShadow = true;
scene.add(road);
}
......@@ -127,7 +149,15 @@ function loadCar() {
car.traverse(function (child) {
if (child.isMesh) {
child.material = new THREE.MeshStandardMaterial({color: 0xff0000});
child.material = new THREE.MeshStandardMaterial({
color: 0xff0000,
metalness: 1.0,
roughness: 0.1,
envMap: envMap,
});
child.castShadow = true;
child.receiveShadow = true;
}
});
......@@ -179,6 +209,9 @@ function capsuleBeton() {
capsuleMesh.rotation.z = 1.35;
capsuleMesh.position.set(-2750, 0, 650);
capsuleMesh.castShadow = true;
capsuleMesh.receiveShadow = true;
scene.add(capsuleMesh);
}
......@@ -197,6 +230,10 @@ function dalleBeton() {
);
beton.position.set(-8000, 0, 1850);
beton.rotation.y = 0.2225;
beton.castShadow;
beton.receiveShadow;
scene.add(beton);
}
......@@ -216,12 +253,20 @@ function poleAndFlag() {
const bottomPoleGeometry = new THREE.CylinderGeometry(30, 30, bottomHeight, 32);
const bottomPole = new THREE.Mesh(bottomPoleGeometry, redMaterial);
bottomPole.position.set(-5000, bottomHeight / 2, 6000); // Ajustement pour toucher le sol
bottomPole.castShadow = true;
bottomPole.receiveShadow = true;
scene.add(bottomPole);
// Haut du poteau (gris)
const topPoleGeometry = new THREE.CylinderGeometry(20, 30, topHeight, 32);
const topPole = new THREE.Mesh(topPoleGeometry, grayMaterial);
topPole.position.set(-5000, bottomHeight + topHeight / 2, 6000); // Position correcte au-dessus du bas
topPole.castShadow = true;
topPole.receiveShadow = true;
scene.add(topPole);
// Enseigne (panneau plus petit)
......@@ -234,6 +279,9 @@ function poleAndFlag() {
sign.position.set(-4800, bottomHeight + topHeight - 150, 6000); // Un peu en dessous du sommet
sign.rotation.y = 0;
sign.castShadow = true;
sign.receiveShadow = true;
// Ajouter l'enseigne
scene.add(sign);
}
......@@ -366,9 +414,6 @@ 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;
......@@ -378,6 +423,9 @@ function house() {
roofHesh2.castShadow = true;
roofHesh2.receiveShadow = true;
roofConeMesh.castShadow = true;
roofConeMesh.receiveShadow = true;
baseHesh.position.set(
dallePosition.x,
......@@ -435,7 +483,7 @@ function house() {
// Ajouter un helper pour voir la position de la lumière
const lightHelper = new THREE.PointLightHelper(pyramidLight, 1000);
scene.add(lightHelper);
// scene.add(lightHelper);
}
......@@ -455,7 +503,7 @@ function pompe() {
const baseMaterial = new THREE.MeshStandardMaterial({
color: 0xff0000, // Rouge brillant
metalness: 1.0, // Métallique au maximum
roughness: 0.05, // Surface réfléchissante
roughness: 0.005, // Surface réfléchissante
envMap: envMap, // Appliquer l'environnement pour les reflets
});
......@@ -464,6 +512,10 @@ function pompe() {
const base = new THREE.Mesh(baseGeometry, baseMaterial);
base.position.set(position.x, 500, position.z);
base.rotation.y = 0.2225;
base.castShadow = true;
base.receiveShadow = true;
scene.add(base);
......@@ -473,6 +525,10 @@ function pompe() {
const metalTop = new THREE.Mesh(metalGeometry, metalMaterial);
metalTop.position.set(position.x, 1000, position.z);
metalTop.rotation.y = 0.2225;
metalTop.castShadow = true;
metalTop.receiveShadow = true;
scene.add(metalTop);
// Sprite pour le logo
......@@ -516,6 +572,8 @@ function forest() {
.load('tree_bonus.obj', function (object) {
object.traverse(function (child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
child.material = new THREE.MeshStandardMaterial({color: 0x006600});
}
});
......@@ -555,15 +613,11 @@ function init() {
// RENDERER
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true; // Activer le rendu des ombres
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Ombres douces
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);
......
ALVARIZA-BILLAR_DESERT_KANY/source.txt deleted 100644 → 0
+ 0
− 3
View file @ c6e87d84
Arbre poly : https://www.turbosquid.com/3d-models/3d-low-poly-trees-1431822
Formule 1 : https://free3d.com/3d-model/formula-1-lowpoly-87257.html
sign: https://www.pngegg.com/fr/png-ctuzm
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment