front/src/components/Promo/load_models.vue

@@ -5,7 +5,7 @@ import {
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
-import { useTresContext, useSeek, useRenderLoop } from '@tresjs/core';
+import { useTresContext, useSeek, useRenderLoop, useTexture } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -40,7 +40,7 @@ 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.33
+    tiltShift.focus = raw_data.min_distance * 0.75
     tiltShift.aperture = 10
     tiltShift.maxblur = 1
 
@@ -183,6 +183,15 @@ const clickEvent = (event: MouseEvent) => {
     }
 }
 
+const groundTexture = await useTexture({
+    displacementMap: '/ground_displacement.jpg',
+})
+const ground = reactive({
+    color: props.clearColor,
+    displacementMap: groundTexture.displacementMap,
+    displacementScale: 50,
+    roughness: 100
+})
 watch(() => sidebar_scene.list, () => {
     sidebar_scene.list.forEach(element => {
         const el = seekByName(scene.value, element.name)
@@ -205,5 +214,9 @@ watch(() => sidebar_scene.list, () => {
         <template v-for="(item, i) in clickable_items">
             <TresMesh v-bind="item" :ref="clickable_refs[i]" />
         </template>
+        <TresMesh :position-y="-0.25 * ground.displacementScale" :rotate-x="-Math.PI / 2" receive-shadow>
+            <TresCircleGeometry :args="[tiltShift.focus * 100, tiltShift.focus * 100]" />
+            <TresMeshStandardMaterial v-bind="ground" />
+        </TresMesh>
     </TresGroup>
 </template>

front/src/components/Promo/main.vue

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
 import { Vector3 } from 'three';
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useTexture } from '@tresjs/core';
 import { OrbitControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
@@ -63,13 +63,10 @@ const clearColor = 'steelBlue'
                 <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" :clear-color="clearColor" />
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
+                        :clear-color="clearColor" />
                 </Suspense>
-                <TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow>
-                    <TresPlaneGeometry :args="[2000, 2000]" />
-                    <!-- <TresShadowMaterial :opacity="0.2" /> -->
-                    <TresMeshStandardMaterial :color="clearColor" />
-                </TresMesh>
+
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">

front/src/components/Promo/post_pocessing.vue

@@ -8,14 +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';
+import { Color, Fog, FogExp2 } from 'three';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
 const props = defineProps(['tiltShift', 'clearColor'])
-const k = { start: 0.25, end: 3 }
+const k = { start: 0.75, end: 3 }
 
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
@@ -30,13 +30,11 @@ 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(() => {
-    composer.render()
+    // composer.render()
 })
 watch(props.tiltShift, () => {
     if (camera.value) {