From ccba126dd76f244a10710f3c7184c593ec61eba6 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Mon, 29 Jul 2024 10:27:39 +0300 Subject: [PATCH] clear bg --- front/src/components/Promo/env.vue | 36 ++++++++++------------ front/src/components/Promo/load_models.vue | 18 ++++++----- front/src/components/Promo/main.vue | 3 +- front/src/constants.ts | 4 ++- 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue index b5dcf1b..c9dd31a 100644 --- a/front/src/components/Promo/env.vue +++ b/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 result = await loader.loadAsync([ - props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp, - props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap, - props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json, - ]) - const pmremGenerator = new PMREMGenerator(renderer.value); - pmremGenerator.compileEquirectangularShader(); + const loader = new GainMapLoader(renderer.value) + const result = await loader.loadAsync([ + props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp, + props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap, + props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json, + ]) + const pmremGenerator = new PMREMGenerator(renderer.value); + pmremGenerator.compileEquirectangularShader(); - const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture); - const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null; + const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture); + const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null; - scene.value.environment = newEnvMap - scene.value.environmentIntensity = 2.5 + scene.value.environment = newEnvMap + 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) } diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index a6a0b75..5c84143 100644 --- a/front/src/components/Promo/load_models.vue +++ b/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( diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue index 91662e0..d54cf6e 100644 --- a/front/src/components/Promo/main.vue +++ b/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, () => {