Merge pull request 'bx-1480-constructor' (#64) from bx-1480-constructor into dev

Reviewed-on: #64

components/calcModels.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { FrontSide, RepeatWrapping } from 'three';
-import { TresCanvas, useTexture } from '@tresjs/core'
-import { OrbitControls, useGLTF } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+//@ts-ignore
+import { useGLTF } from '@tresjs/cientos'
 
 const fence_section = use_fence_section()
 const section_count = use_section_count()

components/model/diagram.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+//@ts-ignore
 import { useGLTF } from '@tresjs/cientos'
 import { getColorHexFromRal } from '../ral';
 

components/model/fence.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BufferGeometry, Matrix4, Vector3 } from 'three';
+import { BufferGeometry, Matrix4, Vector2, Vector3 } from 'three';
 
 const props = defineProps(['index', 'models'])
 
@@ -91,37 +91,27 @@ watch([section_count, fence_section, extra_section], () => {
 </script>
 <template>
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="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]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos">
+            <TresObject3D v-bind="props.models.fence_top.children[0]" :position-y="(lSize * -0.5)" />
             <TresObject3D v-bind="props.models.fence.children[0]" :scale-y="lamelles_count" />
-            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+            <TresObject3D v-bind="props.models.fence_inner.children[0]" :scale-y="lamelles_count" />
+            <TresObject3D v-bind="props.models.fence_bottom.children[0]" :position-y="(lSize * lamelles_count)" />
         </TresGroup>
 
-        <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]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos">
+            <TresObject3D v-bind="props.models.fence_top.children[0]" :position-y="(lSize * -0.5)" />
             <TresObject3D v-bind="props.models.fence.children[0]" :scale="[-1, lamelles_count, 1]" />
-            <TresGroup :position-y="(lSize * lamelles_count)" :scale="[-1, 0.5, 1]">
-                <TresObject3D v-bind="props.models.fence.children[0]" />
-            </TresGroup>
+            <TresObject3D v-bind="props.models.fence_inner.children[0]" :scale="[-1, lamelles_count, 1]" />
+            <TresObject3D v-bind="props.models.fence_bottom.children[0]" :position-y="(lSize * lamelles_count)" />
         </TresGroup>
 
         <TresGroup name="lamelles">
             <TresInstancedMesh ref="instanced_lamelle" :args="instanced_v" cast-shadow />
         </TresGroup>
-        <TresGroup name="lam_fastening_one" :position-x="pillar_one_pos" :scale-y="lamelles_count">
-            <TresObject3D v-bind="props.models.fastening.children[0]" />
-        </TresGroup>
-        <TresGroup name="lam_fastening_two" :position-x="pillar_two_pos" :scale="[-1, lamelles_count, 1]">
-            <TresObject3D v-bind="props.models.fastening.children[0]" />
-        </TresGroup>
+        <TresObject3D name="lam_fastening_one" v-bind="props.models.fastening.children[0]" :position-x="pillar_one_pos"
+            :scale-y="lamelles_count" />
+        <TresObject3D name="lam_fastening_two" v-bind="props.models.fastening.children[0]" :position-x="pillar_two_pos"
+            :scale="[-1, lamelles_count, 1]" />
         <TresGroup name="top_section" :scale-x="((extra as number) || fence_section) * 10 + 0.1 * scale_koef"
             :position="[pillar_size * 0.5, lamelles_count * lSize, 0]">
             <TresObject3D v-bind="props.models.top.children[0]" />

components/model/item.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useGLTF, Text3D } from '@tresjs/cientos'
-import { DoubleSide, Object3D, Vector3 } from 'three';
+// @ts-ignore
+import { useGLTF } from '@tresjs/cientos'
+import { Vector3 } from 'three';
 const props = defineProps(['modelUrl', 'model', 'position', 'target', 'parent'])
 
 let scene: any

components/model/parametric.vue

@@ -4,37 +4,67 @@ import {
     EquirectangularReflectionMapping,
     CineonToneMapping,
     Euler,
+    Mesh,
+    Group,
+    Object3D,
 } from 'three';
 import { GainMapLoader, } from '@monogrid/gainmap-js'
+//@ts-ignore
 import { useGLTF, } from '@tresjs/cientos'
 import { getColorHexFromRal, type ralTypes } from '../ral';
 
 const pillar_color = use_pillar_color()
 const lamelle_color = use_lamelle_color()
 const section_count = use_section_count()
