front/src/components/Promo/env.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
 
 import { PMREMGenerator } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
@@ -9,14 +9,20 @@ import hdr_gainmap from '../../assets/promo/hdr/hdr-gainmap.webp'
 import hdr_json from '../../assets/promo/hdr/hdr.json?url'
 import hdr_webp from '../../assets/promo/hdr/hdr.webp'
 
-const { renderer, scene } = useTresContext()
+const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
 
-onMounted(async () => {
+const { renderer, scene } = useTresContext()
+const loadEnv = async () => {
+    console.log(props)
     const pmremGenerator = new PMREMGenerator(renderer.value);
     pmremGenerator.compileEquirectangularShader();
-    
+
     const loader = new GainMapLoader(renderer.value)
-    const result = await loader.loadAsync([hdr_webp, hdr_gainmap, hdr_json,])
+    const result = await loader.loadAsync([
+        props.hdr_webp || hdr_webp,
+        props.hdr_gainmap || hdr_gainmap,
+        props.hdr_json || hdr_json,
+    ])
 
     const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
     const exrBackground = exrCubeRenderTarget.texture;
@@ -24,5 +30,9 @@ onMounted(async () => {
     scene.value.environment = newEnvMap
     scene.value.background = exrBackground
     result.renderTarget.texture.dispose();
+}
+onMounted(async () => {
+    loadEnv()
 })
+watch(() => props.hdr_webp, loadEnv)
 </script>

front/src/components/Promo/load_models.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import { Box3, Color, Group, Mesh, MeshStandardMaterial, PointLight, SphereGeometry, Vector3 } from 'three';
 import { useTresContext, useSeek } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
+import Env from './env.vue'
+
 import { IMAGE_URL, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
@@ -26,10 +28,16 @@ const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
 const { controls, camera, scene } = useTresContext()
 const { seekByName } = useSeek()
+const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string }
 
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
+
+    if (raw_data.hdr_gainmap) envVars.hdr_gainmap = `${IMAGE_URL}/${raw_data.hdr_gainmap}`
+    if (raw_data.hdr_json) envVars.hdr_json = `${IMAGE_URL}/${raw_data.hdr_json}`
+    if (raw_data.hdr_webp) envVars.hdr_webp = `${IMAGE_URL}/${raw_data.hdr_webp}`
+
     const data = raw_data.elements
     if (!controls.value) return;
 
@@ -146,6 +154,9 @@ watch(() => props.source, () => {
 })
 </script>
 <template>
+    <Suspense>
+        <Env v-bind="envVars" />
+    </Suspense>
     <TresGroup name="loaded">
         <template v-for="item in models">
             <TresGroup :name="item.name">

front/src/components/Promo/main.vue

@@ -7,7 +7,6 @@ import { Vector3 } from 'three';
 import { TresCanvas } from '@tresjs/core';
 import { StatsGl, OrbitControls } from '@tresjs/cientos'
 
-import Env from './env.vue'
 import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
@@ -62,9 +61,6 @@ watch(() => route.params.target, () => {
                 </Suspense>
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
-                <Suspense>
-                    <Env />
-                </Suspense>
                 <Suspense>
                     <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
                 </Suspense>

front/src/index.d.ts

@@ -14,6 +14,9 @@ interface scene3D {
     name: string
     min_distance: number
     max_distance: number
+    hdr_gainmap?: string
+    hdr_json?: string
+    hdr_webp?: string
     elements: element3DType[]
 }
 interface element3DType {