circle pointer

front/src/components/Promo/load_models.vue

@@ -6,6 +6,7 @@ import {
     Vector2, Vector3,
     Object3D,
     MeshPhongMaterial,
+    CircleGeometry,
 } from 'three';
 
 import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
@@ -112,7 +113,7 @@ const loadModels = async () => {
         let { scene: loaded_scene } = await useGLTF(item.modelUrl)
         item.modelFile = loaded_scene
         item.name = element.name
-        
+
         if (!element.is_enabled) {
             item.modelFile.visible = false
         }
@@ -125,7 +126,7 @@ const loadModels = async () => {
             )
             item.modelFile.children[0].updateMatrixWorld(true)
         }
-        
+
         item.modelFile.updateMatrixWorld(true)
         models.value.push(item)
 
@@ -186,12 +187,13 @@ const loadModels = async () => {
 
             const p = raw_data.min_distance * 0.05
 
-            const point = pointer_pin.clone()
+            const point = new Mesh(
+                new CircleGeometry(p, 32),
+                new MeshPhongMaterial({ emissive: new Color(1, 1, 1), emissiveIntensity: 10 })
+            )
             point.rotateX(-0.5 * Math.PI)
             point.position.set(world_position.x, p * 3, world_position.z * 2)
             point.name = `${element.id}_clickable`
-            point.scale.set(p * 2, p * 2, p * 2)
-            point.material = new MeshPhongMaterial({ emissive: new Color(1, 1, 1), emissiveIntensity: 10 })
             point.updateMatrixWorld()
 
             if (clickable_items.value.find(el => el.name == point.name)) continue
@@ -229,20 +231,11 @@ const loadModels = async () => {
         (controls.value as any).autoRotate = false;
     }
 }
-const lookAtCamera = (obj: Group) => {
-    if (!obj || !obj.children) {
-        return
-    }
-    obj.children.forEach((element: Object3D) => {
-        if (element && typeof element.lookAt == 'function' && camera.value) {
-            element.lookAt(obj.position.x, obj.position.y * Math.PI * -0.5, camera.value?.position.z)
-        }
-    });
-}
+
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
     clickable_refs.value.map(el => {
-        lookAtCamera(el.value[0])
+        el.value[0].lookAt(camera.value?.position)
     })
     if (controls.value) {
         if (timer.value == 0) {
@@ -254,24 +247,21 @@ onAfterRender(() => {
 const openSidebar = (id: number) => {
     sidebar.open(id);
 
-    // const clickable = useClickable()
-    // const target = clickable.list.find(el => el.id == id)
-    // if (!target) return
-    // const el = seekByName(scene.value, target.object_name);
-    // if (el) {
-    //     // (controls.value as any).maxDistance = 10;
-    //     // (controls.value as any).minDistance = 1;
-    //     const target_vector = new Vector3();
+    const clickable = useClickable()
+    const target = clickable.list.find(el => el.id == id)
+    if (!target) return
+    const el = seekByName(scene.value, `${id}_clickable`);
+    console.log(el)
+    if (el) {
+        (controls.value as any).maxDistance = 10;
+        (controls.value as any).minDistance = 1;
+        const target_vector = new Vector3();
 
-    //     el.getWorldPosition(target_vector);
-    //     (controls.value as any).target = target_vector;
-    //     console.log(target_vector)
-
-    //     target_vector.copy( el.position );
-    //     el.localToWorld( target_vector );
-    //     console.log(target_vector)
-    //     // (camera.value as any).lookAt(el)
-    // }
+        el.getWorldPosition(target_vector);
+        (controls.value as any).target = target_vector;
+        console.log(target_vector)
+        // (camera.value as any).lookAt(el)
+    }
 }
 
 loadModels()

front/src/stores/raw_data.ts

@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+export const useRawData = defineStore('raw_data', {
+    state: () => {
+        return {
+            
+        } 
+    },
+})