56 lines
1014 B
Vue
56 lines
1014 B
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import threeGlb from '@/assets/images/three/sample.glb'
|
|
|
|
import model from './model.vue'
|
|
import detail from './detail.vue'
|
|
|
|
const props = defineProps({
|
|
currentUrl: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
//const emit = defineEmits([
|
|
//])
|
|
let data = reactive({
|
|
})
|
|
|
|
const modelRef = ref(null)
|
|
onMounted(()=>{
|
|
console.log(props.currentUrl)
|
|
modelRef.value.open(threeGlb)
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="three-model">
|
|
<div class="modelBox">
|
|
<model ref="modelRef" />
|
|
</div>
|
|
<div class="detailBox">
|
|
<detail ref="detailRef" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.three-model{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
padding: 6.7rem 13rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> .modelBox{
|
|
height: 100%;
|
|
width: 65.5rem;
|
|
}
|
|
> .detailBox{
|
|
width: 22rem;
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style> |