styles

components/expDiagram.vue

@@ -23,19 +23,20 @@ const scrollBlock = (e: Event) => {
     }
 }
 const targetExplosion = useState('targetExplosion', () => {
+    const k = 3
     return {
-        kosynka: [1, 1, 1],
-        krepleniye_planok: [0, 0, 0],
-        osnova_stolba: [0, 0, 0],
-        planki: [0, 0, 0],
-        stolb: [0, 0, 0],
-        verh: [0, 0, 0],
+        kosynka: [0 * k, 0 * k, 0.75 * k],
+        krepleniye_planok: [0 * k, 0 * k, 0.5 * k],
+        osnova_stolba: [0 * k, 0 * k, 0 * k],
+        planki: [0 * k, 0 * k, -0.5 * k],
+        stolb: [0 * k, 0 * k, 1 * k],
+        verh: [0 * k, 0.25 * k, 0 * k],
     }
 })
 </script>
 <template>
     <div class="container min-w-full" ref="container">
-        <template v-for="(value, key) in targetExplosion">
+        <template v-for="(value, key) in targetExplosion" v-if="false">
             <div>
                 <label for="key">{{ key }}</label>
                 <input type="number" v-for="(item, n) in value" v-model="targetExplosion[key][n]" step="0.25">
@@ -45,7 +46,7 @@ const targetExplosion = useState('targetExplosion', () => {
             <TresPerspectiveCamera :position="[-7, 2, 4]" />
             <OrbitControls v-bind="controlsState" make-default />
             <Suspense>
-                <!-- <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" /> -->
+                <Environment files='/hdrmaps/kiara_1_dawn_4k.hdr' :background="true" />
             </Suspense>
             <ModelDiagram />
 

components/model/parametric.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping } from 'three';
 import { useTexture } from '@tresjs/core'
 import { useGLTF } from '@tresjs/cientos'
-import { ReinhardToneMapping, PCFShadowMap } from 'three';
 
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
@@ -33,6 +33,18 @@ const pbrTexture = await useTexture({
     // matcap: '/textures/myMatcapTexture.jpg',
     // alphaMap: '/textures/myAlphaMapTexture.jpg'
 })
+const repeat = 5
+for (const key in pbrTexture) {
+    if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
+        const element = pbrTexture[key];
+        if (element && element.wrapS) {
+            element.wrapS = RepeatWrapping
+            element.wrapT = RepeatWrapping
+            element.repeat.x = repeat
+            element.repeat.y = repeat
+        }
+    }
+}
 const { scene: top } = await useGLTF('/models_one/verh_100.glb')
 const { scene: fence } = await useGLTF('/models_one/fence.glb')
 const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
@@ -50,7 +62,7 @@ watch(fence_section, () => {
     <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
         <TresMesh receive-shadow :translate-y="-0.5">
             <TresCircleGeometry :args="[8, 32]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial v-bind="pbrTexture" />
+            <TresMeshStandardMaterial v-bind="pbrTexture" color="black" metalness="0" roughness="0.5" />
         </TresMesh>
 
         <TresGroup :position="[pillar_one_pos, (lSize * -0.5), 0]" :scale="[1, 0.5, 1]">