shadows and light

components/calcModels.vue

@@ -16,40 +16,12 @@ const cameraStat = reactive({
     aspect: 1920 / 600,
     fov: 40,
 })
+
 onMounted(() => {
     cameraStat.aspect = window.innerWidth / 600
 })
-const spot = reactive({
-    x: 10, y: 10, z: 10, intensity: 10, distance: 10, color: 'red'
-})
-const directional = reactive({
-    x: 20, y: 10, z: 10, intensity: 10, distance: 10, color: 'green'
-})
-const point = reactive({
-    x: 30, y: 10, z: 10, intensity: 10, distance: 10, color: 'blue'
-})
 </script>
 <template>
-    <div class="container min-w-full relative" v-if="false">
-        <div>
-            <h2>spot</h2>
-            <template v-for="(label, key) in spot">
-                <label :for="key">{{ key }}</label>
-                <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="spot[key]" style="width: 100px" />
-            </template>
-            <h2>directional</h2>
-            <template v-for="(label, key) in directional">
-                <label :for="key">{{ key }}</label>
-                <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="directional[key]"
-                    style="width: 100px" />
-            </template>
-            <h2>point</h2>
-            <template v-for="(label, key) in point">
-                <label :for="key">{{ key }}</label>
-                <input :id="key" :type="key == 'color' ? 'text' : 'number'" v-model="point[key]" style="width: 100px" />
-            </template>
-        </div>
-    </div>
     <div class="container min-w-full relative">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <Loader />
