front/src/components/Promo/load_models.vue

@@ -4,10 +4,7 @@ import {
     Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
     MeshStandardMaterial, MeshStandardMaterialParameters,
     Vector2, Vector3,
-    Object3D,
-    MeshPhongMaterial,
-    CircleGeometry,
-    MeshBasicMaterial,
+    CircleGeometry, MeshBasicMaterial,
 } from 'three';
 
 import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
@@ -28,6 +25,7 @@ const models = ref<model3DType[]>([])
 const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
 const envVars = reactive({}) as EnvVars
+const def_distance = reactive({ max: 10, min: 1 })
 
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
@@ -70,6 +68,9 @@ const loadModels = async () => {
     const raw_data = await res.json() as scene3D
     loading_store.status = 'other'
 
+    def_distance.max = raw_data.max_distance
+    def_distance.min = raw_data.min_distance
+
     envVars.focus = raw_data.max_distance * 0.5
     if (raw_data.env) {
         Object.assign(envVars, raw_data.env)
@@ -189,11 +190,13 @@ const loadModels = async () => {
 
             const p = raw_data.min_distance * 0.05
 
-            const point = new Mesh(
+            const point_mesh = new Mesh(
                 new CircleGeometry(p, 32),
                 new MeshBasicMaterial({ map: pointerTexture.map })
             )
-            point.rotateX(-0.5 * Math.PI)
+            point_mesh.rotateX(-0.5 * Math.PI)
+            const point = new Group()
+            point.add(point_mesh)
             point.position.set(world_position.x, p * 3, world_position.z * 2)
             point.name = `${element.id}_clickable`
             point.updateMatrixWorld()
@@ -237,7 +240,9 @@ const loadModels = async () => {
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
     clickable_refs.value.map(el => {
-        el.value[0].lookAt(camera.value?.position)
+        if (el.value[0] && el.value[0].children) {
+            el.value[0].children[0].lookAt(camera.value?.position)
+        }
     })
     if (controls.value) {
         if (timer.value == 0) {
@@ -253,7 +258,6 @@ const openSidebar = (id: number) => {
     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;
@@ -261,8 +265,6 @@ const openSidebar = (id: number) => {
 
         el.getWorldPosition(target_vector);
         (controls.value as any).target = target_vector;
-        console.log(target_vector)
-        // (camera.value as any).lookAt(el)
     }
 }
 
@@ -276,6 +278,13 @@ watch(() => props.source, () => {
     loadModels()
 })
 
+watch(() => sidebar.is_open, () => {
+    if (sidebar.is_open == false) {
+        (controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min;
+        (controls.value as any).maxDistance = def_distance.max;
+    }
+})
+
 onMounted(() => {
     document.addEventListener('click', clickEvent)
 
@@ -317,7 +326,8 @@ const clickEvent = (event: MouseEvent) => {
     pointer.y = y
     raycaster.value.setFromCamera(new Vector2(pointer.x, pointer.y), camera.value);
 
-    const intersects = raycaster.value.intersectObjects(seekAllByName(scene.value, '_clickable'));
+    const clickable_objects = seekAllByName(scene.value, '_clickable');
+    const intersects = raycaster.value.intersectObjects(clickable_objects);
     const names = intersects.map(el => (el.object.parent ? el.object.parent.name : el.object.name) ?? false).filter(Boolean)
     if (names.length) {
         openSidebar(parseInt(names[0].replace('_clickable', '')))