From ba8e9b7b2f1f04d56177cd52af22b1c413618058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o?= <matteo.herry6@etu.univ-lorraine.fr>
Date: Sun, 9 Mar 2025 11:15:15 +0100
Subject: [PATCH] =?UTF-8?q?Table=20+=20nappe=20(skull=20positionn=C3=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
HERRY-M--HERRY-E/TABLO.js | 126 ++++++++++++++++++++++++++++----------
1 file changed, 92 insertions(+), 34 deletions(-)
diff --git a/HERRY-M--HERRY-E/TABLO.js b/HERRY-M--HERRY-E/TABLO.js
index 17f6572..1471753 100644
--- a/HERRY-M--HERRY-E/TABLO.js
+++ b/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);
+}
--
GitLab