@@ -62,13 +34,6 @@ const point = reactive({
                 <Suspense>
                     <ModelParametric />
                 </Suspense>
-                <template v-if="false">
-                    <TresSpotLight v-bind="spot" :position="[spot.x, spot.y, spot.z]" cast-shadow v-light-helper />
-                    <TresDirectionalLight v-bind="directional" :position="[directional.x, directional.y, directional.z]"
-                        cast-shadow v-light-helper />
-                    <TresPointLight v-bind="point" :position="[point.x, point.y, point.z]" cast-shadow v-light-helper />
-                    <TresAmbientLight />
-                </template>
             </TresCanvas>
         </ClientOnly>
     </div>

components/calcValues.vue

@@ -2,14 +2,14 @@
 import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
 
-const lamelles_count = useState('lamelles_count', () => 8)
+const lamelles_count = useState('lamelles_count', () => 14)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
 const remove_pillar = useState<boolean>('remove_pillar', () => false)
 const pillar_color = useState<ralTypes>('pillar_color', () => '3009')
 const lamelle_color = useState<ralTypes>('lamelle_color', () => '3004')
-const section_count = useState('section_count', () => 1)
+const section_count = useState('section_count', () => 10)
 const extra_section = useState('extra_section', () => 0)
-const total_length = useState('total_length', () => 2000 * 0.001 * 2)
+const total_length = useState('total_length', () => (2000 * 8 - 100) * 0.001)
 
 const parametric = {
     length: {
@@ -32,9 +32,9 @@ const form_state = reactive({
     length: fence_section.value * 1000,
     fence_length: 100,
     height: 100 + lamelles_count.value * parametric.height.step,
-    total_length: fence_section.value * 2,
+    total_length: total_length.value,
     total_length_mm: fence_section.value * 1000,
-    full_sections: 1,
+    full_sections: section_count.value,
     extra_section: 0,
     auto_length: false,
     remove_pillar: false

components/model/fence.vue

@@ -43,7 +43,8 @@ watch(fence_section, () => {
 </script>
 <template>
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
-        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
+        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
+            :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
                 <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>
@@ -57,7 +58,8 @@ watch(fence_section, () => {
             </TresGroup>
         </TresGroup>
 
-        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
+        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos"
+            :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
                 <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>

components/model/item.vue

@@ -22,7 +22,7 @@ box.getSize(size)
 const getMaterial = () => {
     return new MeshStandardMaterial({
         color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
-        roughness: 0.3,
+        roughness: 0.2,
         metalness: 0.5,
     })
 }
@@ -31,7 +31,7 @@ function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
         if (el.isMesh) {
             el.castShadow = true
-            el.receiveShadow = true
+            // el.receiveShadow = true
         }
         if (props.removePos) {
             el.translateX(-el.position.x)

components/model/parametric.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { ReinhardToneMapping, PCFShadowMap, RepeatWrapping, Color, DataTexture, RGBAFormat } from 'three';
+import {
+    ReinhardToneMapping, PCFShadowMap, RepeatWrapping,
+    Color, DataTexture,
+    PMREMGenerator, Euler,
+    FrontSide
+} from 'three';
+import { EXRLoader } from 'three/examples/jsm/Addons.js';
 import { useTexture } from '@tresjs/core'
-import { useGLTF } from '@tresjs/cientos'
+import { useGLTF, vLightHelper } from '@tresjs/cientos'
 const section_count = useState('section_count')
 
 const { scene, renderer, camera } = useTresContext()
@@ -10,17 +16,33 @@ renderer.value.toneMapping = ReinhardToneMapping
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFShadowMap
 
+// const pbrTexture = await useTexture({
+//     map: '/texture/Grass01_MR_2K/Grass01_2K_BaseColor.png ',
+//     displacementMap: '/texture/Grass01_MR_2K/Grass01_2K_Height.png ',
+//     roughnessMap: '/texture/Grass01_MR_2K/Grass01_2K_Roughness.png',
+//     normalMap: '/texture/Grass01_MR_2K/Grass01_2K_Normal.png ',
+//     aoMap: '/texture/Grass01_MR_2K/Grass01_2K_AO.png ',
+//     // metalnessMap: '/texture/Ground039_4K-JPG_Color.jpg',
+//     // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
+//     // alphaMap: '/textures/myAlphaMapTexture.jpg'
+// })
 const pbrTexture = await useTexture({
-    map: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_Color.jpg',
+    map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
-    // displacementMap: '/texture/Ground039_4K-JPG_Displacement.jpg',
+    displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
-    roughnessMap: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_Roughness.jpg',
+    roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
-    normalMap: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_NormalGL.jpg',
+    normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
-    aoMap: '/texture/Grass001_4K-JPG/Grass001_4K-JPG_AmbientOcclusion.jpg',
+    aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
-    // metalnessMap: '/texture/Ground039_4K-JPG_Color.jpg',
-    // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
-    // alphaMap: '/textures/myAlphaMapTexture.jpg'
 })
-const repeat = 5
+const groundMaterial = {
+    map: pbrTexture.map,
+    displacementMap: pbrTexture.displacementMap,
+    normalMap: pbrTexture.normalMap,
+    color: "#555",
+    roughness: 1,
+    metalness: 0,
+    side: FrontSide
+}
+const repeat = 10
 for (const key in pbrTexture) {
     if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
         const key_p = key as keyof typeof pbrTexture
@@ -30,7 +52,7 @@ for (const key in pbrTexture) {
             element.wrapT = RepeatWrapping
             element.repeat.x = repeat
             element.repeat.y = repeat
-            element.flipY = false
+            // element.flipY = false
         }
     }
 }
@@ -79,39 +101,61 @@ canvas.height = 512
 const ctx = canvas.getContext('2d')
 ctx.fillStyle = "red"
 ctx.fillRect(10, 10, 512, 512)
-console.log(canvas.toDataURL())
+// console.log(canvas.toDataURL())
 const texture = new DataTexture(ctx?.getImageData(0, 0, 512, 512).data.buffer, width, height);
 texture.needsUpdate = true;
-console.log(light)
+
+const pmremGenerator = new PMREMGenerator(renderer.value);
+pmremGenerator.compileEquirectangularShader();
+onMounted(() => {
+    new EXRLoader()
+        .load('/hdrmaps/kloppenheim_06_4k.exr', function (texture) {
+            const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
+            const exrBackground = exrCubeRenderTarget.texture;
+            const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+
+            scene.value.environment = newEnvMap
+            scene.value.background = exrBackground
+            scene.value.backgroundRotation = new Euler(0, 5, 0)
+            texture.dispose();
+        });
+})
+
+const pointLight = light.children[2]
+pointLight.shadow.camera.near = 50
 </script>
 <template>
     <TresGroup :translate-y="-3.25" name="base">
-        <TresMesh receive-shadow :position-y="-0.5" name="ground">
+        <TresMesh receive-shadow :position-y="-0.15" name="ground">
-            <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
+            <TresCircleGeometry :args="[100, 32]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial :map="pbrTexture.map" :normal-map="pbrTexture.normalMap"
+            <TresMeshStandardMaterial v-bind="groundMaterial" />
-                :roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0.8" />
         </TresMesh>
-        <TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground">
+        <TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground" v-if="false">
             <TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" />
             <TresMeshStandardMaterial color="#eee" />
         </TresMesh>
-        <TresMesh receive-shadow name="ground_test" :position-z="-10">
+        <TresMesh receive-shadow name="ground_test" :position-z="-10" v-if="false">
             <TresCircleGeometry :args="[5]" :rotate-x="-Math.PI * 0.5" />
             <TresMeshStandardMaterial :map="texture_one" />
         </TresMesh>
-        <TresMesh receive-shadow name="ground_test" :position-z="10">
+        <TresMesh receive-shadow name="ground_test" :position-z="10" v-if="false">
             <TresCircleGeometry :args="[5]" :rotate-x="-Math.PI * 0.5" />
             <TresMeshStandardMaterial :map="texture" />
         </TresMesh>
-        <TresMesh :position="[-9, 0, 2]" cast-shadow receive-shadow>
+        <TresMesh :position="Object.values(pointLight.position).map((el: any) => el * 2.5)" cast-shadow receive-shadow>
             <TresBoxGeometry :args="[1, 1, 1]" />
             <TresMeshStandardMaterial :map="texture_one" />
         </TresMesh>
-        <TresPointLight v-bind="light.children[2]" :intensity="50"  cast-shadow color="rgb(191,231,255)" />
+
+        <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.25"
+            :position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
+        <TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
+        <template v-if="false">
             <template v-for="i in light.children[1].children">
-            <TresDirectionalLight :position="i.position" color="rgb(191,231,255)" cast-shadow />
+                <TresDirectionalLight :position="i.position" :intensity="5" color="rgb(191,231,255)" cast-shadow />
             </template>
-        <TresAmbientLight />
+        </template>
+
         <template v-for="i in section_count">
             <template v-if="i <= 20">
                 <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />

public/texture/Grass004_2K-PNG/Grass004_2K-PNG.mtlx

@@ -0,0 +1,42 @@
+<?xml version="1.0"?>
+<materialx version="1.38" fileprefix="./">
+  <standard_surface ypos="-1.879310" name="Grass004_2K_PNG_StandardSurface" type="surfaceshader" xpos="6.159420">
+    <input name="specular" type="float" value="0" />
+    <input name="coat" type="float" value="1" />
+    <input name="coat_color" type="color3" value="1, 1, 1" />
+    <input name="base" type="float" value="1" />
+    <input name="base_color" type="color3" nodename="Grass004_2K_PNG_Color" />
+    <input name="normal" type="vector3" nodename="normalmap" />
+    <input name="coat_normal" type="vector3" nodename="normalmap" />
+    <input name="specular_roughness" type="float" nodename="Grass004_2K_PNG_Roughness" />
+    <input name="coat_roughness" type="float" nodename="Grass004_2K_PNG_Roughness" />
+  </standard_surface>
+  <surfacematerial ypos="0.000000" name="Grass004_2K_PNG" type="material" xpos="8.695652">
+    <input name="surfaceshader" type="surfaceshader" nodename="Grass004_2K_PNG_StandardSurface" />
+    <input name="displacementshader" type="displacementshader" nodename="displacement" />
+  </surfacematerial>
+  <tiledimage ypos="-3.103448" name="Grass004_2K_PNG_Color" type="color3" xpos="3.623188">
+    <input colorspace="srgb_texture" name="file" type="filename" value="Grass004_2K-PNG_Color.png" />
+    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
+  </tiledimage>
+  <tiledimage ypos="5.163793" name="Grass004_2K_PNG_Displacement" type="float" xpos="3.623188">
+    <input name="file" type="filename" value="Grass004_2K-PNG_Displacement.png" />
+    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
+  </tiledimage>
+  <displacement ypos="1.879310" name="displacement" type="displacementshader" xpos="6.159420">
+    <input name="displacement" type="float" nodename="Grass004_2K_PNG_Displacement" />
+    <input name="scale" type="float" value="1.0" />
+  </displacement>
+  <tiledimage ypos="0.879310" name="Grass004_2K_PNG_NormalGL" type="vector3" xpos="1.086957">
+    <input name="file" type="filename" value="Grass004_2K-PNG_NormalGL.png" />
+    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
+  </tiledimage>
+  <normalmap ypos="3.586207" name="normalmap" type="vector3" xpos="3.623188">
+    <input name="in" type="vector3" nodename="Grass004_2K_PNG_NormalGL" />
+    <input name="scale" type="float" value="1.0" />
+  </normalmap>
+  <tiledimage ypos="-0.413793" name="Grass004_2K_PNG_Roughness" type="float" xpos="3.623188">
+    <input name="file" type="filename" value="Grass004_2K-PNG_Roughness.png" />
+    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
+  </tiledimage>
+</materialx>