front/src/components/Promo/env.vue

@@ -13,7 +13,6 @@ const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
 
 const { renderer, scene } = useTresContext()
 const loadEnv = async () => {
-    console.log(props)
     const pmremGenerator = new PMREMGenerator(renderer.value);
     pmremGenerator.compileEquirectangularShader();
 

front/src/components/Promo/load_models.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue';
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { Box3, Color, Group, Mesh, Sprite, SpriteMaterial, TextureLoader, Vector3 } from 'three';
+import { Box3, Color, DoubleSide, Group, Mesh, MeshBasicMaterial, PlaneGeometry, Sprite, SpriteMaterial, TextureLoader, Vector2, Vector3 } from 'three';
-import { useTresContext, useSeek } from '@tresjs/core';
+import { useTresContext, useSeek, useRenderLoop } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -22,7 +22,6 @@ function shadows_and_pos(scene: any) {
 
 const models = ref<model3DType[]>([])
 const clickable = ref<clickableAreaType[]>([])
-const clickable_objects = ref<any[]>([])
 const clickable_items = ref<any[]>([])
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
@@ -81,29 +80,16 @@ const loadModels = async () => {
             (find_element as Mesh).localToWorld(world_position);
 
             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)
+            const material = new MeshBasicMaterial({ color: new Color('red'), side: DoubleSide });
+            const plane = new PlaneGeometry(p, p)
+
+            const point = new Mesh(plane, material);
             point.position.set(world_position.x, p * 3, world_position.z)
             point.name = `${element.id}_clickable`
             point.renderOrder = 1
 
             clickable_items.value.push(point)
-            clickable_objects.value.push({
-                name: point.name,
-                target: element.id,
-                object: point,
-            })
-        }
-        for (let index = 0; index < res_array.length; index++) {
-            const r = res_array[index];
-            let res = {
-                name: r.name,
-                target: element.id,
-                object: r,
-            }
-            clickable_objects.value.push(res)
         }
     }
 
@@ -146,6 +132,15 @@ watch(() => props.source, () => {
     }
     loadModels()
 })
+
+const { onLoop } = useRenderLoop()
+onLoop(() => {
+    clickable_items.value.map(el => {
+        if (camera.value) {
+            // el.quaternion.copy(camera.value.quaternion);
+        }
+    })
+})
 </script>
 <template>
     <TresGroup name="loaded">