diff --git a/DUFOUR/chambre.js b/DUFOUR/chambre.js new file mode 100644 index 0000000000000000000000000000000000000000..72205860ec44c6568adf0ec60771a74c3c3d6cc2 --- /dev/null +++ b/DUFOUR/chambre.js @@ -0,0 +1,106 @@ +"use strict";import * as THREE from 'three'; +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { Coordinates } from './lib/Coordinates.js'; + +var camera, renderer; +var windowScale; +window.scene = new THREE.Scene(); +var cameraControls; +var clock = new THREE.Clock(); +var transparentCube; // Objet autour duquel la caméra tournera + +function fillScene() { + scene = new THREE.Scene(); + scene.fog = new THREE.Fog(0x808080, 2000, 4000); + + // LIGHTS + scene.add(new THREE.AmbientLight(0x222222)); + + var light = new THREE.DirectionalLight(0xFFFFFF, 0.7); + light.position.set(200, 500, 500); + scene.add(light); + + light = new THREE.DirectionalLight(0xFFFFFF, 0.9); + light.position.set(-200, -100, -400); + scene.add(light); + + Coordinates.drawGround({ size: 1000 }); + + // Cube Transparent au Centre + var transparentMaterial = new THREE.MeshBasicMaterial({ + transparent: true, + opacity: 0 + }); + + var cubeGeometry = new THREE.BoxGeometry(100, 100, 100); + transparentCube = new THREE.Mesh(cubeGeometry, transparentMaterial); + transparentCube.position.set(0, 50, 0); // Position du cube + scene.add(transparentCube); + + // Ajout du lit + + var bed = new THREE.TextureLoader().load('lit.png'); + var bedMaterial = new THREE.MeshBasicMaterial({ map: bed }); + var bedSizeLength = 400, bedSizeHeight = 200, bedSizeWidth = 200; + var bedGeometry = new THREE.BoxGeometry(bedSizeLength, bedSizeHeight, bedSizeWidth); + bed = new THREE.Mesh(bedGeometry, bedMaterial); + + //bed = new THREE.Mesh(bedGeometry); + bed.position.set(200, 100, 425); + window.scene.add(bed); +} + +function init() { + var canvasWidth = 846; + var canvasHeight = 494; + 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); + + // CAMERA + camera = new THREE.PerspectiveCamera(45, canvasRatio, 1, 4000); + camera.position.set(-500, 125, -100); + camera.lookAt(new THREE.Vector3(0, 0, 0)); + + // CONTROLS (L'utilisateur peut tourner la caméra) + cameraControls = new OrbitControls(camera, renderer.domElement); + cameraControls.enableDamping = true; // Ajoute un effet d'inertie + cameraControls.dampingFactor = 0.05; + cameraControls.rotateSpeed = 1.0; +} + +function addToDOM() { + var container = document.getElementById('webGL'); + var canvas = container.getElementsByTagName('canvas'); + if (canvas.length > 0) { + container.removeChild(canvas[0]); + } + container.appendChild(renderer.domElement); +} + +function animate() { + requestAnimationFrame(animate); + render(); +} + +function render() { + var delta = clock.getDelta(); + cameraControls.update(); // Mise à jour des contrôles de la caméra + renderer.render(window.scene, camera); +} + +// Lancement du programme +try { + init(); + fillScene(); + animate(); + addToDOM(); +} catch (e) { + var errorReport = "Your program encountered an unrecoverable error, cannot draw on canvas. Error was:<br/><br/>"; + $('#webGL').append(errorReport + e); +} \ No newline at end of file diff --git a/DUFOUR/index.html b/DUFOUR/index.html index 4f33134e592066054ae8d9f791363f61d7500805..eaa5e113f96d1718deb97ac395e71d6cf319eac3 100644 --- a/DUFOUR/index.html +++ b/DUFOUR/index.html @@ -1,95 +1,33 @@ -<template> - <div ref="container" style="width: 100%; height: 100vh;"></div> -</template> - -<script> - import * as THREE from "three"; - import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; - import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; - - export default { - name: "Model", - data() { - return { - scene: null, - camera: null, - renderer: null, - control: null, - model: null, - }; - }, - methods: { - initScene() { - this.scene = new THREE.Scene(); - }, - initCamera() { - this.camera = new THREE.PerspectiveCamera( - 50, - window.innerWidth / window.innerHeight, - 0.01, - 1000 - ); - this.camera.position.set(0.02, 5, 10); - }, - initRenderer() { - this.renderer = new THREE.WebGLRenderer({ antialias: true }); - this.renderer.setSize(window.innerWidth, window.innerHeight); - this.$refs.container.appendChild(this.renderer.domElement); - }, - initLight() { - const ambientLight = new THREE.AmbientLight(0xffffff, 1); - this.scene.add(ambientLight); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); - directionalLight.position.set(5, 5, 5); - this.scene.add(directionalLight); - }, - initControl() { - this.control = new OrbitControls(this.camera, this.renderer.domElement); - this.control.enableDamping = true; - this.control.dampingFactor = 0.05; - this.control.autoRotate = true; - this.control.autoRotateSpeed = 2.0; - }, - initModel() { - const loader = new GLTFLoader(); - loader.load( - "elements/wooden_chair.glb", - (glb) => { - this.model = glb.scene; - this.scene.add(this.model); - }, - (xhr) => { - console.log((xhr.loaded / xhr.total) * 100 + "% loaded"); - }, - (error) => { - console.log("An error happened:", error); - } - ); - }, - init() { - this.initScene(); - this.initCamera(); - this.initRenderer(); - this.initLight(); - this.initControl(); - this.initModel(); - }, - animate() { - requestAnimationFrame(this.animate); - this.control.update(); - this.renderer.render(this.scene, this.camera); - }, - }, - mounted() { - this.init(); - this.animate(); - - window.addEventListener("resize", () => { - this.renderer.setSize(window.innerWidth, window.innerHeight); - this.camera.aspect = window.innerWidth / window.innerHeight; - this.camera.updateProjectionMatrix(); - }); - }, - }; -</script> \ No newline at end of file +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>La Chambre de Van Gogh</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"> La Chambre de Van Gogh</h1> + <div id="webGL" class="centre"></div> + <!-- Mon script avec un chemin relatif --> + <script type="module" src="chambre.js"></script> + </body> +</html> diff --git a/DUFOUR/lit.png b/DUFOUR/lit.png new file mode 100644 index 0000000000000000000000000000000000000000..8661fdc19b44b57cb4de437d2a0111847beca1e7 Binary files /dev/null and b/DUFOUR/lit.png differ diff --git a/HERRY-E/img.jpg b/HERRY-E/img.jpg deleted file mode 100644 index d642e136257de4fb317a18f7c422126216665b16..0000000000000000000000000000000000000000 Binary files a/HERRY-E/img.jpg and /dev/null differ diff --git a/HERRY-E/index.html b/HERRY-E/index.html deleted file mode 100644 index 76e27dc119783f47da855d49712c43bab0798e9a..0000000000000000000000000000000000000000 --- a/HERRY-E/index.html +++ /dev/null @@ -1 +0,0 @@ -Le travail n'a pas encore commencé!!! \ No newline at end of file diff --git a/HERRY-M--HERRY-E/TABLO.js b/HERRY-M--HERRY-E/TABLO.js new file mode 100644 index 0000000000000000000000000000000000000000..153766c1b8d165fd08d18e072234531dffddc5fd --- /dev/null +++ b/HERRY-M--HERRY-E/TABLO.js @@ -0,0 +1,44 @@ +"use strict"; + +// IMPORTS +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'; + +// DECLARATIONS +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; + +function init(){ + +} + +function fillscene(){ + +} + +function animate(){ + +} + +function render(){ + +} + +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 diff --git a/HERRY-M--HERRY-E/checklistProjet.md b/HERRY-M--HERRY-E/checklistProjet.md new file mode 100644 index 0000000000000000000000000000000000000000..9e90e5bc378d681035ffdc095f6996ad75bedfaf --- /dev/null +++ b/HERRY-M--HERRY-E/checklistProjet.md @@ -0,0 +1,20 @@ +- [ ] 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 diff --git a/HERRY-M--HERRY-E/index.html b/HERRY-M--HERRY-E/index.html new file mode 100644 index 0000000000000000000000000000000000000000..2fe952cdc3b2e44569e1d4fc8236d3016d2bdeaa --- /dev/null +++ b/HERRY-M--HERRY-E/index.html @@ -0,0 +1,35 @@ +<!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 diff --git a/HERRY-M--HERRY-E/peinture.jpg b/HERRY-M--HERRY-E/peinture.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5b057424873f13f1af1392d385a209ca9ef378e0 Binary files /dev/null and b/HERRY-M--HERRY-E/peinture.jpg differ diff --git a/HERRY-M/img.jpg b/HERRY-M/img.jpg deleted file mode 100644 index d642e136257de4fb317a18f7c422126216665b16..0000000000000000000000000000000000000000 Binary files a/HERRY-M/img.jpg and /dev/null differ diff --git a/HERRY-M/index.html b/HERRY-M/index.html deleted file mode 100644 index 76e27dc119783f47da855d49712c43bab0798e9a..0000000000000000000000000000000000000000 --- a/HERRY-M/index.html +++ /dev/null @@ -1 +0,0 @@ -Le travail n'a pas encore commencé!!! \ No newline at end of file diff --git a/MEHIAOUI/index.html b/MEHIAOUI/index.html index 76e27dc119783f47da855d49712c43bab0798e9a..ed6977d2d62c452e5e2aa8d8569fa271f3f532ea 100644 --- a/MEHIAOUI/index.html +++ b/MEHIAOUI/index.html @@ -1 +1,31 @@ -Le travail n'a pas encore commencé!!! \ No newline at end of file +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>TP 1</title> + <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> + <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 --> + <div id="webGL" class="centre"></div> + <!-- Mon script avec un chemin relatif --> + <script type="module" src="projet.js"></script> + </body> +</html> \ No newline at end of file