add skybox opiton to background texture

Author: sblondeau

src/Threejs/assets/dist/controller.d.ts

@@ -7,6 +7,7 @@ export type Material = {
     transparent: boolean;
     type: string;
     doubleSide: boolean;
+    skybox: boolean;
 };
 export type Mesh = {
     geometry: any;

src/Threejs/assets/dist/controller.js

@@ -20,7 +20,10 @@ class default_1 extends Controller {
             scene.background = new THREE.Color(sceneValue.material.color);
         }
         if (sceneValue.material.map) {
-            scene.background = new THREE.TextureLoader().load(sceneValue.material.map);
+            const texture = new THREE.TextureLoader().load(sceneValue.material.map);
+            if (sceneValue.material.skybox)
+                texture.mapping = THREE.EquirectangularReflectionMapping;
+            scene.background = texture;
         }
         const cameras = [];
         for (let cameraData of rendererValue.cameras) {

src/Threejs/assets/src/controller.ts

@@ -10,6 +10,7 @@ export type Material = {
     transparent: boolean;
     type: string;
     doubleSide: boolean;
+    skybox: boolean;
 }
 
 export type Mesh = {
@@ -61,12 +62,18 @@ export default class extends Controller {
         let scene = new THREE.Scene();
         const light = new THREE.AmbientLight(0x404040); // Lumière ambiante
         scene.add(light);
+
         if (sceneValue.material.color) {
             scene.background = new THREE.Color(sceneValue.material.color);
         }
         if (sceneValue.material.map) {
-            scene.background = new THREE.TextureLoader().load(sceneValue.material.map);
-        }
+            const texture = new THREE.TextureLoader().load(sceneValue.material.map);
+            if(sceneValue.material.skybox)
+            texture.mapping = THREE.EquirectangularReflectionMapping;
+            scene.background = texture;
+        
+        } 
+        
 
         /** cameras */
         const cameras: THREE.Camera[] = [];

src/Threejs/composer.json

@@ -28,20 +28,18 @@
         }
     },
     "require": {
-        "php": ">=8.1",
-        "symfony/config": "^5.4|^6.0|^7.0",
-        "symfony/dependency-injection": "^5.4|^6.0|^7.0",
-        "symfony/http-kernel": "^5.4|^6.0|^7.0",
-        "symfony/stimulus-bundle": "^2.9.1"
+        "php": ">=8.3",
+        "symfony/stimulus-bundle": "^2.18.1"
     },
     "require-dev": {
-        "symfony/framework-bundle": "^5.4|^6.0|^7.0",
-        "symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
-        "symfony/twig-bundle": "^5.4|^6.0|^7.0",
-        "symfony/var-dumper": "^5.4|^6.0|^7.0"
+        "symfony/asset-mapper": "^6.4|^7.0",
+        "symfony/framework-bundle": "^6.4|^7.0",
+        "symfony/phpunit-bridge": "^6.4|^7.0",
+        "symfony/twig-bundle": "^6.4|^7.0",
+        "symfony/ux-twig-component": "^2.18"
     },
     "conflict": {
-        "symfony/flex": "<1.13"
+        "symfony/ux-twig-component": "<2.21"
     },
     "extra": {
         "thanks": {

src/Threejs/src/Material/Material.php

@@ -25,6 +25,7 @@ public function __construct(
       public float $opacity = 1,
       public string $map = '',
       public bool $doubleSide = false,
+      public bool $skybox = false,
 
    ) {
       $this->transparent = $this->opacity < 1;