Bons Coordinates et dat + tests objs

.vscode/launch.json

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file

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

-"use strict";
+"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, $*/
 
-// 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';
@@ -8,7 +11,6 @@ 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;
@@ -19,20 +21,87 @@ var gridZ = false;
 var axes = true;
 var ground = true;
 
-function init(){
+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
 
-function fillscene(){
+    // CONTROLS
+    cameraControls = new OrbitControls(camera, renderer.domElement);
+    cameraControls.target.set(0, 0, 0);
 
+    fillScene();
 }
 
-function animate(){
+function fillScene() {
+    scene = new THREE.Scene();
+    scene.fog = new THREE.Fog(0x808080, 2000, 4000);
+
+    // 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);
 
+    // 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);
+        }
+    );
+
+    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
+            scene.add(object);
+        },
+        function (xhr) {
+            console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+        },
+        function (error) {
+            console.error('An error happened', error);
+        }
+    );
+    
+    
 }
 
-function render(){
+function animate() {
+    window.requestAnimationFrame(animate);
+    render();
+}
 
+function render() {
+    var delta = clock.getDelta();
+    cameraControls.update(delta);
+    renderer.render(scene, camera);
 }
 
 try {

lib/Coordinates.js

 "use strict"; // good practice - see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
 /*global THREE, scene*/
-var Coordinates = {
+import * as THREE from 'three';
+
+
+export let Coordinates = {
 	drawGrid:function(params) {
 		params = params || {};
 		var size = params.size !== undefined ? params.size:100;
@@ -24,7 +27,7 @@ var Coordinates = {
 			grid.rotation.z = - Math.PI / 2;
 		}
 
-		scene.add(grid);
+		window.scene.add(grid);
 	},
 	drawGround:function(params) {
 		params = params || {};
@@ -44,7 +47,7 @@ var Coordinates = {
 				polygonOffset: true, polygonOffsetFactor: 1.0, polygonOffsetUnits: 4.0
 			}));
 		ground.rotation.x = - Math.PI / 2;
-		scene.add(ground);
+		window.scene.add(ground);
 	},
 	drawAxes:function(params) {
 		// x = red, y = green, z = blue  (RGB = xyz)
@@ -66,7 +69,7 @@ var Coordinates = {
 				axis.position.y = axisLength/2-1;
 		}
 		
-		scene.add( axis );
+		window.scene.add( axis );
 		
 		var arrow = new THREE.Mesh(
 			new THREE.CylinderGeometry(0, 4*axisRadius, 8*axisRadius, axisTess, 1, true), 
@@ -79,7 +82,7 @@ var Coordinates = {
 			arrow.position.y = axisLength - 1 + axisRadius*4/2;
 		}
 
-		scene.add( arrow );
+		window.scene.add( arrow );
 
 	},
 	drawAllAxes:function(params) {
@@ -115,9 +118,9 @@ var Coordinates = {
 		axisZ.rotation.z = - Math.PI / 2;
 		axisZ.position.z = axisLength/2-1;
 
-		scene.add( axisX );
-		scene.add( axisY );
-		scene.add( axisZ );
+		window.scene.add( axisX );
+		window.scene.add( axisY );
+		window.scene.add( axisZ );
 
 		var arrowX = new THREE.Mesh(
 			new THREE.CylinderGeometry(0, 4*axisRadius, 4*axisRadius, axisTess, 1, true), 
@@ -140,9 +143,9 @@ var Coordinates = {
 		arrowZ.rotation.y = - Math.PI / 2;
 		arrowZ.position.z = axisLength - 1 + axisRadius*4/2;
 
-		scene.add( arrowX );
-		scene.add( arrowY );
-		scene.add( arrowZ );
+		window.scene.add( arrowX );
+		window.scene.add( arrowY );
+		window.scene.add( arrowZ );
 
 	}
 

lib/dat.gui.min.js

@@ -10,7 +10,7 @@
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-var dat=dat||{};dat.gui=dat.gui||{};dat.utils=dat.utils||{};dat.controllers=dat.controllers||{};dat.dom=dat.dom||{};dat.color=dat.color||{};dat.utils.css=function(){return{load:function(e,a){var a=a||document,c=a.createElement("link");c.type="text/css";c.rel="stylesheet";c.href=e;a.getElementsByTagName("head")[0].appendChild(c)},inject:function(e,a){var a=a||document,c=document.createElement("style");c.type="text/css";c.innerHTML=e;a.getElementsByTagName("head")[0].appendChild(c)}}}();
+export var dat=dat||{};dat.gui=dat.gui||{};dat.utils=dat.utils||{};dat.controllers=dat.controllers||{};dat.dom=dat.dom||{};dat.color=dat.color||{};dat.utils.css=function(){return{load:function(e,a){var a=a||document,c=a.createElement("link");c.type="text/css";c.rel="stylesheet";c.href=e;a.getElementsByTagName("head")[0].appendChild(c)},inject:function(e,a){var a=a||document,c=document.createElement("style");c.type="text/css";c.innerHTML=e;a.getElementsByTagName("head")[0].appendChild(c)}}}();
 dat.utils.common=function(){var e=Array.prototype.forEach,a=Array.prototype.slice;return{BREAK:{},extend:function(c){this.each(a.call(arguments,1),function(a){for(var f in a)this.isUndefined(a[f])||(c[f]=a[f])},this);return c},defaults:function(c){this.each(a.call(arguments,1),function(a){for(var f in a)this.isUndefined(c[f])&&(c[f]=a[f])},this);return c},compose:function(){var c=a.call(arguments);return function(){for(var d=a.call(arguments),f=c.length-1;f>=0;f--)d=[c[f].apply(this,d)];return d[0]}},
 each:function(a,d,f){if(e&&a.forEach===e)a.forEach(d,f);else if(a.length===a.length+0)for(var b=0,n=a.length;b<n;b++){if(b in a&&d.call(f,a[b],b)===this.BREAK)break}else for(b in a)if(d.call(f,a[b],b)===this.BREAK)break},defer:function(a){setTimeout(a,0)},toArray:function(c){return c.toArray?c.toArray():a.call(c)},isUndefined:function(a){return a===void 0},isNull:function(a){return a===null},isNaN:function(a){return a!==a},isArray:Array.isArray||function(a){return a.constructor===Array},isObject:function(a){return a===
 Object(a)},isNumber:function(a){return a===a+0},isString:function(a){return a===a+""},isBoolean:function(a){return a===false||a===true},isFunction:function(a){return Object.prototype.toString.call(a)==="[object Function]"}}}();