90 lines
3.0 KiB
Vue
90 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls } from '@tresjs/cientos'
|
|
import { Vector3 } from 'three';
|
|
|
|
const container = ref<HTMLElement | null>(null);
|
|
const { isIntersecting, startObserver, stopObserver } = useSceneVisibility();
|
|
|
|
const camera = ref()
|
|
const controls = ref()
|
|
const controlsState = reactive({
|
|
minDistance: 2,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
// enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
})
|
|
|
|
const explosion_state = use_explosion_state()
|
|
const toggleExpState = () => {
|
|
explosion_state.value = !explosion_state.value
|
|
}
|
|
|
|
const changeDistance = (v = 1) => {
|
|
if (camera.value && controls.value) {
|
|
const distance = camera.value.position.distanceTo(new Vector3(0, 0, 0));
|
|
const r = distance + v
|
|
camera.value.position.normalize().multiplyScalar(r)
|
|
}
|
|
}
|
|
|
|
const renderMode = computed(() => (isIntersecting.value ? 'always' : 'manual'));
|
|
|
|
onMounted(async () => {
|
|
if (container.value) {
|
|
await nextTick()
|
|
startObserver(container.value);
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
stopObserver();
|
|
});
|
|
</script>
|
|
<template>
|
|
<Suspense>
|
|
<div ref="container" class="h-96 relative">
|
|
<ClientOnly fallback-tag="div">
|
|
<template #fallback>
|
|
<div class="fallback">
|
|
Загрузка 3D модели
|
|
</div>
|
|
</template>
|
|
{{ renderMode }}
|
|
<TresCanvas height="600">
|
|
<ModelUpdateRenderMode :render-mode="renderMode" />
|
|
<TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" ref="controls" make-default />
|
|
<Suspense>
|
|
<ModelEnv />
|
|
</Suspense>
|
|
<Suspense>
|
|
<ModelDiagram />
|
|
</Suspense>
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
<div class="canvas-icons">
|
|
<a href="#" @click.prevent="toggleExpState">
|
|
<Icon name="mdi:arrow-collapse-horizontal" v-if="explosion_state" />
|
|
<Icon name="mdi:arrow-expand-horizontal" v-else />
|
|
</a>
|
|
<a href="#" @click.prevent="changeDistance(-0.5)"
|
|
:class="[{ 'disabled': camera ? (camera.position.distanceTo(new Vector3(0, 0, 0)) <= controlsState.minDistance) : null }]">
|
|
<Icon name="mdi:plus-circle-outline" />
|
|
</a>
|
|
<a href="#" @click.prevent="changeDistance(0.5)"
|
|
:class="[{ 'disabled': camera ? (camera.position.distanceTo(new Vector3(0, 0, 0)) >= (controlsState.maxDistance)) : null }]">
|
|
<Icon name="mdi:minus-circle-outline" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Suspense>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |