front/src/components/Promo/load_models.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import {
-    Box3, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
-    MeshStandardMaterial,
-    MeshStandardMaterialParameters,
-    PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
+    Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
+    MeshStandardMaterial, MeshStandardMaterialParameters,
+    Vector2, Vector3, Object3D
 } from 'three';
 
 import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
@@ -23,20 +22,23 @@ const models = ref<model3DType[]>([])
 const clickable = ref<clickableAreaType[]>([])
 const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
+const envVars = reactive({}) as EnvVars
+
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { pause, resume } = useLoop()
 const { seekByName, seekAllByName } = useSeek()
-const envVars = reactive({}) as EnvVars
 
 const groundTexture = await useTexture({
     displacementMap: '/ground_displacement.jpg',
 })
 
+const { scene: pointer_pin } = await useGLTF('/pointer.glb')
+
 const timer = ref(10)
 setInterval(() => {
-    console.log({ timer: timer.value })
+    // console.log({ timer: timer.value })
     if (timer.value > 0) {
         timer.value -= 1
     } else if (timer.value == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) {
@@ -51,10 +53,6 @@ setInterval(() => {
     }
 }, 1000);
 
-// renderer.value.capabilities.maxTextures = 4
-// renderer.value.capabilities.maxTextureSize = 512
-renderer.value.capabilities.precision = 'lowp'
-
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
@@ -167,23 +165,20 @@ const loadModels = async () => {
             (find_element as Mesh).localToWorld(world_position);
 
             const p = raw_data.min_distance * 0.05
-            const plane = new PlaneGeometry(p, p, 32)
+            // const plane = new PlaneGeometry(p, p, 32)
 
-            const mesh_material = new MeshBasicMaterial({ side: DoubleSide })
-            const sprite_material = new SpriteMaterial()
-            if (element.image) {
-                const map = new TextureLoader().load(`${IMAGE_URL}/${element.image}`);
-                mesh_material.map = map
-                sprite_material.map = map
-            } else {
-                mesh_material.color = new Color('red')
-                sprite_material.color = new Color('red')
-            }
+            // const mesh_material = new MeshBasicMaterial({ side: DoubleSide })
+            // mesh_material.color = new Color('red')
+            // if (element.image) {
+            //     const map = new TextureLoader().load(`${IMAGE_URL}/${element.image}`);
+            //     mesh_material.map = map
+            // }
 
-            const point = new Mesh(plane, mesh_material);
+            const point = pointer_pin.clone()
             point.position.set(world_position.x, p * 3, world_position.z)
             point.name = `${element.id}_clickable`
-            point.renderOrder = 10
+            point.scale.set(p * 2, p * 2, p * 2)
+            point.updateMatrixWorld()
 
             if (clickable_items.value.find(el => el.name == point.name)) continue
             clickable_items.value.push(point)
@@ -215,8 +210,9 @@ const loadModels = async () => {
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
     clickable_refs.value.map(el => {
-        if (el.value[0] && typeof el.value[0].lookAt == 'function') {
-            el.value[0].lookAt(camera.value?.position);
+        if (el.value[0].children[0] && typeof el.value[0].children[0].lookAt == 'function') {
+            el.value[0].children[0].lookAt(camera.value?.position);
+            // el.value[0].updateMatrixWorld()
         }
     })
     if (controls.value) {
@@ -318,7 +314,7 @@ watch(() => sidebar_scene.list, () => {
             </TresGroup>
         </template>
         <template v-for="(item, i) in clickable_items">
-            <TresMesh v-bind="item" :ref="clickable_refs[i]" />
+            <TresObject3D v-bind="item.clone()" :ref="clickable_refs[i]" />
         </template>
     </TresGroup>
 </template>