assets/main.scss

@@ -240,7 +240,7 @@ a[href^="#"] {
     }
 
     &-close {
-        @apply absolute right-3 top-3 text-4xl opacity-50;
+        @apply absolute right-3 top-3 text-4xl opacity-50 cursor-pointer;
     }
 
     &-status {

components/model/item.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useGLTF } from '@tresjs/cientos'
-import { Vector3 } from 'three';
+import { useGLTF, Text3D } from '@tresjs/cientos'
+import { DoubleSide, Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'target', 'parent'])
 
 let scene: any
@@ -60,10 +60,17 @@ watch(props, () => {
         target.value = new Vector3(...props.target)
     }
 }, { deep: true })
-
 </script>
 <template>
-    <Suspense>
-        <primitive :object="scene.children[0]" :position="(props.position || [0, 0, 0])" ref="model" />
-    </Suspense>
+    <TresGroup ref="model" :name="scene.children[0].name">
+        <Suspense>
+            <primitive :object="scene.children[0]" :position="(props.position || [0, 0, 0])" />
+        </Suspense>
+        <Suspense v-if="false">
+            <Text3D :text="scene.children[0].name"
+                font='https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'>
+                <TresMeshNormalMaterial color=red />
+            </Text3D>
+        </Suspense>
+    </TresGroup>
 </template>