front/src/components/Promo/load_models.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import {
-    Box3, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
+    Box3, CircleGeometry, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
+    MeshStandardMaterial,
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
@@ -28,6 +29,18 @@ const { seekByName, seekAllByName } = useSeek()
 const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string }
 const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: number }
 
+
+const groundTexture = await useTexture({
+    displacementMap: '/ground_displacement.jpg',
+})
+const ground = reactive({
+    color: props.clearColor,
+    displacementMap: groundTexture.displacementMap,
+    displacementScale: 50,
+    roughness: 100,
+    side: DoubleSide
+})
+
 // renderer.value.capabilities.maxTextures = 4
 // renderer.value.capabilities.maxTextureSize = 512
 // renderer.value.capabilities.precision = 'lowp'
@@ -41,7 +54,7 @@ const loadModels = async () => {
     envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
 
     tiltShift.focus = raw_data.min_distance * 0.75
-    tiltShift.aperture = 10
+    tiltShift.aperture = 3
     tiltShift.maxblur = 1
 
     const data = raw_data.elements
@@ -72,6 +85,21 @@ const loadModels = async () => {
         const clickable_areas = await res.json()
         clickable.value.push(...clickable_areas)
     }
+    const ground = new Mesh(
+        new CircleGeometry(tiltShift.focus * 10, tiltShift.focus * 10),
+        new MeshStandardMaterial({
+            color: props.clearColor,
+            displacementMap: groundTexture.displacementMap,
+            displacementScale: tiltShift.focus,
+            roughness: 100,
+            side: DoubleSide
+        })
+    )
+    ground.position.y = -0.33 * tiltShift.focus
+    ground.rotateX(-Math.PI / 2)
+    ground.name = "ground"
+    models.value.push({ name: 'ground', modelFile: ground })
+
     sidebar_scene.setData(sidebar_items)
 
     for (let index = 0; index < clickable.value.length; index++) {
@@ -183,16 +211,6 @@ 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,
-    side: DoubleSide
-})
 watch(() => sidebar_scene.list, () => {
     sidebar_scene.list.forEach(element => {
         const el = seekByName(scene.value, element.name)
@@ -215,9 +233,5 @@ 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.33 * 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/post_pocessing.vue

@@ -34,7 +34,7 @@ if (camera.value) {
 }
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    // composer.render()
+    composer.render()
 })
 watch(props.tiltShift, () => {
     if (camera.value) {