styles

assets/main.scss

@@ -48,7 +48,7 @@ a[href^="#"] {
     }
 
     &-text {
-        @apply col-span-12 xl:col-span-5 text-sm prose whitespace-break-spaces;
+        @apply col-span-12 xl:col-span-5 text-sm prose;
 
         &-small {
             @apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
@@ -76,11 +76,11 @@ a[href^="#"] {
     }
 
     &-content {
-        @apply col-span-full xl:col-span-6 h-full flex flex-col justify-between min-w-full prose;
+        @apply col-span-full xl:col-span-8 h-full flex flex-col justify-between min-w-full prose;
     }
 
     &-text {
-        @apply whitespace-break-spaces;
+        // @apply 
     }
 
     &-title {
@@ -88,7 +88,7 @@ a[href^="#"] {
     }
 
     &-image {
-        @apply col-span-full xl:col-span-6 flex justify-center items-center;
+        @apply col-span-full xl:col-span-4 flex justify-center items-center;
         min-height: 50vh;
     }
 }

components/expDiagram.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { OrbitControls, Environment } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
     maxDistance: 10,
     enablePan: false,
-    enableZoom: false,
+    // enableZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.2,
 })
 const container = ref()
@@ -22,23 +22,19 @@ const scrollBlock = (e: Event) => {
         koef.value = visibleHeight / h
     }
 }
-onMounted(() => {
-    document.addEventListener('scroll', scrollBlock)
-})
-onUnmounted(() => {
-    document.removeEventListener('scroll', scrollBlock)
-})
 </script>
 <template>
     <div class="container min-w-full" ref="container">
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[-7, 2, 4]" />
             <OrbitControls v-bind="controlsState" make-default />
+            <Suspense>
+                <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
+            </Suspense>
+            <ModelDiagram />
 
-            <ModelDiagram :koef="koef" />
-
-            <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="2" color="#f2f2f2" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>

components/model/item.vue

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