redraw lamelles

components/calcModels.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+import { OrbitControls, vLightHelper } from '@tresjs/cientos'
 
 const controlsState = reactive({
     minDistance: 1,
@@ -22,9 +22,9 @@ const controlsState = reactive({
             <TresPerspectiveCamera :position="[7, 2, 6]" />
             <OrbitControls v-bind="controlsState" make-default />
             <ModelParametric />
-            <TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="2" cast-shadow />
-            <TresDirectionalLight :position="[2, 2, -2]" color="#f6f6f6" :intensity="2" cast-shadow />
-            <TresAmbientLight />
+            <TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="10" cast-shadow />
+            <TresDirectionalLight :position="[-2, 2, -2]" color="#f6f6f6" :intensity="10" cast-shadow />
+            <TresAmbientLight :intensity="20" />
         </TresCanvas>
     </div>
 </template>

components/calcValues.vue

@@ -2,8 +2,8 @@
 import converter from 'ral-hex-converter'
 const lamelles_count = useState('lamelles_count', () => 8)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
-const pillar_color = useState('pillar_color', () => 'black')
-const lamelle_color = useState('lamelle_color', () => 'red')
+const pillar_color = useState('pillar_color', () => 'gray')
+const lamelle_color = useState('lamelle_color', () => 'violet')
 
 const parametric = {
     length: {

components/model/item.vue

@@ -12,10 +12,15 @@ const box = new Box3();
 box.expandByObject(scene.children[0]);
 let size = new Vector3();
 box.getSize(size)
-// const box_size = [size.x, size.y, size.z]
-
-const material = new MeshStandardMaterial({ color: props.color ? new Color(props.color) : new Color('#9c9c9c') })
 
+const getMaterial = () => {
+    return new MeshStandardMaterial({
+        color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
+        roughness: 0,
+        metalness: 1
+    })
+}
+const material = getMaterial()
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
         el.castShadow = true
@@ -25,7 +30,7 @@ function shadows_and_pos(scene: any) {
             el.translateY(-el.position.y)
             el.translateZ(-el.position.z)
         }
-        el.material = material
+        if (el.material && props.color) el.material = material
         shadows_and_pos(el)
     })
 }
@@ -41,6 +46,7 @@ const axis = [
     { axis: 'z', func: 'translateZ', },
 ]
 type vectorType = 'x' | 'y' | 'z';
+
 onLoop(() => {
     if (model.value && props.target) {
         axis.forEach(element => {
@@ -55,26 +61,21 @@ onLoop(() => {
         });
     }
 })
-const lamelles_count = useState<number>('lamelles_count')
-const fence_section = useState<number>('fence_section')
-const pillar_color = useState('pillar_color', () => 'black')
-const lamelle_color = useState('lamelle_color', () => 'red')
 
-watch([lamelles_count, fence_section, lamelle_color], () => {
+watch(props, () => {
     if (props.color && `#${material.color.getHexString()}` !== props.color) {
-        const material = new MeshStandardMaterial({ color: props.color ? new Color(props.color) : new Color('#9c9c9c') })
         function set_material(scene: any) {
             scene.children.forEach((el: any) => {
-                el.material = material
+                if (el.material && props.color) el.material.color = new Color(props.color)
                 set_material(el)
             })
         }
         set_material(model.value)
     }
-})
+}, { deep: true })
 </script>
 <template>
     <TresGroup :position="props.position || [0, 0, 0]" ref="model">
-        <primitive :object="scene" cast-shadow receive-shadow />
+        <primitive :object="scene.children[0]" cast-shadow receive-shadow />
     </TresGroup>
 </template>

components/model/parametric.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
-const pillar_color = useState('pillar_color', () => 'black')
-const lamelle_color = useState('lamelle_color', () => 'red')
+const pillar_color = useState('pillar_color')
+const lamelle_color = useState('lamelle_color')
 
 const lSize = 0.115
 const bSize = 0.0235
@@ -21,26 +21,31 @@ watch([lamelles_count, fence_section, lamelle_color], () => {
     <Suspense>
         <TresGroup>
             <ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
-                :remove-pos="true" />
+                :remove-pos="true" :color="pillar_color" />
             <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
-                :remove-pos="true" />
+                :remove-pos="true" :color="pillar_color" />
             <ModelItem model-url="/models_one/verh_100.glb"
-                :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
+                :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
+                :color="pillar_color" />
             <ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
-                :remove-pos="true" />
+                :remove-pos="true" :color="pillar_color" />
             <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
-                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
+                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
                 </TresGroup>
+            </template>
+            <template v-for="(n, i) in lamelles_count">
                 <TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
-                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
+                    <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
                 </TresGroup>
+            </template>
+            <template v-for="(n, i) in lamelles_count">
                 <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
                     <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
                 </TresGroup>
             </template>
             <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
-                <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" />
+                <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
             </TresGroup>
         </TresGroup>
     </Suspense>