front/src/components/Promo/env.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { onMounted, render, watch } from 'vue';
 
 import { ACESFilmicToneMapping, Color, Fog, PMREMGenerator, SRGBColorSpace } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
@@ -21,24 +21,27 @@ renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio((window.devicePixelRatio || 1) * 2)
 
 const loadEnv = async () => {
-    // console.log('update env')
+    try {
-    const loader = new GainMapLoader(renderer.value)
+        const loader = new GainMapLoader(renderer.value)
-    const result = await loader.loadAsync([
+        const result = await loader.loadAsync([
-        props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
+            props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
-        props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
+            props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
-        props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
+            props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
-    ])
+        ])
-    const pmremGenerator = new PMREMGenerator(renderer.value);
+        const pmremGenerator = new PMREMGenerator(renderer.value);
-    pmremGenerator.compileEquirectangularShader();
+        pmremGenerator.compileEquirectangularShader();
 
-    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+        const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
-    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+        const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
-    // scene.value.background = exrCubeRenderTarget.texture 
+        // scene.value.background = exrCubeRenderTarget.texture 
-    scene.value.environment = newEnvMap
+        scene.value.environment = newEnvMap
-    scene.value.environmentIntensity = 1
+        scene.value.environmentIntensity = 1
 
-    result.renderTarget.texture.dispose();
+        result.renderTarget.texture.dispose();
+    } catch (error) {
+        console.log(error)
+    }
 
     const c = new Color()
     c.set(props.clear_color || PROMOBG)
@@ -48,9 +51,14 @@ const loadEnv = async () => {
     document.documentElement.style.setProperty('--primary-color', props.clear_color)
 }
 
-onMounted(async () => {
+watch(() => props, () => {
-    // loadEnv()
+    try {
-})
+        loadEnv()
-watch(() => props, loadEnv, { deep: true })
+    } catch (error) {
+        console.log(error)
+    }
+},
+    { deep: true }
+)
 </script>
 <template></template>

front/src/components/Promo/load_models.vue

@@ -265,14 +265,19 @@ const gotoCenterAndDistance = () => {
     });
 }
 
-loadModels()
 watch(() => props.source, () => {
-    const loaded = seekByName(scene.value, 'loaded')
+    if (props.source) {
-    if (loaded) {
+        const loaded = seekByName(scene.value, 'loaded')
-        loaded.children = []
+        if (loaded) {
+            loaded.children = []
+        }
+        sidebar.close()
+        try {
+            loadModels()
+        } catch (error) {
+            console.log(error)
+        }
     }
-    sidebar.close()
-    loadModels()
 })
 
 watch(() => sidebar, () => {
@@ -394,6 +399,8 @@ const clickEvent = (event: MouseEvent) => {
 }
 const timerEvent = ['click', 'contextmenu', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'touchmove']
 onMounted(() => {
+    loadModels()
+    
     document.addEventListener('click', clickEvent)
 
     timerEvent.map((event: string) => {

front/src/components/nav.vue

@@ -29,13 +29,12 @@ console.log(router)
         </div>
         <div class="nav-group">
             <span class="nav-icon" :class="[{ disabled: router.options.history.state.back == null }]">
-                <RouterLink :to="(router.options.history.state.back as string) ?? '/'" @click.prevent="router.back()">
+                <RouterLink :to="(router.options.history.state.back as string) ?? '/'">
                     <i-mdi:arrow-left />
                 </RouterLink>
             </span>
             <span class="nav-icon" :class="[{ disabled: router.options.history.state.forward == null }]">
-                <RouterLink :to="(router.options.history.state.forward as string) ?? '/'"
+                <RouterLink :to="(router.options.history.state.forward as string) ?? '/'">
-                    @click.prevent="router.forward()">
                     <i-mdi:arrow-right />
                 </RouterLink>
             </span>

front/src/main.ts

@@ -19,6 +19,10 @@ const router = createRouter({
     routes,
 })
 
+router.beforeEach((to, from) => {
+    console.log(from, to)
+    return true
+})
 
 const pinia = createPinia()
 const app = createApp(App)