add texture

components/calcModels.vue

@@ -15,7 +15,9 @@ const controlsState = reactive({
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[8, 2, -4]" />
             <OrbitControls v-bind="controlsState" make-default />
-            <ModelParametric />
+            <Suspense>
+                <ModelParametric />
+            </Suspense>
         </TresCanvas>
     </div>
 </template>

components/model/parametric.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useTexture } from '@tresjs/core'
 import { Environment } from '@tresjs/cientos'
 import { ReinhardToneMapping, PCFShadowMap } from 'three';
 
@@ -16,6 +17,14 @@ renderer.value.toneMapping = ReinhardToneMapping
 
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFShadowMap
+
+const pbrTexture = await useTexture({
+    map: '/texture/Rock035_2K_Displacement.jpg',
+    displacementMap: '/texture/Rock035_2K_Displacement.jpg',
+    roughnessMap: '/texture/Rock035_2K_Roughness.jpg',
+    normalMap: '/texture/Rock035_2K_NormalGL.jpg',
+    ambientOcclusion: '/texture/Rock035_2K_AmbientOcclusion.jpg',
+})
 </script>
 <template>
     <TresGroup>
@@ -26,6 +35,7 @@ renderer.value.shadowMap.type = PCFShadowMap
             <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
                 <TresMesh receive-shadow>
                     <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
+                    <TresMeshStandardMaterial v-bind="pbrTexture" />
                 </TresMesh>
                 <ModelItem model-url="/models_one/bottom.glb"
                     :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
@@ -59,8 +69,9 @@ renderer.value.shadowMap.type = PCFShadowMap
                 <ModelItem model-url="/models_one/bottom.glb"
                     :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
                     :color="pillar_color" />
-                <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]"
+                <ModelItem model-url="/models_one/bottom.glb"
-                    :remove-pos="true" :color="pillar_color" />
+                    :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
+                    :color="pillar_color" />
             </TresGroup>
         </Suspense>
     </TresGroup>