find in group child mesh

front/src/components/Promo/load_models.vue

@@ -47,6 +47,8 @@ const loadModels = async () => {
         shadows_and_pos(loaded_scene)
         item.modelFile = loaded_scene
 
+        item.name = element.name
+
         models.value.push(item)
 
         if (element.min_distance && element.min_distance > distance.min) distance.min = element.min_distance
@@ -71,7 +73,19 @@ const loadModels = async () => {
 
     for (let index = 0; index < clickable.value.length; index++) {
         const element = clickable.value[index];
-        clickable_objects.value.push(seekByName(scene.value, element.object_name))
+        const find_element = seekByName(scene.value, element.object_name)
+        if (!find_element) continue
+        const res_array = find_element.isGroup ? find_element?.children : [find_element]
+        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)
+        }
+        console.log(clickable_objects)
     }
 }
 onMounted(() => {
@@ -93,17 +107,19 @@ const clickEvent = (event: MouseEvent) => {
     pointer.y = y
     raycaster.value.setFromCamera(new Vector2(pointer.x, pointer.y), camera.value);
 
-    const intersects = raycaster.value.intersectObjects(clickable_objects.value);
+    const intersects = raycaster.value.intersectObjects(clickable_objects.value.map(el => el.object));
     const names = intersects.map(el => el.object.name ?? false).filter(Boolean)
     if (names.length) {
-        const clicks = clickable.value.find(el => names.includes(el.object_name))
+        const clicks = clickable_objects.value.find(el => names.includes(el.name))
         if (!clicks) return
+        const target = clickable.value.find(el => el.id == clicks.target)
+        if (!target) return
         const sidebar_data = {
-            title: clicks.name,
-            description: clicks.description
+            title: target.name,
+            description: target.description
         } as PromoSidebarData
-        if (clicks?.target) {
-            sidebar_data.target = clicks.target.toString()
+        if (target?.target) {
+            sidebar_data.target = target.target.toString()
         }
         sidebar.open()
         sidebar.setData(sidebar_data)
@@ -119,7 +135,11 @@ watch(() => props.source, () => {
 })
 </script>
 <template>
-    <TresGroup v-for="item in models" name="loaded">
-        <TresObject3D v-bind="item.modelFile.clone()" />
+    <TresGroup name="loaded">
+        <template v-for="item in models">
+            <TresGroup :name="item.name">
+                <TresObject3D v-bind="item.modelFile.clone()" />
+            </TresGroup>
+        </template>
     </TresGroup>
 </template>

front/src/index.d.ts

@@ -25,7 +25,8 @@ interface element3DType {
 }
 interface model3DType {
     modelUrl?: string,
-    modelFile?: any
+    modelFile?: any,
+    name: string
 }
 interface clickableAreaType {
     description: string;