fog

back/back/settings.py

@@ -61,6 +61,7 @@ CORS_ORIGIN_WHITELIST = [
     "http://127.0.0.1",
     "http://192.168.103.159",
     "http://192.168.103.159:3000",
+    "http://192.168.103.159:5173",
     "http://192.168.103.159:8000",
     "http://front:4173",
     "http://front:5173",

front/.env.development

@@ -1,3 +1,3 @@
 VITE_SERVER_URL='https://demo.kustarshina.ru'
 VITE_IMAGE_URL='https://demo.kustarshina.ru'
-# VITE_SERVER_URL='http://localhost:8000'
+VITE_SERVER_URL='http://192.168.103.159:8000'

front/src/components/Promo/env.vue

@@ -21,8 +21,8 @@ const loadEnv = async () => {
     ])
 
     scene.value.environment = result.renderTarget.texture
-    scene.value.background = result.renderTarget.texture
+    // scene.value.background = result.renderTarget.texture
-    scene.value.background.mapping = EquirectangularReflectionMapping
+    // scene.value.background.mapping = EquirectangularReflectionMapping
     // scene.value.backgroundBlurriness = 0.15
     result.renderTarget.texture.dispose();
 }

front/src/components/Promo/load_models.vue

@@ -15,7 +15,7 @@ import { IMAGE_URL, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
 
-const props = defineProps(['source', 'loaded', 'loaded_pan', 'tres_values'])
+const props = defineProps(['source', 'loaded', 'loaded_pan', 'clearColor'])
 
 const models = ref<model3DType[]>([])
 const clickable = ref<clickableAreaType[]>([])
@@ -40,9 +40,8 @@ const loadModels = async () => {
     envVars.hdr_json = raw_data.hdr_json ? `${IMAGE_URL}/${raw_data.hdr_json}` : undefined
     envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
 
-    // tiltShift.focus = raw_data.max_distance * 0.5
+    tiltShift.focus = raw_data.max_distance * 0.33
-    tiltShift.focus = raw_data.max_distance * 0.5
+    tiltShift.aperture = 10
-    tiltShift.aperture = 15
     tiltShift.maxblur = 1
 
     const data = raw_data.elements
@@ -197,7 +196,7 @@ watch(() => sidebar_scene.list, () => {
 <template>
     <TresGroup name="loaded">
         <Env v-bind="envVars" />
-        <PostProcess :tiltShift="tiltShift" :tres_values="tres_values"/>
+        <PostProcess :tiltShift="tiltShift" :clearColor="props.clearColor" />
         <template v-for="item in models">
             <TresGroup :name="item.name">
                 <TresObject3D v-bind="item.modelFile.clone()" />

front/src/components/Promo/main.vue

@@ -34,8 +34,8 @@ const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
 
 const controlsState = reactive({
     enableDamping: false,
-    maxPolarAngle: (Math.PI / 2) - 0.05,
+    maxPolarAngle: (Math.PI / 2) - 0.07,
-    minAzimuthAngle: (Math.PI / 2) - 0.02,
+    minAzimuthAngle: (Math.PI / 2) - 0.07,
 })
 const models_loading = ref(true)
 const set_model_load_status = (status: boolean) => {
@@ -54,42 +54,21 @@ watch(() => route.params.target, () => {
     }
 }, { deep: true })
 
-import { useControls, TresLeches } from '@tresjs/leches'
+const clearColor = 'steelBlue'
-import '@tresjs/leches/dist/style.css'
-const tres_values = useControls({
-    focus: {
-        value: 150,
-        min: 0,
-        max: 200,
-        step: 1,
-    },
-    aperture: {
-        value: 15,
-        min: 1,
-        max: 100,
-        step: 1,
-    },
-    maxblur: {
-        value: 1,
-        min: 0,
-        max: 100,
-        step: 1,
-    },
-})
 </script>
 <template>
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
-            <TresCanvas window-size :alpha="false" power-preference="high-performance">
+            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="clearColor">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" :clear-color="clearColor" />
-                        :tres_values="tres_values" />
                 </Suspense>
-                <TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow name="ground" v-if="false">
+                <TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow>
-                    <TresPlaneGeometry :args="[200, 200]" />
+                    <TresPlaneGeometry :args="[2000, 2000]" />
-                    <TresShadowMaterial :opacity="0.2" />
+                    <!-- <TresShadowMaterial :opacity="0.2" /> -->
+                    <TresMeshStandardMaterial :color="clearColor" />
                 </TresMesh>
             </TresCanvas>
             <div class="homelink">

front/src/components/Promo/post_pocessing.vue

@@ -8,12 +8,14 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 import { useTresContext, useLoop } from '@tresjs/core';
 import { watch } from 'vue';
+import { Fog, FogExp2 } from 'three';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
-const props = defineProps(['tres_values', 'tiltShift'])
+const props = defineProps(['tiltShift', 'clearColor'])
+const k = { start: 0.25, end: 3 }
 
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
@@ -28,6 +30,9 @@ if (camera.value) {
     composer.addPass(renderPass);
     composer.addPass(bokehPass);
     composer.addPass(outputPass);
+
+    // scene.value.fog = new FogExp2(0xff0000, 0.005)
+    scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
 }
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
@@ -47,27 +52,9 @@ watch(props.tiltShift, () => {
         composer.addPass(renderPass);
         composer.addPass(bokehPass);
         composer.addPass(outputPass);
+
+        scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
     }
 }, { deep: true })
-// watch([
-//     props.tres_values.focus.value,
-//     props.tres_values.aperture.value,
-//     props.tres_values.maxblur.value
-// ], () => {
-//     if (camera.value) {
-//         const args = {
-//             focus: props.tres_values.focus.value.value,
-//             aperture: props.tres_values.aperture.value.value * 0.00001,
-//             maxblur: props.tres_values.maxblur.value.value * 0.01
-//         }
-//         const bokehPass = new BokehPass(scene.value, camera.value, args);
-//         composer.passes = []
-//         const renderPass = new RenderPass(scene.value, camera.value);
-//         const outputPass = new OutputPass();
-//         composer.addPass(renderPass);
-//         composer.addPass(bokehPass);
-//         composer.addPass(outputPass);
-//     }
-// }, { deep: true })
 </script>
 <template></template>