34 lines
910 B
Vue
34 lines
910 B
Vue
<template>
|
|
<div class="container mx-auto p-4">
|
|
<atropos-component ref="atropos" class="my-atropos" active-offset="40" shadow-scale="1.05">
|
|
<img src="https://files.erudi.fr/screenshit/41684f3ebccdde7352339aa0ae79bc43d50a2b79.jpg" data-atropos-offset="-5" alt="3D Image 2" />
|
|
<img src="/logo.svg" alt="3D Image" data-atropos-offset="0" class="absolute inset-0 w-full h-full object-cover" />
|
|
</atropos-component>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const atropos = ref(null);
|
|
|
|
onMounted(() => {
|
|
atropos.value.addEventListener('enter', () => {
|
|
console.log('Entered');
|
|
});
|
|
atropos.value.addEventListener('leave', () => {
|
|
console.log('Left');
|
|
});
|
|
atropos.value.addEventListener('rotate', (event) => {
|
|
console.log('Rotate', event.detail);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.my-atropos {
|
|
width: 320px;
|
|
height: 160px;
|
|
}
|
|
</style>
|