diff --git a/DUFOUR/chambre.js b/DUFOUR/chambre.js index c7c3cb8818b5a0e696e46636f3de4da8901685e5..8b30c62c2cb1abd6e04611213a1ddf8299d5da7b 100644 --- a/DUFOUR/chambre.js +++ b/DUFOUR/chambre.js @@ -1,10 +1,9 @@ "use strict"; import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; -import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; +import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { Coordinates } from './lib/Coordinates.js'; - var camera, renderer; var windowScale; window.scene = new THREE.Scene(); @@ -12,6 +11,8 @@ var cameraControls; var clock = new THREE.Clock(); var transparentCube; +const loader = new GLTFLoader(); + function fillScene() { scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x808080, 2000, 4000); @@ -27,7 +28,7 @@ function fillScene() { light.position.set(-200, -100, -400); scene.add(light); - Coordinates.drawGround({ size: 1000 }); + Coordinates.drawGround({ size: 800 }); // Cube Transparent au Centre var transparentMaterial = new THREE.MeshBasicMaterial({ @@ -41,98 +42,121 @@ function fillScene() { scene.add(transparentCube); // Sol - var solTexture = new THREE.TextureLoader().load('sol_boiserie.jpg'); - solTexture.wrapS = THREE.RepeatWrapping; - solTexture.wrapT = THREE.RepeatWrapping; - solTexture.repeat.set(4, 4); - var solMaterial = new THREE.MeshBasicMaterial({ map: solTexture }); - var sol = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), solMaterial); - sol.rotation.x = -Math.PI / 2; - sol.position.y = 0; - scene.add(sol); - - // Ajout du lit - var bedTexture = new THREE.TextureLoader().load('lit.png'); - var bedMaterial = new THREE.MeshBasicMaterial({ map: bedTexture }); - var bedGeometry = new THREE.BoxGeometry(400, 20, 200); - var bed = new THREE.Mesh(bedGeometry, bedMaterial); - bed.position.set(200, 100, 425); - scene.add(bed); - - - - - // Chaise - var chaiseTexture = new THREE.TextureLoader().load('chaise.jpg'); - var chaiseMaterial = new THREE.MeshBasicMaterial({ map: chaiseTexture }); - var seat = new THREE.Mesh(new THREE.BoxGeometry(100, 10, 100), chaiseMaterial); - seat.position.set(-300, 50, 0); - var backrest = new THREE.Mesh(new THREE.BoxGeometry(100, 150, 10), chaiseMaterial); - backrest.position.set(-300, 125, -45); - scene.add(seat, backrest); - - // Table - var tableTexture = new THREE.TextureLoader().load('table_bois.jpg'); - var tableMaterial = new THREE.MeshBasicMaterial({ map: tableTexture }); - var table = new THREE.Mesh(new THREE.BoxGeometry(300, 150, 200), tableMaterial); - table.position.set(-100, 75, 200); - scene.add(table); - - // Tableau sur le mur - var paintingTexture = new THREE.TextureLoader().load('tableau_van_gogh.jpg'); - var paintingMaterial = new THREE.MeshBasicMaterial({ map: paintingTexture }); - var painting = new THREE.Mesh(new THREE.PlaneGeometry(120, 90), paintingMaterial); - painting.position.set(250, 350, -499); - scene.add(painting); - - // Portes - var porteTexture = new THREE.TextureLoader().load('porte.jpg'); - var porteMaterial = new THREE.MeshBasicMaterial({ map: porteTexture }); - - var porte1 = new THREE.Mesh(new THREE.PlaneGeometry(150, 250), porteMaterial); - porte1.position.set(-100,125, 490); - scene.add(porte1); - - var porte2 = new THREE.Mesh(new THREE.PlaneGeometry(150, 250), porteMaterial); - porte2.position.set(-125, 125, -499); - scene.add(porte2); - porte1.renderOrder = 1; // Assure que la porte est rendue après le mur - - - // Murs - var murTexture = new THREE.TextureLoader().load('mur_bleu.jpg'); - var murMaterial = new THREE.MeshBasicMaterial({ map: murTexture }); - - var backmur = new THREE.Mesh(new THREE.PlaneGeometry(1000, 600), murMaterial); - backmur.position.set(0, 300, -500); - scene.add(backmur); - - var leftmur = new THREE.Mesh(new THREE.PlaneGeometry(1000, 600), murMaterial); - leftmur.rotation.y = Math.PI / 2; - leftmur.position.set(-500, 300, 0); - scene.add(leftmur); - - var rightmur = new THREE.Mesh(new THREE.PlaneGeometry(1000, 600), murMaterial); - rightmur.rotation.y = -Math.PI / 2; - rightmur.position.set(500, 300, 0); - scene.add(rightmur); - - var frontmur = new THREE.Mesh(new THREE.PlaneGeometry(1000, 600), murMaterial); - frontmur.rotation.y = Math.PI; - frontmur.position.set(0, 300, 500); - scene.add(frontmur); -} -function loadModel() { - const loader = new GLTFLoader(); - + var floorTexture = new THREE.TextureLoader().load('sol_boiserie.jpg'); + floorTexture.wrapS = THREE.RepeatWrapping; + floorTexture.wrapT = THREE.RepeatWrapping; + floorTexture.repeat.set(2, 2); // Réduire la répétition du sol + var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture }); + var floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400), floorMaterial); // Réduit la taille du sol + floor.rotation.x = -Math.PI / 2; + floor.position.y = 0; + scene.add(floor); + + // Murs + var wallTexture = new THREE.TextureLoader().load('mur_bleu.jpg'); + var wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture }); + + var backWall = new THREE.Mesh(new THREE.PlaneGeometry(400, 300), wallMaterial); // Réduit la taille du mur + backWall.position.set(0, 150, -200); // Ajuster la position + scene.add(backWall); + + var leftWall = new THREE.Mesh(new THREE.PlaneGeometry(400, 300), wallMaterial); // Réduit la taille du mur + leftWall.rotation.y = Math.PI / 2; + leftWall.position.set(-200, 150, 0); // Ajuster la position + scene.add(leftWall); + + var rightWall = new THREE.Mesh(new THREE.PlaneGeometry(400, 300), wallMaterial); // Réduit la taille du mur + rightWall.rotation.y = -Math.PI / 2; + rightWall.position.set(200, 150, 0); // Ajuster la position + scene.add(rightWall); + + var frontWall = new THREE.Mesh(new THREE.PlaneGeometry(400, 300), wallMaterial); // Réduit la taille du mur + frontWall.rotation.y = Math.PI; + frontWall.position.set(0, 150, 200); // Ajuster la position + scene.add(frontWall); + + // lit loader.load('wooden_bed.glb', function (gltf) { - const model = gltf.scene; - model.scale.set(1, 1, 1); // Ajuste l'échelle si nécessaire - model.position.set(0, 0, 0); // Ajuste la position du modèle - scene.add(model); // Ajoute le modèle à la scène - }, undefined, function (error) { - console.error('Erreur de chargement du modèle:', error); + let bed = gltf.scene; + bed.position.set(130 - 50, 0, 127); // Le lit est collé au mur droit, position ajustée + bed.scale.set(100, 100, 100); + bed.rotation.y =11; // Faire tourner le lit pour que les pieds soient devant l'utilisateur + scene.add(bed); + }); + + //chaise + loader.load('wooden_chair.glb', function (gltf) { + let chair1 = gltf.scene.clone(); + let chair2 = gltf.scene.clone(); + + chair1.position.set(100, 0, 0); // Première chaise à côté du lit + chair1.rotation.y =12; + chair2.position.set(-100, 0, -150); // Deuxième chaise à côté de la première + chair2.rotation.y =12; + + chair1.scale.set(100, 100, 100); + chair2.scale.set(100, 100, 100); + + scene.add(chair1); + scene.add(chair2); + }); + + // Fenêtre +loader.load('wooden_window.glb', function (gltf) { + let window = gltf.scene; + + // Créer un matériau transparent pour la fenêtre + let transparentMaterial = new THREE.MeshBasicMaterial({ + transparent: true, + opacity: 0.3, // Augmenter l'opacité pour tester si cela résout le problème + color: new THREE.Color(0x0A3613) // Utilisation de la couleur en hexadécimal + }); + + + + // Appliquer le matériau transparent à tous les objets de la fenêtre + window.traverse(function (child) { + if (child.isMesh) { + child.material = transparentMaterial; // Appliquer à chaque mesh de la fenêtre + } }); + + // Positionner et ajouter la fenêtre à la scène + window.position.set(247 - 50, 160, 100); + window.rotation.y = 11; + window.scale.set(100, 100, 100); + scene.add(window); + +/* + // Créer un carré jaune derrière la fenêtre + var squareMaterial = new THREE.MeshBasicMaterial({ + color: new THREE.Color(0xb8eb7d) // Utilisation de la couleur en hexadécimal + }); + + + var squareGeometry = new THREE.PlaneGeometry(60, 100); // Taille du carré + var Square = new THREE.Mesh(squareGeometry, squareMaterial); + + // Positionner le carré juste derrière la fenêtre + Square.position.set(248 - 50, 160, -10); // Juste derrière la fenêtre + Square.rotation.y = 11; // Aligner la rotation du carré avec celle de la fenêtre + + // Ajouter le carré jaune à la scène + scene.add(Square);*/ +}); + + + // Portes face à face + var doorTexture = new THREE.TextureLoader().load('porte.jpg'); + var doorMaterial = new THREE.MeshBasicMaterial({ map: doorTexture }); + + var door1 = new THREE.Mesh(new THREE.PlaneGeometry(150, 250), doorMaterial); + door1.position.set(0, 125, 199); // Ajuster la position verticale des portes + scene.add(door1); + + var door2 = new THREE.Mesh(new THREE.PlaneGeometry(150, 250), doorMaterial); + door2.position.set(0, 125, -199); // Ajuster la position verticale des portes + scene.add(door2); } function init() { @@ -149,7 +173,7 @@ function init() { // CAMERA camera = new THREE.PerspectiveCamera(45, canvasRatio, 1, 4000); - camera.position.set(-500, 125, -100); + camera.position.set(-300, 100, -50); // Déplacer la caméra plus près du centre camera.lookAt(new THREE.Vector3(0, 0, 0)); // CONTROLS @@ -182,9 +206,8 @@ function render() { try { init(); fillScene(); - loadModel(); animate(); addToDOM(); } catch (e) { console.error("Erreur lors du rendu:", e); -} \ No newline at end of file +}