explosion button

This commit is contained in:
Kseninia Mikhaylova 2024-06-18 14:00:09 +03:00
parent 1ff6de94e1
commit a85ee1e362
4 changed files with 39 additions and 46 deletions

View File

@ -31,7 +31,7 @@ body {
}
.logo {
@apply text-ioprim font-bold w-20 text-xl leading-4 py-4 col-span-4 xl:col-span-2;
@apply text-ioprim font-bold w-20 text-2xl leading-4 py-4 col-span-4 xl:col-span-2;
}
.menu {

View File

@ -9,25 +9,19 @@ const controlsState = reactive({
// enableZoom: false,
maxPolarAngle: (Math.PI / 2) - 0.2,
})
const targetExplosion = useState('targetExplosion', () => {
const k = 1.5
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],
}
})
const explosion_state = useState<boolean>('explosion_state', () => false)
const toggleExpState = () => {
explosion_state.value = !explosion_state.value
}
</script>
<template>
<div class="h-96">
<div class="h-96 relative">
<ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
<TresCanvas preset="realistic" heoght="600">
<TresPerspectiveCamera :position="[-7, 2, 4]" />
<OrbitControls v-bind="controlsState" make-default />
<Suspense>
<Suspense v-if=false>
<Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="false" />
</Suspense>
<ModelDiagram />
@ -37,6 +31,10 @@ const targetExplosion = useState('targetExplosion', () => {
<TresAmbientLight />
</TresCanvas>
</ClientOnly>
<span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
<Icon name="mdi:checkbox-outline" v-if="explosion_state" />
<Icon name="mdi:square-outline" v-else />
</span>
</div>
</template>

View File

@ -1,12 +1,18 @@
<script setup lang="ts">
const props = defineProps(['koef'])
import Item from './item.vue';
const k = ref(props.koef || 1)
watch(props, () => {
if (k.value !== props.koef) {
k.value = props.koef || 1
}
}, { deep: true })
const explosion_state = useState<boolean>('explosion_state')
const k = 1.5
const targetExplosion = {
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>
<TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow v-if="false">
@ -15,12 +21,13 @@ watch(props, () => {
</TresMesh>
<Suspense>
<TresGroup :translate-y="-2" :scale="1.25">
<Item model-url="/models/kosynka.glb" ref-position="kosynka" />
<Item model-url="/models/krepleniye_planok.glb" ref-position="krepleniye_planok" />
<Item model-url="/models/kosynka.glb" :target="explosion_state ? targetExplosion.kosynka : [0, 0, 0]" />
<Item model-url="/models/krepleniye_planok.glb"
:target="explosion_state ? targetExplosion.krepleniye_planok : [0, 0, 0]" />
<Item model-url="/models/osnova_stolba.glb" />
<Item model-url="/models/planki.glb" ref-position="planki" />
<Item model-url="/models/stolb.glb" ref-position="stolb" />
<Item model-url="/models/verh.glb" ref-position="verh" />
<Item model-url="/models/planki.glb" :target="explosion_state ? targetExplosion.planki : [0, 0, 0]" />
<Item model-url="/models/stolb.glb" :target="explosion_state ? targetExplosion.stolb : [0, 0, 0]" />
<Item model-url="/models/verh.glb" :target="explosion_state ? targetExplosion.verh : [0, 0, 0]" />
</TresGroup>
</Suspense>
</template>

View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
import { Box3, Color, DoubleSide, MeshStandardMaterial, Vector3 } from 'three';
const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color', 'map'])
const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color', 'map'])
let scene
if (props.modelUrl) {
@ -13,7 +13,7 @@ if (props.modelUrl) {
scene.receiveShadow = true
scene.castShadow = true
const target = props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0)
const target = ref(props.target ? new Vector3(...props.target) : new Vector3(0, 0, 0))
const box = new Box3();
box.expandByObject(scene.children[0]);
let size = new Vector3();
@ -56,12 +56,12 @@ const axis = [
type vectorType = 'x' | 'y' | 'z';
onLoop(() => {
if (model.value && props.target) {
if (model.value && target.value) {
axis.forEach(element => {
const point = model.value.position[element.axis]
let step = stepbase * target[element.axis as vectorType]
let step = stepbase * target.value[element.axis as vectorType]
if (step !== 0) {
if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
if (Math.abs(point) >= Math.abs(target.value[element.axis as vectorType])) {
step = 0
}
model.value[element.func](step)
@ -80,27 +80,15 @@ watch(props, () => {
}
set_material(model.value)
}
if (props.target) {
target.value = new Vector3(...props.target)
}
}, { deep: true })
const targetExplosion = useState('targetExplosion')
watch(targetExplosion, () => {
if (props.refPosition) {
if (model.value.position.x !== targetExplosion.value[props.refPosition][0]) {
model.value.position.x = targetExplosion.value[props.refPosition][0]
}
if (model.value.position.y !== targetExplosion.value[props.refPosition][1]) {
model.value.position.y = targetExplosion.value[props.refPosition][1]
}
if (model.value.position.z !== targetExplosion.value[props.refPosition][2]) {
model.value.position.z = targetExplosion.value[props.refPosition][2]
}
}
}, { deep: true })
</script>
<template>
<Suspense>
<TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
ref="model">
<TresGroup :position="(props.position || [0, 0, 0])" ref="model">
<primitive :object="scene.children[0]" />
<TresMesh v-if="props.map" :cast-shadow="false" :receive-shadow="false">
<TresPlaneGeometry :args="[size.x, size.y]" />