add 3d model

app.vue

@@ -2,7 +2,7 @@
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 
-import k_logo from '@/assets/logo.svg'
+import k_logo from '@/assets/icons/logo.svg'
 
 type ApiKpType = {
   id: number
@@ -122,7 +122,7 @@ const toggleModal = () => {
       :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
       <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
     </div>
-    <div class="block block_imgbg bg-white">
+    <div class="block bg-white">
       <Calculator />
     </div>
     <div class="footer">

components/calculator.vue

@@ -1,5 +1,53 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import Item from './model/item.vue';
+
+const onClick = (e: MouseEvent) => {
+    console.log(e)
+}
+const controlsState = reactive({
+    minDistance: 0,
+    maxDistance: 100,
+})
+
+// Import necessary three.js classes
+import { Mesh, BoxGeometry, MeshBasicMaterial, MeshStandardMaterial } from 'three'
+
+// Create a box geometry and a basic material
+const geometry = new BoxGeometry(1, 1, 1)
+const material = new MeshStandardMaterial({ color: 0x00ff00 })
+const meshWithMaterial = new Mesh(geometry, material)
+
+</script>
 <template>
     <div class="container">
-        calc
+        <TresCanvas clear-color="#82DBC5">
+            <TresPerspectiveCamera :position="[5, 5, 5]" />
+            <OrbitControls v-bind="controlsState" make-default />
+            <TresMesh @click="onClick" :position="[-1, -1, -1]">
+                <primitive :object="meshWithMaterial" />
+            </TresMesh>
+            <Suspense>
+                <TresGroup>
+                    <Item model-url="/models/kosynka.glb" />
+                    <Item model-url="/models/kreplaniye_planok.glb" />
+                    <Item model-url="/models/planki.glb" />
+                    <Item model-url="/models/stolb.glb" />
+                    <Item model-url="/models/verh.glb" />
+                    <Item model-url="/models/zakliopki.glb" />
+                </TresGroup>
+            </Suspense>
+            <TresDirectionalLight />
+            <TresAmbientLight />
+        </TresCanvas>
     </div>
 </template>
+
+<style scoped>
+.container {
+    height: 100vh;
+    max-height: 50vw;
+    display: block;
+}
+</style>

components/model/item.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+const props = defineProps(['modelUrl'])
+const { scene } = await useGLTF(props.modelUrl)
+console.log(scene, props.modelUrl)
+</script>
+<template>
+    <TresGroup>
+        <TresGroup :position="[2, 2, 2]">
+            <TresBoxGeometry :args="[1, 1, 1]" />
+            <TresMeshNormalMaterial />
+        </TresGroup>
+        <primitive :object="scene" />
+    </TresGroup>
+</template>

nuxt.config.ts

@@ -1,10 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', "@nuxt/image", "nuxt-svgo"],
+  modules: ['@nuxtjs/tailwindcss', "@nuxt/image", "nuxt-svgo", '@tresjs/nuxt'],
   runtimeConfig: {
     public: {
       apiBase: '/api',
     },
   },
+  vite: {
+    assetsInclude: ['**/*.glb', '**/*.gltf'],
+  }
 })

package.json

@@ -13,10 +13,14 @@
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
     "@tailwindcss/typography": "^0.5.13",
+    "@tresjs/cientos": "^3.9.0",
+    "@tresjs/core": "^4.0.2",
+    "@tresjs/nuxt": "^2.1.2",
     "nuxt": "^3.11.2",
     "nuxt-svgo": "^4.0.1",
     "sass": "^1.77.4",
     "tailwindcss": "^3.4.3",
+    "three": "^0.165.0",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2"
   }

types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.glb' {
+    const src: string
+    export default src
+}