explosion button
This commit is contained in:
parent
1ff6de94e1
commit
a85ee1e362
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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]" />
|
||||
|
|
Loading…
Reference in New Issue