tone mapping

components/calcModels.vue

@@ -6,6 +6,7 @@ const controlsState = reactive({
     minDistance: 1,
     maxDistance: 10,
     enablePan: false,
+    enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
 </script>
@@ -15,9 +16,6 @@ const controlsState = reactive({
             <TresPerspectiveCamera :position="[8, 2, -4]" />
             <OrbitControls v-bind="controlsState" make-default />
             <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>
     </div>
 </template>

components/expDiagram.vue

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

components/model/diagram.vue

@@ -8,12 +8,12 @@ import Item from './item.vue';
     </TresMesh>
     <Suspense>
         <TresGroup :translate-y="-2">
-                <Item model-url="/models/kosynka.glb" :target="[0.5, 0.25, 0.5,]" />
-                <Item model-url="/models/kreplaniye_planok.glb" :target="[1, 0.5, 1]" />
-                <Item model-url="/models/planki.glb" :target="[1.5, 1, 1.5,]" />
-                <Item model-url="/models/stolb.glb" :target="[-0.5, 0.25, -0.5,]" />
-                <Item model-url="/models/verh.glb" :target="[-1, 0.5, -1,]" />
-                <Item model-url="/models/zakliopki.glb" :target="[-1.5, 1, -1.5,]" />
+            <Item model-url="/models/kosynka.glb" :target="[0.5, 0.25, 0.5,]" />
+            <Item model-url="/models/kreplaniye_planok.glb" :target="[1, 0.5, 1]" />
+            <Item model-url="/models/planki.glb" :target="[1.5, 1, 1.5,]" />
+            <Item model-url="/models/stolb.glb" :target="[-0.5, 0.25, -0.5,]" />
+            <Item model-url="/models/verh.glb" :target="[-1, 0.5, -1,]" />
+            <Item model-url="/models/zakliopki.glb" :target="[-1.5, 1, -1.5,]" />
         </TresGroup>
     </Suspense>
 </template>

components/model/item.vue

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

components/model/parametric.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Environment } from '@tresjs/cientos'
+import { NeutralToneMapping } from 'three';
 
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
@@ -9,14 +10,17 @@ const lamelle_color = useState('lamelle_color')
 const lSize = 0.115
 const bSize = 0.0235
 const pillar_size = 80 * 0.001
+
+const {renderer} = useTresContext()
+renderer.value.toneMapping = NeutralToneMapping
 </script>
 <template>
     <TresGroup>
         <Suspense>
-            <Environment files='\hdrmaps\skukuza_golf_4k.hdr' :background="true" />
+            <Environment files='/hdrmaps/skukuza_golf_4k.hdr' :background="true" />
         </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"
                     :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
                     :color="pillar_color" />