front/src/assets/main.scss

@@ -26,11 +26,15 @@ a[href] {
     height: calc(100vh - 4.25rem);
     gap: 1.25rem;
 
+    &-title,
+    &-desc {
+        max-width: 40vw;
+    }
 
     &-title {
-        max-width: 28vw;
         text-align: center;
         font-family: 'Project Space';
+        margin-top: 1rem;
     }
 
     h1 {
@@ -38,8 +42,6 @@ a[href] {
     }
 
     &-desc {
-        max-width: 28vw;
-        /* text-align: center; */
         font-size: 1.125rem;
         line-height: 1.2;
     }

front/src/components/Main/index.vue

@@ -6,9 +6,11 @@ import { OrbitControls } from '@tresjs/cientos';
 import MainLoadModels from './main_load_models.vue';
 import { useItem } from '../../stores/item';
 import { useRawData } from '../../stores/raw_data';
+import { useRoute } from 'vue-router';
 
 const raw_dataStore = useRawData()
 const pageStore = useItem()
+const route = useRoute()
 
 const camera = ref()
 const controls = ref()
@@ -23,15 +25,10 @@ const controlsState = reactive({
     autoRotate: true,
 })
 
+await raw_dataStore.load({ source: pageStore.page.scene_3d })
 onMounted(async () => {
-    if (!raw_dataStore.data.id && pageStore.page.id) {
+    pageStore.load(route.params)
     await raw_dataStore.load({ source: pageStore.page.scene_3d })
-    }
-})
-
-watch(() => pageStore.page.id, async () => {
-    await raw_dataStore.load({ source: pageStore.page.scene_3d })
-
 })
 </script>
 <template>
@@ -47,7 +44,6 @@ watch(() => pageStore.page.id, async () => {
         <div class="main-canvas">
             <TresCanvas :output-encoding="SRGBColorSpace">
                 <TresPerspectiveCamera ref="camera" />
-                <Env />
                 <OrbitControls v-bind="controlsState" make-default ref="controls" />
                 <MainLoadModels v-if="raw_dataStore.data.id" />
                 <TresAmbientLight />

front/src/components/Main/main_load_models.vue

@@ -10,8 +10,10 @@ import { IMAGE_URL } from '../../constants';
 const { controls, camera } = useTresContext()
 const raw_dataStore = useRawData()
 const models = ref([] as model3DType[])
+const envVars = ref({} as any)
 
 const loadModels = async () => {
+    envVars.value = Object.assign(envVars.value, raw_dataStore.data.env)
     for (let index = 0; index < raw_dataStore.data.elements.length; index++) {
         const element = raw_dataStore.data.elements[index];
         const item = {} as model3DType
@@ -61,6 +63,7 @@ onAfterRender(() => {
 })
 </script>
 <template>
+    <Env v-bind="envVars" />
     <template v-for="item in models">
         <TresGroup :name="item.name">
             <TresObject3D v-bind="item.modelFile.clone()" />

front/src/components/Promo/env.vue

@@ -51,14 +51,10 @@ const loadEnv = async () => {
     document.documentElement.style.setProperty('--primary-color', props.clear_color)
 }
 
-watch(() => props, () => {
-    try {
 loadEnv()
-    } catch (error) {
-        console.log(error)
-    }
-},
-    { deep: true }
-)
+
+watch(() => props, () => {
+    loadEnv()
+}, { deep: true })
 </script>
 <template></template>

front/src/components/Promo/load_models.vue

@@ -66,9 +66,6 @@ const setEnv = async () => {
     } else {
         delete envVars.env_displacementmap
         delete envVars.env_normalmap
-        delete envVars.hdr_gainmap
-        delete envVars.hdr_json
-        delete envVars.hdr_webp
         envVars.clear_color = PROMOBG
     }