+const lamelle_count = use_lamelles_count()
 const extra_section = use_extra_section()
 const max_size = use_max_size()
 
 const { scene, renderer, camera } = useTresContext()
 renderer.value.toneMapping = CineonToneMapping
 renderer.value.toneMappingExposure = 0.5
-// renderer.value.gammaOutput = true
 
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFSoftShadowMap
 
 const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
-const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
-const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
-const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
+// const { scene: fence_model } = await useGLTF('/models_one/fence.glb', { draco: true })
+const { scene: model_fence_top } = await useGLTF('/fence_one/top.glb')
+const { scene: model_fence_center } = await useGLTF('/fence_one/center.glb')
+const { scene: model_fence_bottom } = await useGLTF('/fence_one/bottom.glb')
+const { scene: model_fence_inner } = await useGLTF('/fence_one/inner.glb')
+const { scene: fastening_model } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true });
+const { scene: lamelle_model } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
+
+[model_fence_top, model_fence_bottom].map((sc: Object3D) =>
+    sc.traverse((child: Object3D) => {
+        if (child instanceof Mesh) {
+            child.position.z = 0
+        }
+    })
+)
 
 const top = ref(top_model)
-const fence = ref(fence_model)
+const fence = ref(model_fence_center)
+const fence_top = ref(model_fence_top)
+const fence_bottom = ref(model_fence_bottom)
+const fence_inner = ref(model_fence_inner)
 const fastening = ref(fastening_model)
 const lamelle = ref(lamelle_model)
 
+if (!pillar_color.value) {
+    const r = Math.floor(Math.random() * predefPillarColors.length)
+    pillar_color.value = predefPillarColors[r] as ralTypes
+    lamelle_color.value = predefLamelleColors[r] as ralTypes
+}
+
 set_material(lamelle.value, getColorHexFromRal(lamelle_color.value));
