Merge branch 'bx-696-startproject' of https://git.svs-tech.pro/ksenia_mikhailova/mns-mini-zabor into bx-696-startproject

assets/main.scss

@@ -150,6 +150,9 @@ button {
     @apply leading-none;
     &-selected {
         @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
+        &__active {
+            @apply outline outline-2 outline-offset-2 outline-primary;
+        }
     }
     &-changer {
         @apply absolute w-80 z-10 bg-white flex gap-0;

components/calcModels.vue

@@ -15,7 +15,9 @@ const controlsState = reactive({
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[8, 2, -4]" />
             <OrbitControls v-bind="controlsState" make-default />
-            <ModelParametric />
+            <Suspense>
+                <ModelParametric />
+            </Suspense>
         </TresCanvas>
     </div>
 </template>

components/calcValues.vue

@@ -59,6 +59,10 @@ const increment = (field: keyof typeof form_state, value: number) => {
         form_state[field] = v
     }
 }
+
+const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
+const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
+
 watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
@@ -81,13 +85,20 @@ watch(form_state, changeParametres, { deep: true })
             <div class="form-row">
                 <div class="form-item">
                     <label for="lamelle_color">Цвет ламелей</label>
-                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled :style="[{backgroundColor: lamelle_color}]" />
+                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
-                    <ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
+                    <template v-for="item in predefLamelleColors">
+                        <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
+                            :active="lamelle_color == item" />
+                    </template>
+                    <ColorPicker :cb="setLamelleColor" />
                 </div>
                 <div class="form-item">
                     <label for="pillar_color">Цвет столба</label>
                     <input id="pillar_color" type="text" v-model="pillar_color" disabled />
-                    <ColorPicker :color="pillar_color" :cb="setPillarColor" />
+                    <template v-for="item in predefPillarColors">
+                        <ColorPicker :color="item" :cb="setPillarColor" :open="false" :active="pillar_color == item" />
+                    </template>
+                    <ColorPicker :cb="setPillarColor" />
                 </div>
             </div>
         </form>

components/colorPicker.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import converter from 'ral-hex-converter'
 
-const props = defineProps(['color', 'cb'])
+const props = defineProps(['color', 'cb', 'open', 'active'])
+const open = props.open ?? true
 
 const onClick = (color: string) => {
     if (props.cb) {
@@ -30,7 +31,8 @@ onUnmounted(() => {
     <div>
         <div class="color_picker" ref="picker">
             <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
-                @click="toggleOpen(!isOpenPicker)" @focusout="toggleOpen(false)"></div>
+                @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
+                :class="[{ 'color_picker-selected__active': active }]"></div>
             <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
                 <template v-for="col in converter.hex">
                     <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
@@ -41,3 +43,8 @@ onUnmounted(() => {
         </div>
     </div>
 </template>
+<style scoped>
+.color_picker-selected:not([style*=color]) {
+    background-image: conic-gradient(from 50deg, orange, yellow, green, cyan, blue, violet)
+}
+</style>

components/model/parametric.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useTexture } from '@tresjs/core'
 import { Environment } from '@tresjs/cientos'
 import { ReinhardToneMapping, PCFShadowMap } from 'three';
 
@@ -16,6 +17,14 @@ renderer.value.toneMapping = ReinhardToneMapping
 
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFShadowMap
+
+const pbrTexture = await useTexture({
+    map: '/texture/Rock035_2K_Displacement.jpg',
+    displacementMap: '/texture/Rock035_2K_Displacement.jpg',
+    roughnessMap: '/texture/Rock035_2K_Roughness.jpg',
+    normalMap: '/texture/Rock035_2K_NormalGL.jpg',
+    ambientOcclusion: '/texture/Rock035_2K_AmbientOcclusion.jpg',
+})
 </script>
 <template>
     <TresGroup>
@@ -26,6 +35,7 @@ renderer.value.shadowMap.type = PCFShadowMap
             <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
                 <TresMesh receive-shadow>
                     <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
+                    <TresMeshStandardMaterial v-bind="pbrTexture" />
                 </TresMesh>
                 <ModelItem model-url="/models_one/bottom.glb"
                     :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
@@ -56,6 +66,12 @@ renderer.value.shadowMap.type = PCFShadowMap
                 <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
                     <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
                 </TresGroup>
+                <ModelItem model-url="/models_one/bottom.glb"
+                    :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
+                    :color="pillar_color" />
+                <ModelItem model-url="/models_one/bottom.glb"
+                    :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
+                    :color="pillar_color" />
             </TresGroup>
         </Suspense>
     </TresGroup>