feat: add gradient-based Sky Box for sky and ocean floor (#152)

Co-authored-by: Myzios <[email protected]>

Author: toddeTV

src/assets/models/OceanFloor/OceanFloor.bin

@@ -5,8 +5,7 @@ import DistanceFog from '@/components/DistanceFog.vue'
 import Lights from '@/components/Lights.vue'
 import Island from '@/components/models/Island.vue'
 import Ocean from '@/components/models/Ocean.vue'
-import OceanFloor from '@/components/models/OceanFloor.vue'
-import SkyDome from '@/components/models/SkyDome.vue'
+import SkyBoxWithOceanFloor from '@/components/models/SkyBoxWithOceanFloor.vue'
 import Waterfall from '@/components/models/Waterfall.vue'
 import VisualHelper from '@/components/VisualHelper.vue'
 import { useBuildingAreasStore } from '@/composables/useBuildingAreasStore.js'
@@ -115,11 +114,7 @@ watch(showCameraHelper, () => {
     </Suspense>
 
     <Suspense>
-      <SkyDome />
-    </Suspense>
-
-    <Suspense>
-      <OceanFloor />
+      <SkyBoxWithOceanFloor />
     </Suspense>
 
     <DistanceFog />

src/assets/models/OceanFloor/OceanFloor.gltf

@@ -14,7 +14,6 @@ const groupWrapperRef = shallowRef()
 
 const waterMaterial = getWaterMaterial({
   fogActive: true,
-  fogDistanceOffset: 30,
   relativeHeightOffset: -0.68,
   waveAmplitude: 2.0,
   waveSpeed: 1.0,