62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { Stats, OrbitControls } from '@tresjs/cientos'
|
|
import { degToRad } from 'three/src/math/MathUtils.js';
|
|
|
|
const container = ref<HTMLElement | null>(null);
|
|
const { isIntersecting, startObserver, stopObserver } = useSceneVisibility();
|
|
|
|
const controlsState = reactive({
|
|
position: { x: 0, y: 0, z: 0 },
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
minPolarAngle: degToRad(60),
|
|
maxPolarAngle: degToRad(100),
|
|
//minAzimuthAngle: degToRad(0),
|
|
//maxAzimuthAngle: degToRad(180),
|
|
})
|
|
const cameraStat = reactive({
|
|
position: [0, 0, 5],
|
|
aspect: 1920 / 600,
|
|
// fov: 40,
|
|
})
|
|
const renderMode = computed(() => (isIntersecting.value ? 'always' : 'manual'));
|
|
|
|
onMounted(async () => {
|
|
if (container.value) {
|
|
await nextTick()
|
|
startObserver(container.value);
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
stopObserver();
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="calc" ref="container">
|
|
<ClientOnly fallback-tag="div">
|
|
<template #fallback>
|
|
<div class="fallback">
|
|
Загрузка 3D модели
|
|
</div>
|
|
</template>
|
|
<Loader />
|
|
<TresCanvas clear-color="#e2e8f0" :render-mode="renderMode" :key="renderMode">
|
|
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense>
|
|
<ModelEnv />
|
|
</Suspense>
|
|
<Suspense>
|
|
<ModelSmoothCamera />
|
|
</Suspense>
|
|
<TresGroup>
|
|
<Suspense>
|
|
<ModelParametric />
|
|
</Suspense>
|
|
</TresGroup>
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
</div>
|
|
</template> |