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

fence position

This commit is contained in:
Kseninia Mikhaylova 2024-06-07 10:59:41 +03:00
parent 131aec5bfd
commit 60ed5e4e77
4 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.vue
View File

@ -91,7 +91,7 @@ const toggleModal = () => {
:style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]"> :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
<NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" /> <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
</div> </div>
<div class="siteblock bg-white"> <div class="siteblock siteblock_calc bg-white">
<CalcValues /> <CalcValues />
<CalcModels /> <CalcModels />
</div> </div>

3
assets/main.scss
View File

@ -66,6 +66,9 @@ a[href^="#"] {
max-height: 50vh; max-height: 50vh;
} }
} }
&_calc {
@apply pb-0;
}
&-content { &-content {
@apply col-span-6 h-full flex flex-col justify-between prose; @apply col-span-6 h-full flex flex-col justify-between prose;

4
components/calcModels.vue
View File

@ -4,7 +4,7 @@ import { OrbitControls } from '@tresjs/cientos'
const controlsState = reactive({ const controlsState = reactive({
minDistance: 1, minDistance: 1,
maxDistance: 5, maxDistance: 10,
enablePan: false, enablePan: false,
maxPolarAngle: (Math.PI / 2) - 0.2, maxPolarAngle: (Math.PI / 2) - 0.2,
}) })
@ -12,7 +12,7 @@ const controlsState = reactive({
<template> <template>
<div class="container min-w-full"> <div class="container min-w-full">
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[7, 2, 6]" /> <TresPerspectiveCamera :position="[8, 2, -4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<ModelParametric /> <ModelParametric />
<TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="10" cast-shadow /> <TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="10" cast-shadow />

11
components/model/parametric.vue
View File

@ -9,15 +9,6 @@ const lamelle_color = useState('lamelle_color')
const lSize = 0.115 const lSize = 0.115
const bSize = 0.0235 const bSize = 0.0235
const pillar_size = 80 * 0.001 const pillar_size = 80 * 0.001
const { scene, renderer, camera } = useTresContext()
renderer.value.autoClear = true
watch([lamelles_count, fence_section, lamelle_color], () => {
// renderer.value.clearColor()
// renderer.value.render(scene.value, camera.value)
})
</script> </script>
<template> <template>
<TresGroup> <TresGroup>
@ -25,7 +16,7 @@ watch([lamelles_count, fence_section, lamelle_color], () => {
<Environment files='/hdrmaps/lonely_road_afternoon_4k.hdr' :background="true" /> <Environment files='/hdrmaps/lonely_road_afternoon_4k.hdr' :background="true" />
</Suspense> </Suspense>
<Suspense> <Suspense>
<TresGroup> <TresGroup :scale="2" :rotate-y="-Math.PI * -0.5" :translate-y="-1.5">
<ModelItem model-url="/models_one/bottom.glb" <ModelItem model-url="/models_one/bottom.glb"
:position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
:color="pillar_color" /> :color="pillar_color" />