46 lines
1.3 KiB
Vue
46 lines
1.3 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 controlsState = reactive({
|
|
position: { x: 0, y: 0, z: 0 },
|
|
enablePan: false,
|
|
enableZoom: false,
|
|
minPolarAngle: degToRad(60),
|
|
maxPolarAngle: degToRad(100),
|
|
})
|
|
const cameraStat = reactive({
|
|
position: [0, 0, 5],
|
|
aspect: 1920 / 600,
|
|
// fov: 40,
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="calc">
|
|
<ClientOnly fallback-tag="div">
|
|
<template #fallback>
|
|
<div class="fallback">
|
|
Загрузка 3D модели
|
|
</div>
|
|
</template>
|
|
<Loader />
|
|
<Stats />
|
|
<TresCanvas clear-color="#e2e8f0">
|
|
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense>
|
|
<ModelSmoothCamera />
|
|
</Suspense>
|
|
<Suspense>
|
|
<ModelEnv />
|
|
</Suspense>
|
|
<TresGroup>
|
|
<Suspense>
|
|
<ModelParametric />
|
|
</Suspense>
|
|
</TresGroup>
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
</div>
|
|
</template> |