99 lines
3.4 KiB
Vue
99 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { TresCanvas } from '@tresjs/core'
|
|
import { OrbitControls, Environment, Html } from '@tresjs/cientos'
|
|
|
|
const camera = ref()
|
|
const controlsState = reactive({
|
|
minDistance: 2,
|
|
maxDistance: 10,
|
|
enablePan: false,
|
|
// enableZoom: false,
|
|
maxPolarAngle: (Math.PI / 2) - 0.2,
|
|
})
|
|
|
|
const explosion_state = use_explosion_state()
|
|
const toggleExpState = () => {
|
|
explosion_state.value = !explosion_state.value
|
|
}
|
|
const back_light = ref()
|
|
const key_light = ref()
|
|
const secondary_light = ref()
|
|
const loadAll = async () => {
|
|
const { scene: back } = await useGLTF('/models_light/back_exp.glb')
|
|
const { scene: key } = await useGLTF('/models_light/key_exp.glb')
|
|
const { scene: secondary } = await useGLTF('/models_light/secondary_exp.glb')
|
|
|
|
const k = 0.001
|
|
|
|
back_light.value = back.children[0]
|
|
back_light.value.intensity = back_light.value.intensity * k
|
|
back_light.value.shadow.bias = -0.01
|
|
// back_light.value.intensity = 250
|
|
|
|
key_light.value = key.children[0]
|
|
key_light.value.intensity = key_light.value.intensity * k
|
|
key_light.value.shadow.bias = -0.01
|
|
// key_light.value.intensity = 250
|
|
key_light.value.cast_shadow = true
|
|
|
|
secondary_light.value = secondary.children[0]
|
|
secondary_light.value.intensity = secondary_light.value.intensity * k
|
|
secondary_light.value.shadow.bias = -0.01
|
|
// secondary_light.value.intensity = 50
|
|
}
|
|
|
|
const changeDistance = (v = 1) => {
|
|
if(camera.value) {
|
|
console.log(camera.value.position.normalize())
|
|
camera.value.position.z += v
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
loadAll()
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="h-96 relative">
|
|
<ClientOnly fallback-tag="div">
|
|
<template #fallback>
|
|
<div class="fallback">
|
|
Загрузка 3D модели
|
|
</div>
|
|
</template>
|
|
<TresCanvas height="600">
|
|
<TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
|
|
<OrbitControls v-bind="controlsState" make-default />
|
|
<Suspense>
|
|
<ModelDiagram />
|
|
</Suspense>
|
|
|
|
<TresPointLight v-bind="back_light" v-if="back_light"
|
|
:position="[back_light.position.x, back_light.position.y, back_light.position.z]" />
|
|
<TresPointLight v-bind="key_light" v-if="key_light"
|
|
:position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
|
|
<TresPointLight v-bind="secondary_light" v-if="secondary_light"
|
|
:position="[secondary_light.position.x, secondary_light.position.y, secondary_light.position.z]" />
|
|
<TresAmbientLight :intensity="2" />
|
|
</TresCanvas>
|
|
</ClientOnly>
|
|
<div class="canvas-icons">
|
|
<a @click="toggleExpState">
|
|
<Icon name="mdi:checkbox-outline" v-if="explosion_state" />
|
|
<Icon name="mdi:square-outline" v-else />
|
|
</a>
|
|
<a @click="changeDistance(0.5)" :class="[{ 'disabled': camera ? camera.position.z >= 9.5 : null }]">
|
|
<Icon name="mdi:plus-circle-outline" />
|
|
</a>
|
|
<a @click="changeDistance(-0.5)" :class="[{ 'disabled': camera ? camera.position.z <= -9.5 : null }]">
|
|
<Icon name="mdi:minus-circle-outline" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: 600px;
|
|
display: block;
|
|
}
|
|
</style> |