57 lines
1.7 KiB
Vue
57 lines
1.7 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 section_count = use_section_count()
|
|
const extra_section = use_extra_section()
|
|
|
|
const controlsState = reactive({
|
|
distance: section_count.value,
|
|
minDistance: 10,
|
|
maxDistance: 10,
|
|
position: { x: 0, y: 0, z: 0 },
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
minPolarAngle: degToRad(60),
|
|
maxPolarAngle: degToRad(60),
|
|
})
|
|
const cameraStat = reactive({
|
|
aspect: 1920 / 600,
|
|
// fov: 40,
|
|
})
|
|
|
|
const camera = ref("camera")
|
|
|
|
watch([section_count, extra_section], () => {
|
|
let v = (section_count.value + ~~(!!extra_section.value));
|
|
if (v <= 10) v = 10
|
|
controlsState.minDistance = v;
|
|
controlsState.maxDistance = v;
|
|
(camera.value as any).position.normalize().multiplyScalar(v)
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="container min-w-full siteblock_calc-canvas">
|
|
<ClientOnly fallback-tag="div">
|
|
<template #fallback>
|
|
<div class="fallback">
|
|
Загрузка 3D модели
|
|
</div>
|
|
</template>
|
|
<Loader />
|
|
<Stats />
|
|
<TresCanvas clear-color="#ccc">
|
|
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<TresGroup>
|
|
<Suspense>
|
|
<ModelParametric />
|
|
</Suspense>
|
|
</TresGroup>
|
|
|
|
<TresAmbientLight intensity="10" />
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
</div>
|
|
</template> |