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

tone mapping

This commit is contained in:
Kseninia Mikhaylova 2024-06-07 12:15:19 +03:00
parent 9eea613c93
commit 3e1ab89e55
5 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/calcModels.vue
View File

@ -6,6 +6,7 @@ const controlsState = reactive({
minDistance: 1, minDistance: 1,
maxDistance: 10, maxDistance: 10,
enablePan: false, enablePan: false,
enableZoom: false,
maxPolarAngle: (Math.PI / 2) - 0.2, maxPolarAngle: (Math.PI / 2) - 0.2,
}) })
</script> </script>
@ -15,9 +16,6 @@ const controlsState = reactive({
<TresPerspectiveCamera :position="[8, 2, -4]" /> <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="#f6f6f6" :intensity="10" cast-shadow />
<TresAmbientLight :intensity="20" />
</TresCanvas> </TresCanvas>
</div> </div>
</template> </template>

2
components/expDiagram.vue
View File

@ -21,7 +21,7 @@ const controlsState = reactive({
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow /> <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow /> <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
<TresAmbientLight v-bind="backLight" /> <TresAmbientLight />
</TresCanvas> </TresCanvas>
</div> </div>
</template> </template>

4
components/model/item.vue
View File

@ -16,8 +16,8 @@ box.getSize(size)
const getMaterial = () => { const getMaterial = () => {
return new MeshStandardMaterial({ return new MeshStandardMaterial({
color: props.color ? new Color(props.color) : new Color('#9c9c9c'), color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
roughness: 0, roughness: 0.5,
metalness: 1 metalness: 0.5,
}) })
} }
const material = getMaterial() const material = getMaterial()

8
components/model/parametric.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { Environment } from '@tresjs/cientos' import { Environment } from '@tresjs/cientos'
import { NeutralToneMapping } from 'three';
const lamelles_count = useState<number>('lamelles_count') const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section') const fence_section = useState<number>('fence_section')
@ -9,14 +10,17 @@ 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 {renderer} = useTresContext()
renderer.value.toneMapping = NeutralToneMapping
</script> </script>
<template> <template>
<TresGroup> <TresGroup>
<Suspense> <Suspense>
<Environment files='\hdrmaps\skukuza_golf_4k.hdr' :background="true" /> <Environment files='/hdrmaps/skukuza_golf_4k.hdr' :background="true" />
</Suspense> </Suspense>
<Suspense> <Suspense>
<TresGroup :scale="2" :rotate-y="-Math.PI * -0.5" :translate-y="-1.5"> <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3">
<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" />