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

parametric loader

This commit is contained in:
Kseninia Mikhaylova 2024-06-10 10:56:44 +03:00
parent 967478b522
commit 7f378d63ee
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/calcModels.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { TresCanvas } from '@tresjs/core' import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos' import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'
const controlsState = reactive({ const controlsState = reactive({
minDistance: 1, minDistance: 1,
@ -9,12 +9,23 @@ const controlsState = reactive({
enableZoom: false, enableZoom: false,
maxPolarAngle: (Math.PI / 2) - 0.2, maxPolarAngle: (Math.PI / 2) - 0.2,
}) })
const { hasFinishLoading, progress, items } = await useProgress()
</script> </script>
<template> <template>
<div class="container min-w-full"> <div class="container min-w-full relative">
<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">
Loading... {{ progress }} %
<i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
</div>
</div>
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[8, 2, -4]" /> <TresPerspectiveCamera :position="[8, 2, -4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Suspense>
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
</Suspense>
<Suspense> <Suspense>
<ModelParametric /> <ModelParametric />
</Suspense> </Suspense>

6
components/model/parametric.vue
View File

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useTexture } from '@tresjs/core' import { useTexture } from '@tresjs/core'
import { Environment } from '@tresjs/cientos'
import { ReinhardToneMapping, PCFShadowMap } from 'three'; import { ReinhardToneMapping, PCFShadowMap } from 'three';
const lamelles_count = useState<number>('lamelles_count') const lamelles_count = useState<number>('lamelles_count')
@ -28,13 +27,10 @@ const pbrTexture = await useTexture({
</script> </script>
<template> <template>
<TresGroup> <TresGroup>
<Suspense>
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
</Suspense>
<Suspense> <Suspense>
<TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25"> <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
<TresMesh receive-shadow cast-shadow :translate-y="-0.25"> <TresMesh receive-shadow cast-shadow :translate-y="-0.25">
<TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" /> <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
<TresMeshStandardMaterial v-bind="pbrTexture" /> <TresMeshStandardMaterial v-bind="pbrTexture" />
</TresMesh> </TresMesh>
<ModelItem model-url="/models_one/bottom.glb" <ModelItem model-url="/models_one/bottom.glb"