change color

app.vue

@@ -47,27 +47,27 @@ const toggleModal = () => {
         </div>
       </div>
     </div>
-    <div class="block bg-white" :id="about?.slug">
+    <div class="siteblock bg-white" :id="about?.slug">
       <div class="container">
-        <div class="block-content">
+        <div class="siteblock-content">
-          <h2 class="block-title">{{ about?.title }}</h2>
+          <h2 class="siteblock-title">{{ about?.title }}</h2>
-          <div class="block-text">
+          <div class="siteblock-text">
             {{ about?.content }}
             <p>
               <button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
             </p>
           </div>
         </div>
-        <div class="block-image">
+        <div class="siteblock-image">
           <NuxtImg :src="[apiBase, about?.image].join('/')" />
         </div>
       </div>
     </div>
-    <div class="block block_imgbg bg-slate-500"
+    <div class="siteblock siteblock_imgbg bg-slate-500"
       :style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug">
       <NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
     </div>
-    <div class="block bg-white" :id="reviews?.slug">
+    <div class="siteblock bg-white" :id="reviews?.slug">
       <div class="container">
         <template v-for="item in reviewsData?.slice(0, 3)">
           <div class="review">
@@ -84,14 +84,14 @@ const toggleModal = () => {
         </template>
       </div>
     </div>
-    <div class="block bg-white">
+    <div class="siteblock bg-white">
       <ExpDiagram />
     </div>
-    <div class="block block_imgbg bg-slate-500"
+    <div class="siteblock siteblock_imgbg bg-slate-500"
       :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
-    <div class="block bg-white">
+    <div class="siteblock bg-white">
       <CalcValues />
       <CalcModels />
     </div>

assets/main.scss

@@ -56,7 +56,7 @@ a[href^="#"] {
     }
 }
 
-.block {
+.siteblock {
     @apply py-10;
 
     &_imgbg {
@@ -127,4 +127,8 @@ button {
     &[type="reset"] {
         @apply bg-neutral hover:bg-neutral-400
     }
+}
+
+.form {
+    @apply col-span-full flex gap-4
 }

components/calcModels.vue

@@ -22,8 +22,8 @@ const controlsState = reactive({
             <TresPerspectiveCamera :position="[7, 2, 6]" />
             <OrbitControls v-bind="controlsState" make-default />
             <ModelParametric />
-            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="2" cast-shadow />
-            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, -2]" color="#f6f6f6" :intensity="2" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>

components/calcValues.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
+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 parametric = {
     length: {
         min: 100,
@@ -22,6 +26,9 @@ const changeParametres = () => {
     lamelles_count.value = lamelles
     fence_section.value = form_state.length * 0.001
 }
+const setLamelleColor = (color: string) => {
+    lamelle_color.value = color
+}
 watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
@@ -35,6 +42,13 @@ watch(form_state, changeParametres, { deep: true })
                 <label for="height">Высота забора, мм</label>
                 <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
             </div>
+            <div class="colors flex flex-wrap">
+                <template v-for="color in converter.hex">
+                    <div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
+                        :style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
+                    </div>
+                </template>
+            </div>
         </form>
     </div>
 </template>

components/model/item.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
-import { Box3, Vector3 } from 'three';
+import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
-const props = defineProps(['modelUrl', 'position', 'removePos', 'target'])
+const props = defineProps(['modelUrl', 'position', 'removePos', 'target', 'color'])
+
 const { scene } = await useGLTF(props.modelUrl)
 scene.receiveShadow = true
 scene.castShadow = true
@@ -13,15 +14,7 @@ let size = new Vector3();
 box.getSize(size)
 // const box_size = [size.x, size.y, size.z]
 
-scene.children.forEach((el: any) => {
+const material = new MeshStandardMaterial({ color: props.color ? new Color(props.color) : new Color('#9c9c9c') })
-    el.castShadow = true
-    el.receiveShadow = true
-    if (props.removePos) {
-        el.translateX(-el.position.x)
-        el.translateY(-el.position.y)
-        el.translateZ(-el.position.z)
-    }
-});
 
 function shadows_and_pos(scene: any) {
     scene.children.forEach((el: any) => {
@@ -32,6 +25,7 @@ function shadows_and_pos(scene: any) {
             el.translateY(-el.position.y)
             el.translateZ(-el.position.z)
         }
+        el.material = material
         shadows_and_pos(el)
     })
 }
@@ -52,13 +46,32 @@ onLoop(() => {
         axis.forEach(element => {
             const point = model.value.position[element.axis]
             let step = stepbase * target[element.axis as vectorType]
-            if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
+            if (step !== 0) {
-                step = 0
+                if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
+                    step = 0
+                }
+                model.value[element.func](step)
             }
-            model.value[element.func](step)
         });
     }
 })
+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], () => {
+    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
+                set_material(el)
+            })
+        }
+        set_material(model.value)
+    }
+})
 </script>
 <template>
     <TresGroup :position="props.position || [0, 0, 0]" ref="model">

components/model/parametric.vue

@@ -1,15 +1,20 @@
 <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 lSize = 0.115
 const bSize = 0.0235
 const pillar_size = 80 * 0.001
 const { scene, renderer, camera } = useTresContext()
-watch([lamelles_count, fence_section], () => {
+
-    // console.log(scene)
+
-    console.log(lamelles_count)
+renderer.value.autoClear = true
-    renderer.value.render(scene.value, camera.value)
+
+watch([lamelles_count, fence_section, lamelle_color], () => {
+    // renderer.value.clearColor()
+    // renderer.value.render(scene.value, camera.value)
 })
 </script>
 <template>
@@ -21,8 +26,8 @@ watch([lamelles_count, fence_section], () => {
                 :remove-pos="true" />
             <ModelItem model-url="/models_one/verh_100.glb"
                 :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
-            <ModelItem model-url="/models_one/verh_100.glb"
+            <ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
-                :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
+                :remove-pos="true" />
             <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" />
@@ -31,7 +36,7 @@ watch([lamelles_count, fence_section], () => {
                     <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
                 </TresGroup>
                 <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
-                    <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" />
+                    <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]">

package-lock.json

@@ -13,9 +13,9 @@
         "@tresjs/cientos": "^3.9.0",
         "@tresjs/core": "^4.0.2",
         "@tresjs/nuxt": "^2.1.2",
-        "@vueuse/core": "^10.10.0",
         "nuxt": "^3.11.2",
         "nuxt-svgo": "^4.0.1",
+        "ral-hex-converter": "^1.0.1",
         "sass": "^1.77.4",
         "tailwindcss": "^3.4.3",
         "three": "^0.165.0",
@@ -11542,6 +11542,11 @@
       "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
       "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="
     },
+    "node_modules/ral-hex-converter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ral-hex-converter/-/ral-hex-converter-1.0.1.tgz",
+      "integrity": "sha512-A0C1KzDyUzKRgLLVBmjFmPKnkkq7VvgL6MszNxkPuH6AlFfr6zdEYdWvDWw4tChWql7OAcOOgUvF8wVueopTFg=="
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@tresjs/nuxt": "^2.1.2",
     "nuxt": "^3.11.2",
     "nuxt-svgo": "^4.0.1",
+    "ral-hex-converter": "^1.0.1",
     "sass": "^1.77.4",
     "tailwindcss": "^3.4.3",
     "three": "^0.165.0",