numbers

components/calcValues.vue

@@ -20,7 +20,7 @@ const parametric = {
     total_length: {
         min: 1,
         max: undefined,
-        step: 0.1,
+        step: 0.01,
     },
     height: {
         min: 675,

components/model/fence.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { getColorHexFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
+import { CanvasTexture, DoubleSide, RepeatWrapping, UVMapping } from 'three';
 
 const props = defineProps(['index', 'models'])
 
@@ -40,6 +41,29 @@ const translate_to_section = ref(make_translate_to_section())
 watch(fence_section, () => {
     translate_to_section.value = make_translate_to_section()
 })
+const s = 512
+const canvas = document.createElement('canvas')
+canvas.width = s
+canvas.height = s
+const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+ctx.fillStyle = "red"
+ctx.font = "512px serif"
+ctx.textAlign = "center"
+ctx.textBaseline = 'middle'
+ctx.fillText(props.index, s * 0.5, s * 0.5)
+const textures = []
+for (let index = 0; index < lamelles_count.value; index++) {
+    const element = document.createElement('canvas')
+    element.width = s
+    element.height = s / lamelles_count.value
+    const e_ctx = element.getContext('2d') as CanvasRenderingContext2D
+    e_ctx.drawImage(canvas,
+        0, (s / lamelles_count.value) * index, s, s / lamelles_count.value,
+        0, 0, s, s / lamelles_count.value
+    );
+    // console.log(element.toDataURL())
+    textures.push(new CanvasTexture(element))
+}
 </script>
 <template>
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
@@ -76,7 +100,8 @@ watch(fence_section, () => {
         <TresGroup name="lamelles">
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position="[pillar_size * 0.5, (lSize * i), 0.02]" :scale-x="fence_section * 10">
-                    <ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)" />
+                    <ModelItem :model="props.models.lamelle" :color="getColorHexFromRal(lamelle_color)"
+                        :map="textures[textures.length - 1 - i]" />
                 </TresGroup>
             </template>
         </TresGroup>

components/model/item.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
-import { Box3, Color, FrontSide, MeshStandardMaterial, Vector3 } from 'three';
+import { Box3, Color, DoubleSide, MeshStandardMaterial, Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color'])
+const props = defineProps(['modelUrl', 'model', 'position', 'refPosition', 'removePos', 'target', 'color', 'map'])
 
 let scene
 if (props.modelUrl) {
@@ -21,7 +21,7 @@ box.getSize(size)
 
 const getMaterial = () => {
     return new MeshStandardMaterial({
-        color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
+        color: new Color(props.color || '#9c9c9c'),
         roughness: 0.2,
         metalness: 0.5,
     })
@@ -102,6 +102,10 @@ watch(targetExplosion, () => {
         <TresGroup :position="props.refPosition ? targetExplosion[props.refPosition] : (props.position || [0, 0, 0])"
             ref="model">
             <primitive :object="scene.children[0]" />
+            <TresMesh v-if="props.map" :cast-shadow="false" :receive-shadow="false">
+                <TresPlaneGeometry :args="[size.x, size.y]" />
+                <TresMeshPhongMaterial :map="props.map" :transparent="true" :opacity="0.5" :side="DoubleSide" />
+            </TresMesh>
         </TresGroup>
     </Suspense>
 </template>

components/model/parametric.vue

@@ -3,11 +3,12 @@ import {
     ReinhardToneMapping, PCFSoftShadowMap, RepeatWrapping,
     Color, DataTexture,
     PMREMGenerator, Euler,
-    FrontSide
+    FrontSide,
+    CanvasTexture
 } from 'three';
 import { EXRLoader } from 'three/examples/jsm/Addons.js';
 import { useTexture } from '@tresjs/core'
-import { useGLTF, vLightHelper } from '@tresjs/cientos'
+import { useGLTF, } from '@tresjs/cientos'
 const section_count = useState('section_count')
 
 const { scene, renderer, camera } = useTresContext()
@@ -77,34 +78,6 @@ watch(section_count, () => {
     }
 })
 
-const width = 512;
-const height = 512;
-const size = width * height;
-const data = new Uint8Array(4 * size);
-const color = new Color(0xffffff);
-const r = Math.floor(color.r * 25);
-const g = Math.floor(color.g * 25);
-const b = Math.floor(color.b * 255);
-for (let i = 0; i < size; i++) {
-    const stride = i * 4;
-    data[stride] = r;
-    data[stride + 1] = g;
-    data[stride + 2] = b;
-    data[stride + 3] = 255;
-}
-const texture_one = new DataTexture(data, width, height);
-texture_one.needsUpdate = true;
-
-const canvas = document.createElement('canvas')
-canvas.width = 512
-canvas.height = 512
-const ctx = canvas.getContext('2d')
-ctx.fillStyle = "red"
-ctx.fillRect(10, 10, 512, 512)
-// console.log(canvas.toDataURL())
-const texture = new DataTexture(ctx?.getImageData(0, 0, 512, 512).data.buffer, width, height);
-texture.needsUpdate = true;
-
 const pmremGenerator = new PMREMGenerator(renderer.value);
 pmremGenerator.compileEquirectangularShader();
 onMounted(() => {
@@ -132,21 +105,9 @@ pointLight.shadow.bias = -0.001
             <TresCircleGeometry :args="[100, 32]" :rotate-x="-Math.PI * 0.5" />
             <TresMeshStandardMaterial v-bind="groundMaterial" />
         </TresMesh>
-        <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" 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" v-if="false">
-            <TresCircleGeometry :args="[5]" :rotate-x="-Math.PI * 0.5" />
-            <TresMeshStandardMaterial :map="texture" />
-        </TresMesh>
         <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" />
+            <TresMeshStandardMaterial />
         </TresMesh>
 
         <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"