<script setup lang="ts">
import { Box3, Vector3 } from 'three';
import { useGLTF, } from '@tresjs/cientos'

const props = defineProps(['modelUrl', 'onClick'])

const { scene } = await useGLTF(props.modelUrl)
const box = new Box3();
box.expandByObject(scene.children[0]);
let center = new Vector3();
box.getCenter(center)
let size = new Vector3();
box.getSize(size)

const box_size = [size.x, size.y, size.z]

const show_alert = () => {
    alert(props.modelUrl)
}
scene.receiveShadow = true
scene.castShadow = true
</script>
<template>
    <TresGroup :posiion="[0, 0, 0]">
        <TresMesh :position="center" @click="show_alert" cast-shadow receive-shadow>
            <TresBoxGeometry :args="box_size" />
            <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
        </TresMesh>
        <TresMesh cast-shadow receive-shadow>
            <primitive :object="scene" />
        </TresMesh>
    </TresGroup>
</template>