TOPVERSE_Official/components/model/model.vue

23 lines
647 B
Vue
Raw Normal View History

2023-05-26 14:21:14 +08:00
<script setup lang="ts">
import { Model as LingoModel, OrbitCamera, World, useAnimation } from 'lingo3d-vue'
2023-05-26 19:53:05 +08:00
$defineProps<{
src: string
2023-05-30 15:58:04 +08:00
width:number
2023-05-26 19:53:05 +08:00
}>()
2023-05-26 14:21:14 +08:00
const anim = useAnimation({ from: 180, to: 0, duration: 5000 })
</script>
<template>
2023-05-31 11:02:15 +08:00
<div class="relative bg-transparent w-500px h-200px flex justify-center items-center">
<div class="absolute h-500px w-500px">
<World color="transparent" default-light="studio">
2023-05-26 19:53:05 +08:00
<LingoModel :src="src" :y="0" :rotation-z="anim" :box-visible="false" />
2023-05-31 11:02:15 +08:00
<OrbitCamera active :z="200" :y="80" :zoom="1.2" auto-rotate enable-damping />
2023-05-26 14:21:14 +08:00
</World>
2023-05-31 11:02:15 +08:00
</div>
2023-05-26 14:21:14 +08:00
</div>
</template>