add parametric fence
This commit is contained in:
parent
3a7b25f5ee
commit
131aec5bfd
|
@ -1,20 +1,13 @@
|
|||
<script setup lang="ts">
|
||||
import { TresCanvas } from '@tresjs/core'
|
||||
import { OrbitControls, vLightHelper } from '@tresjs/cientos'
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
|
||||
const controlsState = reactive({
|
||||
minDistance: 1,
|
||||
maxDistance: 5,
|
||||
enablePan: false,
|
||||
// enableZoom: false,
|
||||
maxPolarAngle: (Math.PI / 2) - 0.2,
|
||||
})
|
||||
// console.log(controlsState)
|
||||
// const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
|
||||
// const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
|
||||
// const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
|
||||
// console.log({ backLight, primaryLight, secondaryLight })
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="container min-w-full">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { TresCanvas } from '@tresjs/core'
|
||||
import { OrbitControls, vLightHelper } from '@tresjs/cientos'
|
||||
import { OrbitControls } from '@tresjs/cientos'
|
||||
|
||||
const controlsState = reactive({
|
||||
minDistance: 1,
|
||||
|
@ -16,10 +16,8 @@ const controlsState = reactive({
|
|||
<TresCanvas shadows>
|
||||
<TresPerspectiveCamera :position="[-7, 2, 1]" />
|
||||
<OrbitControls v-bind="controlsState" make-default />
|
||||
|
||||
<ModelDiagram />
|
||||
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
|
||||
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
|
||||
<TresAmbientLight />
|
||||
</TresCanvas>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { Environment } from '@tresjs/cientos'
|
||||
|
||||
const lamelles_count = useState<number>('lamelles_count')
|
||||
const fence_section = useState<number>('fence_section')
|
||||
const pillar_color = useState('pillar_color')
|
||||
|
@ -18,35 +20,42 @@ watch([lamelles_count, fence_section, lamelle_color], () => {
|
|||
})
|
||||
</script>
|
||||
<template>
|
||||
<Suspense>
|
||||
<TresGroup>
|
||||
<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" />
|
||||
<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" />
|
||||
<TresGroup>
|
||||
<Suspense>
|
||||
<Environment files='/hdrmaps/lonely_road_afternoon_4k.hdr' :background="true" />
|
||||
</Suspense>
|
||||
<Suspense>
|
||||
<TresGroup>
|
||||
<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" />
|
||||
<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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</TresGroup>
|
||||
</TresGroup>
|
||||
</Suspense>
|
||||
</Suspense>
|
||||
</TresGroup>
|
||||
</template>
|
Binary file not shown.
Loading…
Reference in New Issue