From 1904842622af04b812d7f6d33f0624d30659e907 Mon Sep 17 00:00:00 2001
From: Aitolda <21160271+Aitolda@users.noreply.github.com>
Date: Sun, 6 Oct 2024 16:41:28 -0500
Subject: [PATCH] unparent skybox from zone

Skybox is no longer attached to zone and now displays behind everything else as "infinite." This is one step towards allowing for multiple zones to work properly.
---
 .gitignore                                    |  3 ++
 .../components/components/SkyboxComponent.ts  | 31 ++++++++++---------
 .../controllers/ZoneEntityController.ts       |  9 +++---
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8f3a30df..c0fe3398 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 VERSION.json
+
+# Ignore BabylonJS_Docs folder
+/BabylonJS_Docs/
diff --git a/src/modules/entity/components/components/SkyboxComponent.ts b/src/modules/entity/components/components/SkyboxComponent.ts
index 10be740f..2009b76e 100644
--- a/src/modules/entity/components/components/SkyboxComponent.ts
+++ b/src/modules/entity/components/components/SkyboxComponent.ts
@@ -12,13 +12,16 @@
 
 
 import { MeshComponent, DEFAULT_MESH_RENDER_GROUP_ID } from "@Modules/object";
-import { Scene, MeshBuilder, StandardMaterial, Texture, CubeTexture, EquiRectangularCubeTexture, BaseTexture } from "@babylonjs/core";
+import { Scene, MeshBuilder, StandardMaterial, Texture, CubeTexture, EquiRectangularCubeTexture, BaseTexture, Camera } from "@babylonjs/core";
 import { ISkyboxProperty, IVector3Property } from "../../EntityProperties";
 import { EntityMapper } from "../../package";
 import { AssetUrl } from "../../builders/asset";
 
 export class SkyboxComponent extends MeshComponent {
-    static readonly DefaultSkyBoxSize = 2000;
+    private _camera: Camera | null = null;
+    private _scene: Scene | null = null;
+
+    static readonly DefaultSkyBoxSize = 10000;
     static readonly DefaultCubeMapSize = 1024;
 
     /**
@@ -37,32 +40,33 @@ export class SkyboxComponent extends MeshComponent {
         return "Skybox";
     }
 
-    public load(props: ISkyboxProperty, dimensions: IVector3Property | undefined, id: string): void {
+    public load(props: ISkyboxProperty, dimensions: IVector3Property | undefined, id: string, camera: Camera): void {
         if (this._mesh) {
             this._mesh.dispose(false, true);
             this._mesh = null;
         }
 
-        if (!this._gameObject) {
-            return;
-        }
+        this._camera = camera;
+        this._scene = camera.getScene();
 
         let skyBox = null;
-        const scene = this._gameObject ? this._gameObject?.getScene() : null;
         if (dimensions) {
             skyBox = MeshBuilder.CreateBox(this.componentType,
                 { width: dimensions.x, height: dimensions.y, depth: dimensions.z },
-                scene);
+                this._scene);
         } else {
             skyBox = MeshBuilder.CreateBox(this.componentType,
-                { size: SkyboxComponent.DefaultSkyBoxSize }, scene);
+                { size: SkyboxComponent.DefaultSkyBoxSize }, this._scene);
         }
         skyBox.infiniteDistance = true;
         skyBox.id = id;
         skyBox.isPickable = false;
         skyBox.isNearGrabbable = false;
         skyBox.isNearPickable = false;
-        skyBox.renderingGroupId = DEFAULT_MESH_RENDER_GROUP_ID;
+        skyBox.renderingGroupId = 0; // Ensure it's rendered first
+
+        // Attach the skybox directly to the scene, not to the camera
+        skyBox.parent = null;
 
         this.mesh = skyBox;
 
@@ -70,12 +74,11 @@ export class SkyboxComponent extends MeshComponent {
     }
 
     public update(props: ISkyboxProperty): void {
-        if (this._mesh) {
-            const scene = this._mesh.getScene();
+        if (this._mesh && this._scene) {
             let material = this._mesh.material as StandardMaterial;
 
             if (!material) {
-                material = new StandardMaterial(`${this._mesh.name}_${this._mesh.id}`, scene);
+                material = new StandardMaterial(`${this._mesh.name}_${this._mesh.id}`, this._scene);
                 material.backFaceCulling = false;
                 material.disableLighting = true;
                 this._mesh.material = material;
@@ -86,7 +89,7 @@ export class SkyboxComponent extends MeshComponent {
 
             if (props.url && props.url !== material.reflectionTexture?.name) {
                 material.reflectionTexture?.dispose();
-                material.reflectionTexture = this._createReflectionTexture(props.url, scene);
+                material.reflectionTexture = this._createReflectionTexture(props.url, this._scene);
             }
         }
     }
diff --git a/src/modules/entity/components/controllers/ZoneEntityController.ts b/src/modules/entity/components/controllers/ZoneEntityController.ts
index 9fe22841..dadb9249 100644
--- a/src/modules/entity/components/controllers/ZoneEntityController.ts
+++ b/src/modules/entity/components/controllers/ZoneEntityController.ts
@@ -142,18 +142,19 @@ export class ZoneEntityController extends EntityController {
 
         // reload sky box mesh
         if (this._skybox) {
-            this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id);
+            this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id, this._scene.activeCamera);
         }
 
         this._updateSkybox();
     }
 
     protected _updateSkybox(): void {
-        if (this._zoneEntity.skyboxMode === "enabled" && this._zoneEntity.skybox && this._gameObject) {
+        if (this._zoneEntity.skyboxMode === "enabled" && this._zoneEntity.skybox && this._scene.activeCamera) {
             if (!this._skybox) {
                 this._skybox = new SkyboxComponent();
-                this._gameObject.addComponent(this._skybox);
-                this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id);
+                // Create the skybox mesh and add it to the scene
+                this._skybox.load(this._zoneEntity.skybox, this._zoneEntity.dimensions, this._zoneEntity.id, this._scene.activeCamera);
+                // The mesh is now added to the scene in the load method
             }
             this._skybox.update(this._zoneEntity.skybox);
             this._skybox.enable = true;