Merge remote-tracking branch 'origin/main'

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

+"use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
+////////////////////////////////////////////////////////////////////////////////
+// Flower petal improvement: scale and re-orient the petals to look better
+////////////////////////////////////////////////////////////////////////////////
+/*global THREE, Coordinates, document, window, dat, $*/
+
+import * as THREE from 'three';
+import { TWEEN } from 'https://unpkg.com/three@0.139.0/examples/jsm/libs/tween.module.min.js';
+import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { dat } from '../lib/dat.gui.min.js';
+import { Coordinates } from '../lib/Coordinates.js';
+
+var camera, scene, renderer;
+var cameraControls, clock = new THREE.Clock();
+
+function init() {
+    var canvasWidth = window.innerWidth;
+    var canvasHeight = window.innerHeight;
+    var canvasRatio = canvasWidth / canvasHeight;
+
+    // RENDERER
+    renderer = new THREE.WebGLRenderer({ antialias: 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, 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();
+
+    // LIGHT
+    var light = new THREE.DirectionalLight(0xFFFFFF, 1);
+    light.position.set(1, 1, 1);
+    scene.add(light);
+    var light2 = new THREE.AmbientLight(0xFFFFFF, 1);
+    scene.add(light2);
+
+    var loader = new OBJLoader();
+    loader.load(
+    '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) {
+            normalizeAndPosition(object, 2, new THREE.Vector3(2, 0, 0));
+            scene.add(object);
+        },
+        function (xhr) {
+            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+        },
+        function (error) {
+            console.error('An error happened', error);
+        }
+    );
+    
+    CreationTable();
+    CreationNappe();
+}
+
+function animate() {
+    window.requestAnimationFrame(animate);
+    render();
+}
+
+function render() {
+    var delta = clock.getDelta();
+    cameraControls.update(delta);
+    renderer.render(scene, camera);
+}
+
+try {
+    init();
+    animate();
+} catch (e) {
+    console.error("Your program encountered an unrecoverable error", e);
+}

HERRY-M--HERRY-E/checklistProjet.md

+- [ ] Esthetisme
+- [ ] Mise en page de la page web
+- [ ] Paragraphe(s) d'explications techniques
+- [ ] Légèreté du dossier (<2Mo)
+- [ ] Géométrie
+- [ ] Couleur
+- [ ] Transparence
+- [ ] Eclairage
+- [ ] Ombres portées
+- [ ] Position de la caméra
+- [ ] Brouillard
+- [ ] Effet miroir
+- [ ] Texture classique
+- [ ] Texture avec transparence
+- [ ] Sprites
+- [ ] Environment map
+- [ ] Skybox
+- [ ] Animations
+- [ ] normal maps
+- [ ] Interaction par GUI
\ No newline at end of file

HERRY-M--HERRY-E/index.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>TP 1</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"> HERRY Mattéo - HERRY Elwyn</h1>
+    <div id="webGL" class="centre"></div>
+    <!-- Mon script avec un chemin relatif -->
+    <script type="module" src="TABLO.js"></script>
+    <p class="centre"> LE TABLO</p>
+    </body>
+</html>
\ No newline at end of file