front/src/components/Promo/load_models.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
-import { Box3, Color, Group, Mesh, MeshStandardMaterial, PointLight, SphereGeometry, Vector3 } from 'three';
+import { Box3, Color, Group, Mesh, Sprite, SpriteMaterial, TextureLoader, Vector3 } from 'three';
 import { useTresContext, useSeek } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
@@ -34,9 +34,9 @@ const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
 
-    if (raw_data.hdr_gainmap) envVars.hdr_gainmap = `${IMAGE_URL}/${raw_data.hdr_gainmap}`
-    if (raw_data.hdr_json) envVars.hdr_json = `${IMAGE_URL}/${raw_data.hdr_json}`
-    if (raw_data.hdr_webp) envVars.hdr_webp = `${IMAGE_URL}/${raw_data.hdr_webp}`
+    envVars.hdr_gainmap = raw_data.hdr_gainmap ? `${IMAGE_URL}/${raw_data.hdr_gainmap}` : undefined
+    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
 
     const data = raw_data.elements
     if (!controls.value) return;
@@ -77,24 +77,18 @@ const loadModels = async () => {
         const res_array = (find_element as Group).isGroup ? find_element?.children : [find_element]
         if (find_element && !(find_element as Group).isGroup) {
             const world_position = new Vector3();
-            (find_element as Mesh).geometry.boundingBox.getCenter(world_position);
+            ((find_element as Mesh).geometry.boundingBox as any).getCenter(world_position);
             (find_element as Mesh).localToWorld(world_position);
 
-            const light = new PointLight()
-            light.position.set(world_position.x, world_position.y * 5, world_position.z)
-            light.color = index % 2 ? new Color('red') : new Color('green');
-            light.power = 10000;
-
-            const point = new Mesh(new SphereGeometry(2, 16, 16), new MeshStandardMaterial({
-                color: light.color,
-                emissive: light.color,
-                emissiveIntensity: 100
-            }))
-            point.position.set(light.position.x, light.position.y, light.position.z)
+            const map = new TextureLoader().load('sprite.png');
+            const material = new SpriteMaterial({ color: new Color('red') });
+            const point = new Sprite(material);
+            const p = raw_data.min_distance * 0.05
+            point.scale.set(p, p, 1)
+            point.position.set(world_position.x, p * 3, world_position.z)
             point.name = `${element.id}_clickable`
-            // light.add(point)
+            point.renderOrder = 1
 
-            clickable_items.value.push(light)
             clickable_items.value.push(point)
             clickable_objects.value.push({
                 name: point.name,
@@ -154,18 +148,15 @@ watch(() => props.source, () => {
 })
 </script>
 <template>
-    <Suspense>
-        <Env v-bind="envVars" />
-    </Suspense>
     <TresGroup name="loaded">
+        <Env v-bind="envVars" />
         <template v-for="item in models">
             <TresGroup :name="item.name">
                 <TresObject3D v-bind="item.modelFile.clone()" />
             </TresGroup>
         </template>
         <template v-for="item in clickable_items">
-            <TresObject3D v-if="item.type == 'PointLight'" v-bind="item.clone()" />
-            <TresMesh v-else @click="() => openSidebar(item.name.replace('_clickable', ''))" v-bind="item" />
+            <TresMesh @click="() => openSidebar(item.name.replace('_clickable', ''))" v-bind="item.clone()" />
         </template>
     </TresGroup>
 </template>

front/src/components/Promo/main.vue

@@ -100,8 +100,8 @@ watch(() => route.params.target, () => {
 
 .homelink {
     position: absolute;
-    right: 0;
-    bottom: 0;
+    right: 2rem;
+    bottom: 2rem;
 
     svg {
         font-size: 3rem;
@@ -109,7 +109,7 @@ watch(() => route.params.target, () => {
     }
 
     a {
-        margin-bottom: 2rem;
+        margin-top: 2rem;
         border-radius: 50%;
         border: 1px solid white;
         background: white;

front/src/components/Promo/sidebar.vue

@@ -8,7 +8,6 @@ import { usePromoScene } from '../../stores/promo_scene';
 const sidebar = usePromoSidebar()
 const scene = usePromoScene()
 const sidebar_obj = ref()
-console.log(scene.list)
 // onClickOutside(sidebar_obj, () => sidebar.close())
 </script>
 <template>
@@ -30,7 +29,9 @@ console.log(scene.list)
             <template v-else>
                 <template v-for="item in scene.list">
                     <h3>{{ item.name }}</h3>
-                    <p>{{ item.description }}</p>
+                    <template v-for="p in item.description.split('\n')">
+                        <p>{{ p }}</p>
+                    </template>
                 </template>
             </template>
         </div>