Update 4 files

- /RIFI/OBJET3D/skull_lowPoly.obj - /RIFI/OBJET3D/skull.obj - /RIFI/index.html - /RIFI/script.js

Update 4 files
50535cd6 · RIFI Zaynab · 00957ca0 · 50535cd6 · 50535cd6 · 50535cd6
Commit 50535cd6 authored 3 months ago by RIFI Zaynab
--- a/RIFI/OBJET3D/skull_lowPoly.obj
+++ b/RIFI/OBJET3D/skull_lowPoly.obj
--- a/RIFI/index.html
+++ b/RIFI/index.html
@@ -4,9 +4,40 @@
    <meta charset="UTF-8">
    <title>Projet webGL</title>
    <style>
-        body { margin: 0; }
+        body { 
-        canvas { width: 100%; height: 100% }
+            margin: 0; 
-        .centre{text-align: center;}
+            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>

--- 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,
+    // Chargement d'une texture bois foncé
-        shininess: 30
+    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.scale.set(6, 6, 6);
-            skull.position.set(40, 20, 50);  // Place-le juste au-dessus de la table
+            skull.position.set(120, -35, 0);
-             // Y=50 pour placer au-dessus de la table
+            skull.rotation.x = Math.PI /50;
-             skull.rotation.x = Math.PI / 8;
            skull.rotation.y = Math.PI / 200;
-            skull.rotation.set(-Math.PI / 2.5, 0, 0);
+            skull.rotation.set(-Math.PI / 2, 0, -Math.PI / 5);
- // Tourne le crâne pour qu'il regarde vers l'avant
+            // 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({ 
+                    child.material = skullMaterial;
-                        color: 0xE0D0B0,
-                        shininess: 9
-                    });
                }
            });
            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);