front/src/components/Promo/env.vue

@@ -8,7 +8,7 @@ import { useTresContext } from '@tresjs/core';
 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'
-import { IMAGE_URL } from '../../constants';
+import { IMAGE_URL, PROMOBG } from '../../constants';
 
 const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json', 'env_displacementmap', 'env_normalmap', 'clear_color', 'focus'])
 const { renderer, scene } = useTresContext()
@@ -21,30 +21,26 @@ renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio(1.5)
 
 const loadEnv = async () => {
-    if (props.hdr_webp || props.hdr_gainmap || props.hdr_json) {
+    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.environment = newEnvMap
+    scene.value.environment = newEnvMap
-        scene.value.environmentIntensity = 2.5
+    scene.value.environmentIntensity = 2.5
 
-        result.renderTarget.texture.dispose();
+    result.renderTarget.texture.dispose();
-    }
 
-    if (props.clear_color) {
-        renderer.value.setClearColor(props.clear_color)
-    }
     const c = new Color()
-    renderer.value.getClearColor(c)
+    c.set(props.clear_color || PROMOBG)
+    renderer.value.setClearColor(c)
     scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
 }
 

front/src/components/Promo/load_models.vue

@@ -12,7 +12,7 @@ import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
 
-import { IMAGE_URL, SERVER_URL, } from '../../constants'
+import { IMAGE_URL, PROMOBG, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
 
@@ -35,7 +35,6 @@ const envVars = reactive({}) as {
     env_displacementmap?: string,
     env_normalmap?: string
 }
-const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: number }
 
 
 const groundTexture = await useTexture({
@@ -53,6 +52,11 @@ const loadModels = async () => {
     envVars.focus = raw_data.min_distance * 1
     if (raw_data.env) {
         Object.assign(envVars, raw_data.env)
+    } else {
+        delete envVars.hdr_gainmap
+        delete envVars.hdr_json
+        delete envVars.hdr_webp
+        envVars.clear_color = PROMOBG
     }
 
 
@@ -92,7 +96,7 @@ const loadModels = async () => {
 
     let c = new Color()
     if (envVars.clear_color) {
-        c = new Color(envVars.clear_color)
+        c.set(envVars.clear_color)
     } else {
         renderer.value.getClearColor(c)
     }
@@ -100,22 +104,22 @@ const loadModels = async () => {
     if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
     if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
     let addTexture: any
-    if (Object.keys(tex).length) {
+    if (Object.keys(tex).length > 0) {
         addTexture = await useTexture(tex)
     }
 
     const mesh = {
-        color: c.offsetHSL(0, 0, -0.5),
+        color: c.offsetHSL(0, 0, -0.33),
         displacementScale: envVars.focus,
         roughness: 100,
         side: DoubleSide
     } as MeshStandardMaterialParameters
-    if (addTexture.displacementMap) {
+    if (envVars.env_displacementmap) {
         mesh.displacementMap = addTexture.displacementMap
     } else {
         mesh.displacementMap = groundTexture.displacementMap
     }
-    if (addTexture.normalMap) {
+    if (envVars.env_normalmap) {
         mesh.normalMap = addTexture.normalMap
     }
     const ground = new Mesh(

front/src/components/Promo/main.vue

@@ -11,6 +11,7 @@ import '@tresjs/leches/styles'
 import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
+import { PROMOBG } from '../../constants';
 
 const minPan = ref(new Vector3(-2, -2, -2))
 const maxPan = ref(new Vector3(2, 2, 2))
@@ -58,7 +59,7 @@ watch(() => route.params.target, () => {
 <template>
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
-            <TresCanvas window-size :alpha="false" power-preference="high-performance" clear-color="MediumSlateBlue"
+            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
                 :logarithmicDepthBuffer="true">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />

front/src/constants.ts

@@ -1,2 +1,4 @@
 export const SERVER_URL = import.meta.env.VITE_SERVER_URL ?? window.location.origin
-export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
+export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
+
+export const PROMOBG='red'