-[top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
+[lamelle].map(
+    (el: Ref) => set_material(el.value, getColorHexFromRal(lamelle_color.value)));
+[top, fastening, fence, fence_bottom, fence_top].map(
+    (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
+[fence_inner].map(
+    (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
 
 const { seek, seekAll } = useSeek()
 watch(lamelle_color, () => {
@@ -45,7 +75,11 @@ watch(lamelle_color, () => {
     });
 })
 watch(pillar_color, () => {
-    [top, fence, fastening].map((el: any) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) })
+    [top, fastening, fence, fence_bottom, fence_top].map(
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value)) });
+    [fence_inner].map(
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
+
     const items = [
         ...seekAll(scene.value, 'name', "pillar_one"),
         ...seekAll(scene.value, 'name', "pillar_two"),
@@ -65,6 +99,11 @@ watch([section_count, extra_section], () => {
     }
 })
 
+watch(lamelle_count, () => {
+    [fence_inner].map(
+        (el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
+})
+
 onMounted(async () => {
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([
@@ -72,7 +111,9 @@ onMounted(async () => {
         'hdrmaps/hdr-gainmap.webp',
         'hdrmaps/hdr.json',
     ])
+    if (renderer.value && camera.value) {
         renderer.value.render(scene.value, camera.value)
+    }
     scene.value.environment = result.renderTarget.texture
     scene.value.background = result.renderTarget.texture
     scene.value.background.mapping = EquirectangularReflectionMapping
@@ -86,7 +127,7 @@ onMounted(async () => {
 <template>
     <TresGroup name="base">
         <template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
-            <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
+            <ModelFence :index="i" :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
         </template>
     </TresGroup>
 </template>

pages/calc.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="siteblock siteblock_calc bg-white">
+        <LazyCalcValues />
+        <Suspense>
+            <LazyCalcModels />
+        </Suspense>
+    </div>
+</template>

public/fence_one/svg_tile1.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+  <defs>
+    <style>
+      .cls-1 {
+        stroke-width: 0px;
+        color: #000;
+      }
+    </style>
+  </defs>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path class="cls-1" d="M256,154.83c-2.56,4.22-5.21,8.38-7.97,12.46-24.26,35.89-56.06,66.22-93.21,88.72,4.22,2.56,8.38,5.21,12.46,7.97,35.89,24.26,66.22,56.06,88.72,93.21,2.56-4.22,5.21-8.38,7.97-12.46,24.26-35.89,56.06-66.22,93.21-88.72-4.22-2.56-8.38-5.21-12.46-7.97-35.89-24.26-66.22-56.06-88.72-93.21Z"/>
+      <path class="cls-1" d="M137.02,79.47c-33.99,22.96-61.04,55.55-77.17,93.69-4.62,10.93-8.35,22.31-11.1,34.08,4.92-1.15,9.78-2.46,14.56-3.95,19.96-6.21,38.67-15.28,55.67-26.76,33.99-22.96,61.04-55.55,77.17-93.69,4.62-10.93,8.35-22.31,11.1-34.08-4.92,1.15-9.78,2.46-14.56,3.95-19.96,6.21-38.67,15.28-55.67,26.76Z"/>
+      <path class="cls-1" d="M315.86,429.16c-4.62,10.93-8.35,22.31-11.1,34.08,4.92-1.15,9.78-2.46,14.56-3.95,19.96-6.21,38.67-15.28,55.67-26.76,33.99-22.96,61.04-55.55,77.17-93.69,4.62-10.93,8.35-22.31,11.1-34.08-4.92,1.15-9.78,2.46-14.56,3.95-19.96,6.21-38.67,15.28-55.67,26.76-33.99,22.96-61.04,55.55-77.17,93.69Z"/>
+      <path class="cls-1" d="M432.53,137.02c-22.96-33.99-55.55-61.04-93.69-77.17-10.93-4.62-22.31-8.35-34.08-11.1,1.15,4.92,2.46,9.78,3.95,14.56,6.21,19.96,15.28,38.67,26.76,55.67,22.96,33.99,55.55,61.04,93.69,77.17,10.93,4.62,22.31,8.35,34.08,11.1-1.15-4.92-2.46-9.78-3.95-14.56-6.21-19.96-15.28-38.67-26.76-55.67Z"/>
+      <path class="cls-1" d="M0,410.83c22.5,37.14,52.82,68.95,88.71,93.2,4.08,2.76,8.24,5.41,12.47,7.97H0v-101.17Z"/>
+      <path class="cls-1" d="M410.83,512h101.17v-101.18c-2.56,4.22-5.21,8.38-7.97,12.47-24.25,35.89-56.06,66.21-93.2,88.71Z"/>
+      <path class="cls-1" d="M512,101.17c-22.5-37.14-52.82-68.95-88.71-93.2C419.2,5.21,415.04,2.56,410.82,0h101.18s0,101.17,0,101.17Z"/>
+      <path class="cls-1" d="M101.17,0H0v101.18c2.56-4.22,5.21-8.38,7.97-12.47C32.22,52.82,64.03,22.5,101.17,0Z"/>
+      <path class="cls-1" d="M79.47,374.98c22.96,33.99,55.55,61.04,93.69,77.17,10.93,4.62,22.31,8.35,34.08,11.1-1.15-4.92-2.46-9.78-3.95-14.56-6.21-19.96-15.28-38.67-26.76-55.67-22.96-33.99-55.55-61.04-93.69-77.17-10.93-4.62-22.31-8.35-34.08-11.1,1.15,4.92,2.46,9.78,3.95,14.56,6.21,19.96,15.28,38.67,26.76,55.67Z"/>
+    </g>
+  </g>
+</svg>

utils/material.ts

@@ -1,4 +1,5 @@
-import { Color, MeshStandardMaterial } from "three"
+import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
+import { useLoader } from '@tresjs/core'
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -10,14 +11,26 @@ const set_metaril_func = (scene: any, material: any) => {
         set_metaril_func(el, material)
     })
 }
-export const set_material = (scene: any, color: any) => {
+// const texture = await useLoader(TextureLoader, '/fence_one/svg_tile1.svg');
+const texture = await useLoader(TextureLoader, '/fence_one/tile1.png');
+texture.wrapT = RepeatWrapping;
+
+export const set_material = (scene: any, color: any, count: number | undefined = undefined) => {
     let c = color
+    if (count) {
+        // console.log(texture)
+        texture.repeat.set(1, count);
+        texture.needsUpdate = true
+    }
+
     const material = new MeshStandardMaterial({
         color: new Color(c || '#9c9c00'),
+        alphaMap: count ? texture : null,
         transparent: true,
-        opacity: 1,
-        roughness: 0.5,
-        metalness: 0
+        opacity: 0.75,
+        // roughness: 0.5,
+        // metalness: 0,
+        side: DoubleSide,
     })
     set_metaril_func(scene, material)
 }