mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

preload all calc models

This commit is contained in:
Kseninia Mikhaylova 2024-06-11 11:25:31 +03:00
parent 715dcb01b7
commit 91de92ddfa
3 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/calcModels.vue
View File

@ -13,8 +13,9 @@ const { hasFinishLoading, progress, items } = await useProgress()
</script>
<template>
<div class="container min-w-full relative">
<Transition>
<div v-if="!hasFinishLoading"
<Transition name="fade-overlay" enter-active-class="opacity-1 transition-opacity duration-200"
leave-active-class="opacity-0 transition-opacity duration-200">
<div v-show="!hasFinishLoading"
class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
<div class="w-200px">
Идет загрузка... {{ progress }} %

12
components/model/item.vue
View File

@ -1,9 +1,15 @@
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
const props = defineProps(['modelUrl', 'position', 'removePos', 'target', 'color'])
const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color'])
const { scene } = await useGLTF(props.modelUrl)
let scene
if (props.modelUrl) {
const { scene: model } = await useGLTF(props.modelUrl, { draco: true })
scene = model
} else {
scene = props.model
}
scene.receiveShadow = true
scene.castShadow = true
@ -17,7 +23,7 @@ const getMaterial = () => {
return new MeshStandardMaterial({
color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
roughness: 0.3,
metalness: 1,
metalness: 0.5,
})
}
const material = getMaterial()

39
components/model/parametric.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts">
import { useTexture } from '@tresjs/core'
import { useGLTF } from '@tresjs/cientos'
import { ReinhardToneMapping, PCFShadowMap } from 'three';
const lamelles_count = useState<number>('lamelles_count')
@ -24,6 +25,10 @@ const pbrTexture = await useTexture({
normalMap: '/texture/Rock035_2K_NormalGL.jpg',
ambientOcclusion: '/texture/Rock035_2K_AmbientOcclusion.jpg',
})
const { scene: bottom } = await useGLTF('/models_one/verh_100.glb', { draco: true })
const { scene: verh } = await useGLTF('/models_one/bottom.glb', { draco: true })
const { scene: stolb } = await useGLTF('/models_one/stolb.glb', { draco: true })
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
</script>
<template>
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
@ -31,37 +36,35 @@ const pbrTexture = await useTexture({
<TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
<TresMeshStandardMaterial v-bind="pbrTexture" />
</TresMesh>
<ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
:remove-pos="true" :color="pillar_color" />
<ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
:remove-pos="true" :color="pillar_color" />
<ModelItem model-url="/models_one/verh_100.glb" :position="[-fence_section * 0.5, lamelles_count * lSize, 0]"
:remove-pos="true" :color="pillar_color" />
<ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
:remove-pos="true" :color="pillar_color" />
<ModelItem :model="bottom" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem :model="bottom" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem :model="verh" :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem :model="verh" :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
<ModelItem :model="stolb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
</template>
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
<ModelItem :model="stolb" :remove-pos="true" :color="pillar_color" />
</TresGroup>
</template>
<template v-for="(n, i) in lamelles_count">
<TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
<ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
<ModelItem :model="lamelle" :remove-pos="true" :color="lamelle_color" />
</TresGroup>
</template>
<TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
<ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
<ModelItem :model="verh" :remove-pos="true" :color="pillar_color" />
</TresGroup>
<ModelItem model-url="/models_one/bottom.glb"
:position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem model-url="/models_one/bottom.glb"
:position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
:color="pillar_color" />
<ModelItem :model="bottom" :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]"
:remove-pos="true" :color="pillar_color" />
<ModelItem :model="bottom" :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]"
:remove-pos="true" :color="pillar_color" />
</TresGroup>
</template>