diff --git a/RIFI/index.html b/RIFI/index.html
index 76e27dc119783f47da855d49712c43bab0798e9a..2caebab66e7e168cd268a36e54ef020fc2a21207 100644
--- a/RIFI/index.html
+++ b/RIFI/index.html
@@ -1 +1,32 @@
-Le travail n'a pas encore commencé!!!
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title>Projet webGL</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 type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+ <!-- Un titre centre -->
+ <h1 class="centre"> Projet webGL</h1>
+ <div id="webGL" class="centre"></div>
+ <!-- Mon script avec un chemin relatif -->
+ <script type="module" src="particle-grid.js"></script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/RIFI/script.js b/RIFI/script.js
new file mode 100644
index 0000000000000000000000000000000000000000..2cb35db70dbe6b8b2b057ad675da67575a832669
--- /dev/null
+++ b/RIFI/script.js
@@ -0,0 +1,98 @@
+"use strict";
+
+import * as THREE from "three";
+import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+var camera, scene, renderer;
+var cameraControls;
+var clock = new THREE.Clock();
+var skull;
+
+function fillScene() {
+ scene = new THREE.Scene();
+ scene.background = new THREE.Color(0x1a1a1a);
+
+ // Éclairage dramatique
+ var mainLight = new THREE.DirectionalLight(0xFFAA55, 0.7);
+ mainLight.position.set(-200, 200, 100);
+ scene.add(mainLight);
+
+ var ambientLight = new THREE.AmbientLight(0x222222);
+ scene.add(ambientLight);
+
+ // Table
+ createTable();
+ loadSkull();
+}
+
+function createTable() {
+ var tableGeometry = new THREE.BoxGeometry(600, 20, 300);
+ var tableMaterial = new THREE.MeshPhongMaterial({
+ color: 0x332211,
+ shininess: 30
+ });
+ var table = new THREE.Mesh(tableGeometry, tableMaterial);
+ table.position.y = 0;
+ scene.add(table);
+}
+
+function loadSkull() {
+ var loader = new OBJLoader();
+ loader.load(
+ '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.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.traverse(function(child) {
+ if (child.isMesh) {
+ child.material = new THREE.MeshPhongMaterial({
+ color: 0xE0D0B0,
+ shininess: 9
+ });
+ }
+ });
+ scene.add(skull);
+ }
+ );
+}
+
+function init() {
+ renderer = new THREE.WebGLRenderer({ antialias: true });
+ renderer.setSize(846, 494);
+ renderer.setClearColor(0x1a1a1a, 1.0);
+
+ var container = document.getElementById('webGL');
+ container.appendChild(renderer.domElement);
+
+ camera = new THREE.PerspectiveCamera(35, 846/494, 1, 8000);
+ camera.position.set(0, 200, 600);
+
+ cameraControls = new OrbitControls(camera, renderer.domElement);
+ cameraControls.target.set(0, 50, 0);
+}
+
+function animate() {
+ requestAnimationFrame(animate);
+ var delta = clock.getDelta();
+ cameraControls.update(delta);
+ renderer.render(scene, camera);
+}
+
+try {
+ init();
+ fillScene();
+ animate();
+} catch(e) {
+ console.error(e);
+}
\ No newline at end of file