33 lines
950 B
Vue
33 lines
950 B
Vue
<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> |