46 lines
1.6 KiB
Vue
46 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls, Environment } from '@tresjs/cientos'
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 1,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
// enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
})
|
|
|
|
const explosion_state = useState<boolean>('explosion_state', () => false)
|
|
const toggleExpState = () => {
|
|
explosion_state.value = !explosion_state.value
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="h-96 relative">
|
|
<ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
|
|
<TresCanvas preset="realistic" heoght="600">
|
|
<TresPerspectiveCamera :position="[-7, 2, 4]" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense v-if=false>
|
|
<Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
|
|
</Suspense>
|
|
<ModelDiagram />
|
|
|
|
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="#f2f2f2" cast-shadow />
|
|
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
|
|
<TresAmbientLight />
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
<span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
|
|
<Icon name="mdi:checkbox-outline" v-if="explosion_state" />
|
|
<Icon name="mdi:square-outline" v-else />
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |