icon

app.vue

@@ -3,6 +3,7 @@ const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 
 import k_logo from '@/assets/icons/logo.svg'
+<<<<<<< HEAD
 
 type ApiKpType = {
   id: number
@@ -47,6 +48,8 @@ type ApiSocial_networkType = {
 }
 
 
+=======
+>>>>>>> 438d53218ae0250dd90d13cc3a67f9d559db2b0c
 import '@/assets/main.scss'
 
 const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
@@ -133,7 +136,8 @@ const toggleModal = () => {
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
     <div class="block bg-white">
-      <Calculator />
+      <CalcValues />
+      <CalcModels />
     </div>
     <div class="footer">
       <div class="container">

components/calcModels.vue

@@ -6,13 +6,13 @@ import Canvas from './model/canvas.vue';
 
 const controlsState = reactive({
     minDistance: 0,
-    maxDistance: 5,
+    maxDistance: 10,
-    enablePan: false,
+    // enablePan: false,
-    enebleZoom: false,
+    // enebleZoom: false,
     maxPolarAngle: (Math.PI / 2) - 0.02,
     // distance: 3
 })
-
+// console.log(controlsState)
 // const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
 // const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
 // const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
@@ -22,11 +22,11 @@ const controlsState = reactive({
 <template>
     <div class="container">
         <TresCanvas shadows>
-            <TresPerspectiveCamera :position="[4, 8, 4]" :distance="3" />
+            <TresPerspectiveCamera :position="[-7, 2, 3]" :distance="3" />
             <OrbitControls v-bind="controlsState" make-default />
             <Canvas />
-            <TresDirectionalLight v-light-helper :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
-            <TresDirectionalLight v-light-helper :position="[2, 2, -2]" :intensity="1" color="yellow" cast-shadow />
+            <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>

components/calcValues.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const lamelles_count = useState('lamelles_count', () => 3)
+const lamelles = reactive({
+    min: 3,
+    max: 30,
+    value: lamelles_count
+})
+const chanreParametres = () => {
+    lamelles_count.value = lamelles.value
+}
+</script>
+<template>
+    <div class="container">
+        <input type="number" :max="lamelles.max" :min="lamelles.min" v-model="lamelles.value" @change="chanreParametres" />
+    </div>
+</template>

components/model/canvas.vue

@@ -1,18 +1,16 @@
 <script setup lang="ts">
 import Item from './item.vue';
-const onClick = (e: MouseEvent) => {
+const lSize = 0.1
-    console.log(e)
+const lamelles_count = useState('lamelles_count')
-}
+
-const { renderer } = useTresContext()
-renderer.value.shadowMap.enabled = true
 </script>
 <template>
-    <TresMesh :position="[0, -1, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
+    <TresMesh :position="[0, 0, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
         <TresBoxGeometry :args="[8, 8, 0.05]" />
         <TresMeshStandardMaterial color="pink" />
     </TresMesh>
     <Suspense>
-        <TresGroup :position="[0, -1, 0]">
+        <TresGroup>
             <Item model-url="/models/kosynka.glb" />
             <Item model-url="/models/kreplaniye_planok.glb" />
             <Item model-url="/models/planki.glb" />
@@ -21,4 +19,12 @@ renderer.value.shadowMap.enabled = true
             <Item model-url="/models/zakliopki.glb" />
         </TresGroup>
     </Suspense>
+    <Suspense>
+        <TresGroup :position="[1, 0, 1]">
+            <template v-for="i in lamelles_count">
+                <Item model-url="/models_one/planka.glb" :position="[0, (lSize * i), 0]" :remove-pos="true" />
+            </template>
+            <Item model-url="/models_one/verh.glb" :position="[0, (lamelles_count + 1) * lSize, 0]" :remove-pos="true" />
+        </TresGroup>
+    </Suspense>
 </template>

components/model/item.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
 import { Box3, Vector3 } from 'three';
-const props = defineProps(['modelUrl'])
+const props = defineProps(['modelUrl', 'position', 'removePos'])
 const { scene } = await useGLTF(props.modelUrl)
-console.log(scene, props.modelUrl)
 scene.receiveShadow = true
 scene.castShadow = true
 
@@ -16,13 +15,33 @@ box.getSize(size)
 
 const box_size = [size.x, size.y, size.z]
 
-scene.children.forEach((el:any) => {
+scene.children.forEach((el: any) => {
     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) => {
+        el.castShadow = true
+        el.receiveShadow = true
+        if (props.removePos) {
+            el.translateX(-el.position.x)
+            el.translateY(-el.position.y)
+            el.translateZ(-el.position.z)
+        }
+        shadows_and_pos(el)
+    })
+}
+
+shadows_and_pos(scene)
 </script>
 <template>
-    <TresGroup>
+    <TresGroup :position="props.position || [0, 0, 0]">
         <TresMesh :position="center" cast-shadow receive-shadow v-if="false">
             <TresBoxGeometry :args="box_size" />
             <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />

types/index.d.ts

@@ -2,3 +2,44 @@ declare module '*.glb' {
     const src: string
     export default src
 }
+
+type ApiKpType = {
+    id: number
+    title: string
+    content: string
+    url: string
+    meta_title: any
+    meta_description: string
+    keywords: any
+    is_indexed: boolean
+}
+
+type ApiPagesType = {
+    id: number
+    title: string
+    menu_title: string
+    slug: string
+    external_link: string
+    content: string
+    image: string
+}
+
+type ApiReviewsType = {
+    id: number
+    image: string
+    text: string
+    comment: string
+}
+
+type ApiFooterType = {
+    id: number
+    text: string
+    small_text: boolean
+}
+
+type ApiSocial_networkType = {
+    id: number
+    name: string
+    link: string
+    image: string
+}