Table + nappe (skull positionné)

HERRY-M--HERRY-E/TABLO.js

@@ -12,45 +12,100 @@ import { dat } from '../lib/dat.gui.min.js';
 import { Coordinates } from '../lib/Coordinates.js';
 
 var camera, scene, renderer;
-var windowScale;
-var cameraControls, effectController;
-var clock = new THREE.Clock();
-var gridX = true;
-var gridY = false;
-var gridZ = false;
-var axes = true;
-var ground = true;
+var cameraControls, clock = new THREE.Clock();
 
 function init() {
-    var canvasWidth = 846;
-    var canvasHeight = 494;
-    // For grading the window is fixed in size; here's general code:
     var canvasWidth = window.innerWidth;
     var canvasHeight = window.innerHeight;
     var canvasRatio = canvasWidth / canvasHeight;
+
     // RENDERER
     renderer = new THREE.WebGLRenderer({ antialias: true });
-    renderer.gammaInput = true;
-    renderer.gammaOutput = true;
     renderer.setSize(canvasWidth, canvasHeight);
     renderer.setClearColor(0xAAAAAA, 1.0);
     document.body.appendChild(renderer.domElement);
 
     // CAMERA
     camera = new THREE.PerspectiveCamera(30, canvasRatio, 0.1, 10000);
-    camera.position.set(0, 0, 10); // Placez la caméra face à l'objet
-    camera.lookAt(0, 0, 0); // Assurez-vous qu'elle regarde le centre de la scène
+    camera.position.set(0, 5, 15);
+    camera.lookAt(0, 0, 0);
 
     // CONTROLS
     cameraControls = new OrbitControls(camera, renderer.domElement);
     cameraControls.target.set(0, 0, 0);
 
     fillScene();
+    animate();
+}
+
+function normalizeAndPosition(object, scaleFactor, position) {
+    var box = new THREE.Box3().setFromObject(object);
+    var size = new THREE.Vector3();
+    box.getSize(size);
+
+    var maxDimension = Math.max(size.x, size.y, size.z);
+    var normalizedScale = scaleFactor / maxDimension;
+
+    object.scale.set(normalizedScale, normalizedScale, normalizedScale);
+    object.position.set(position.x, position.y, position.z);
+}
+
+function CreationTable() {
+    var tableGroup = new THREE.Group();
+    var material = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
+    
+    // Tabletop
+    var tabletopGeometry = new THREE.BoxGeometry(6, 0.2, 3);
+    var tabletop = new THREE.Mesh(tabletopGeometry, material);
+    tabletop.position.set(0, 2.6, 0);
+    tableGroup.add(tabletop);
+    
+    // Table legs
+    var legGeometry = new THREE.BoxGeometry(0.2, 2.5, 0.2);
+    var legPositions = [
+        [-2.8, 1.25, -1.3],
+        [2.8, 1.25, -1.3],
+        [-2.8, 1.25, 1.3],
+        [2.8, 1.25, 1.3]
+    ];
+    
+    legPositions.forEach(pos => {
+        var leg = new THREE.Mesh(legGeometry, material);
+        leg.position.set(pos[0], pos[1], pos[2]);
+        tableGroup.add(leg);
+    });
+    
+    tableGroup.position.set(5, 0, 0); // Positionner la table à droite
+    scene.add(tableGroup);
+}
+
+function CreationNappe() {
+    var clothMaterial = new THREE.MeshStandardMaterial({ 
+        color:0x0B3D02, // , comme une nappe classique
+        side: THREE.DoubleSide, 
+        wireframe: false 
+    });
+
+    // Création d'un plan subdivisé pour permettre des déformations
+    var clothGeometry = new THREE.PlaneGeometry(6.2, 3.2, 20, 20); // Légèrement plus grand que la table
+
+    // Déformation légère pour un effet plus naturel
+    var vertices = clothGeometry.attributes.position;
+    for (let i = 0; i < vertices.count; i++) {
+        let yOffset = (Math.random() - 0.5) * 0.05; // Déplacement vertical aléatoire
+        vertices.setY(i, vertices.getY(i) + yOffset);
+    }
+
+    var cloth = new THREE.Mesh(clothGeometry, clothMaterial);
+    cloth.rotation.x = -Math.PI / 2; // Mettre à plat
+    cloth.position.set(5, 2.71, 0); // Juste au-dessus de la table
+
+    scene.add(cloth);
 }
 
+
 function fillScene() {
     scene = new THREE.Scene();
-    scene.fog = new THREE.Fog(0x808080, 2000, 4000);
 
     // LIGHT
     var light = new THREE.DirectionalLight(0xFFFFFF, 1);
@@ -59,27 +114,30 @@ function fillScene() {
     var light2 = new THREE.AmbientLight(0xFFFFFF, 1);
     scene.add(light2);
 
-    // Load the 3D object
     var loader = new OBJLoader();
     loader.load(
-        'skull.obj',
-        function (object) {
-            scene.add(object);
-        },
-        function (xhr) {
-            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
-        },
-        function (error) {
-            console.error('An error happened', error);
-        }
-    );
+    'skull.obj',
+    function (object) {
+        normalizeAndPosition(object, 1, new THREE.Vector3(3, 3.5, 0.2)); // Ajustement avec plus de hauteur
+        object.rotation.y = 5; // tourne le crâne
+        object.rotation.x = 0.1; // juste psq c'est pas beau
+        //to do : texture os ?
+        scene.add(object);
+    },
+    function (xhr) {
+        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+    },
+    function (error) {
+        console.error('An error happened', error);
+    }
+);
+
 
     var loader2 = new OBJLoader();
     loader2.load(
         'feather.obj',
         function (object) {
-            console.log(object); // Inspectez l'objet dans la console
-            object.scale.set(0.1, 0.1, 0.1); // Ajustez l'échelle si nécessaire
+            normalizeAndPosition(object, 2, new THREE.Vector3(2, 0, 0));
             scene.add(object);
         },
         function (xhr) {
@@ -90,7 +148,8 @@ function fillScene() {
         }
     );
     
-    
+    CreationTable();
+    CreationNappe();
 }
 
 function animate() {
@@ -108,6 +167,5 @@ try {
     init();
     animate();
 } catch (e) {
-    var errorReport = "Your program encountered an unrecoverable error, can not draw on canvas. Error was:<br/><br/>";
-    $('#webGL').append(errorReport + e);
-}
\ No newline at end of file
+    console.error("Your program encountered an unrecoverable error", e);
+}