59 lines
1.7 KiB
Vue
59 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 fence_section = use_fence_section()
|
|
|
|
const defDistance = 3
|
|
const controlsState = reactive({
|
|
distance: section_count.value,
|
|
minDistance: defDistance,
|
|
maxDistance: defDistance,
|
|
position: { x: 0, y: 0, z: 0 },
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
minPolarAngle: degToRad(60),
|
|
maxPolarAngle: degToRad(90),
|
|
})
|
|
const cameraStat = reactive({
|
|
position: [0, 0, 5],
|
|
aspect: 1920 / 600,
|
|
// fov: 40,
|
|
})
|
|
|
|
const camera = ref("camera")
|
|
|
|
watch(fence_section, ()=>{
|
|
let v = fence_section.value * 2;
|
|
if (v <= defDistance) v = defDistance
|
|
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>
|
|
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<TresGroup :position-y="-0.5">
|
|
<Suspense>
|
|
<ModelParametric />
|
|
</Suspense>
|
|
</TresGroup>
|
|
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
</div>
|
|
</template> |