From 50535cd670cca06ddf0ec79b8219ff24f6e8b300 Mon Sep 17 00:00:00 2001
From: RIFI Zaynab <zaynab.rifi4@etu.univ-lorraine.fr>
Date: Mon, 3 Mar 2025 23:01:30 +0000
Subject: [PATCH] Update 4 files
- /RIFI/OBJET3D/skull_lowPoly.obj
- /RIFI/OBJET3D/skull.obj
- /RIFI/index.html
- /RIFI/script.js
---
RIFI/OBJET3D/{skull_lowPoly.obj => skull.obj} | 0
RIFI/index.html | 37 +++++-
RIFI/script.js | 108 +++++++++++++++---
3 files changed, 124 insertions(+), 21 deletions(-)
rename RIFI/OBJET3D/{skull_lowPoly.obj => skull.obj} (100%)
diff --git a/RIFI/OBJET3D/skull_lowPoly.obj b/RIFI/OBJET3D/skull.obj
similarity index 100%
rename from RIFI/OBJET3D/skull_lowPoly.obj
rename to RIFI/OBJET3D/skull.obj
diff --git a/RIFI/index.html b/RIFI/index.html
index ee0baf1..5eedb7a 100644
--- a/RIFI/index.html
+++ b/RIFI/index.html
@@ -4,9 +4,40 @@
<meta charset="UTF-8">
<title>Projet webGL</title>
<style>
- body { margin: 0; }
- canvas { width: 100%; height: 100% }
- .centre{text-align: center;}
+ body {
+ margin: 0;
+ background-color: #111;
+ color: #eee;
+ font-family: 'Times New Roman', serif;
+ }
+ canvas {
+ width: 100%;
+ height: 100%;
+ display: block;
+ }
+ .container {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+ .centre {
+ text-align: center;
+ }
+ h1 {
+ font-size: 32px;
+ margin-bottom: 20px;
+ color: #d4af37; /* Gold color */
+ }
+ p {
+ margin-bottom: 20px;
+ line-height: 1.6;
+ }
+ #webGL {
+ border: 2px solid #d4af37;
+ margin: 20px auto;
+ width: 846px;
+ height: 494px;
+ }
</style>
</head>
<body>
diff --git a/RIFI/script.js b/RIFI/script.js
index 2cb35db..271f444 100644
--- a/RIFI/script.js
+++ b/RIFI/script.js
@@ -11,7 +11,11 @@ var skull;
function fillScene() {
scene = new THREE.Scene();
- scene.background = new THREE.Color(0x1a1a1a);
+ // Nous allons remplacer cette ligne par notre arrière-plan dégradé
+ // scene.background = new THREE.Color(0x000000);
+
+ // Ajout du fond dégradé
+ createGradientBackground();
// Éclairage dramatique
var mainLight = new THREE.DirectionalLight(0xFFAA55, 0.7);
@@ -26,40 +30,105 @@ function fillScene() {
loadSkull();
}
+// Nouvelle fonction pour créer l'arrière-plan dégradé
+function createGradientBackground() {
+ // Création d'un grand plan pour servir d'arrière-plan
+ const bgGeometry = new THREE.PlaneGeometry(2000, 1000);
+
+ // Création d'une texture avec un dégradé radial
+ const canvas = document.createElement('canvas');
+ canvas.width = 512;
+ canvas.height = 512;
+ const context = canvas.getContext('2d');
+
+ // Création du dégradé radial (circulaire)
+ // Centre du dégradé légèrement décalé vers le haut gauche pour simuler la source de lumière
+ const centerX = 180;
+ const centerY = 180;
+
+ const gradient = context.createRadialGradient(
+ centerX, centerY, 0, // Point de départ du dégradé
+ centerX, centerY, 400 // Point d'arrivée du dégradé
+ );
+
+ // Couleurs du dégradé
+ gradient.addColorStop(0, '#111111'); // Gris très sombre au centre (légère illumination)
+ gradient.addColorStop(0.3, '#050505'); // Transition vers le noir
+ gradient.addColorStop(1, '#000000'); // Noir pur aux bords
+
+ // Remplir le canvas avec le dégradé
+ context.fillStyle = gradient;
+ context.fillRect(0, 0, 512, 512);
+
+ const texture = new THREE.CanvasTexture(canvas);
+
+ // Création du matériau avec la texture de dégradé
+ const bgMaterial = new THREE.MeshBasicMaterial({
+ map: texture,
+ side: THREE.DoubleSide
+ });
+
+ // Création du mesh d'arrière-plan et positionnement
+ const background = new THREE.Mesh(bgGeometry, bgMaterial);
+ background.position.z = -400; // Derrière la scène
+ background.position.y = 50; // Centré verticalement
+
+ scene.add(background);
+}
+
function createTable() {
var tableGeometry = new THREE.BoxGeometry(600, 20, 300);
- var tableMaterial = new THREE.MeshPhongMaterial({
- color: 0x332211,
- shininess: 30
+
+ // Chargement d'une texture bois foncé
+ const textureLoader = new THREE.TextureLoader();
+ const woodTexture = textureLoader.load(
+ 'textures/dark_wood.jpg',
+ undefined,
+ undefined,
+ function(error) {
+ console.error('Error loading texture:', error);
+ }
+ );
+
+ var tableMaterial = new THREE.MeshStandardMaterial({
+ map: woodTexture,
+ color: 0x2A1B0A, // Brun foncé
+ roughness: 0.6, // Un peu de rugosité pour un effet plus réaliste
+ metalness: 0.2 // Légèrement métallique pour capturer la lumière
});
+
var table = new THREE.Mesh(tableGeometry, tableMaterial);
table.position.y = 0;
scene.add(table);
}
+
function loadSkull() {
var loader = new OBJLoader();
loader.load(
- 'skul.obj',
+ 'OBJET3D/skul.obj',
function(object) {
skull = object;
- skull.scale.set(3, 3, 3);
- skull.position.set(40, 20, 50); // Place-le juste au-dessus de la table
-
- // Y=50 pour placer au-dessus de la table
- skull.rotation.x = Math.PI / 8;
+ skull.scale.set(6, 6, 6);
+ skull.position.set(120, -35, 0);
+
+ skull.rotation.x = Math.PI /50;
skull.rotation.y = Math.PI / 200;
- skull.rotation.set(-Math.PI / 2.5, 0, 0);
- // Tourne le crâne pour qu'il regarde vers l'avant
-
+ skull.rotation.set(-Math.PI / 2, 0, -Math.PI / 5);
+
+ // Création d'un matériau doré et brillant pour le crâne
+ const skullMaterial = new THREE.MeshPhongMaterial({
+ color: 0xFFF8F0,
+ specular: 0xFFF8F0,
+ shininess: 40,
+ emissive: 0x332211,
+ emissiveIntensity: 0.1
+ });
skull.traverse(function(child) {
if (child.isMesh) {
- child.material = new THREE.MeshPhongMaterial({
- color: 0xE0D0B0,
- shininess: 9
- });
+ child.material = skullMaterial;
}
});
scene.add(skull);
@@ -70,7 +139,10 @@ function loadSkull() {
function init() {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(846, 494);
- renderer.setClearColor(0x1a1a1a, 1.0);
+
+
+
+ renderer.setClearColor(0x000000, 1.0);
var container = document.getElementById('webGL');
container.appendChild(renderer.domElement);
--
GitLab