65 lines
2.1 KiB
Vue
65 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls, Environment } from '@tresjs/cientos'
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 1,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
// enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
})
|
|
const container = ref()
|
|
const koef = ref()
|
|
const scrollBlock = (e: Event) => {
|
|
const { top, bottom, height } = container.value.getBoundingClientRect();
|
|
const { innerHeight } = window;
|
|
const partiallyVisible = (top > 0 && top < innerHeight) ||
|
|
(bottom > 0 && bottom < innerHeight)
|
|
const visibleHeight = innerHeight - top
|
|
const h = height * 1.5
|
|
if (partiallyVisible && visibleHeight < h) {
|
|
koef.value = visibleHeight / h
|
|
}
|
|
}
|
|
const targetExplosion = useState('targetExplosion', () => {
|
|
const k = 3
|
|
return {
|
|
kosynka: [0 * k, 0 * k, 0.75 * k],
|
|
krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
|
|
osnova_stolba: [0 * k, 0 * k, 0 * k],
|
|
planki: [0 * k, 0 * k, -0.5 * k],
|
|
stolb: [0 * k, 0 * k, 1 * k],
|
|
verh: [0 * k, 0.25 * k, 0 * k],
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="container min-w-full" ref="container">
|
|
<template v-for="(value, key) in targetExplosion" v-if="false">
|
|
<div>
|
|
<label for="key">{{ key }}</label>
|
|
<input type="number" v-for="(item, n) in value" v-model="targetExplosion[key][n]" step="0.25">
|
|
</div>
|
|
</template>
|
|
<TresCanvas shadows>
|
|
<TresPerspectiveCamera :position="[-7, 2, 4]" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense>
|
|
<Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" />
|
|
</Suspense>
|
|
<ModelDiagram />
|
|
|
|
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="#f2f2f2" cast-shadow />
|
|
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
|
|
<TresAmbientLight />
|
|
</TresCanvas>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |