base vue 3d

back/api/models.py

@@ -4,7 +4,7 @@ from django.db import models
 # Create your models here.
 class Product(models.Model):
     title = models.CharField(max_length=100)
-    model3d = models.FileField(default=None, null=True)
+    model3d = models.FileField(default=None, null=True, upload_to="back/files")
     description = models.TextField(default=None, null=True)
 
     def __str__(self):

back/back/urls.py

@@ -16,9 +16,10 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import path
+from django.conf.urls.static import static
 from api import views
 
 urlpatterns = [
     path("admin/", admin.site.urls),
     path("api/products", views.products),
-]
+] + static('/files', document_root='back/files')

front/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "pinia": "^2.1.7",
         "reset-css": "^5.0.2",
-        "vue": "^3.4.21"
+        "vue": "^3.4.21",
+        "vue-3d-model": "^2.0.0-alpha.4"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -618,6 +619,19 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/three": {
+      "version": "0.141.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.141.0.tgz",
+      "integrity": "sha512-OJdKDgTPVBUgc+s74DYoy4aLznbFFC38Xm4ElmU1YwGNgR7GGFVvFCX7lpVgOsT6S1zSJtGdajTsOYE8/xY9nA==",
+      "dependencies": {
+        "@types/webxr": "*"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.15.tgz",
+      "integrity": "sha512-nC9116Gd4N+CqTxqo6gvCfhAMAzgRcfS8ZsciNodHq8uwW4JCVKwhagw8yN0XmC7mHrLnWqniJpoVEiR+72Drw=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -1278,6 +1292,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/three": {
+      "version": "0.141.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.141.0.tgz",
+      "integrity": "sha512-JaSDAPWuk4RTzG5BYRQm8YZbERUxTfTDVouWgHMisS2to4E5fotMS9F2zPFNOIJyEFTTQDDKPpsgZVThKU3pXA=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1378,6 +1397,18 @@
         }
       }
     },
+    "node_modules/vue-3d-model": {
+      "version": "2.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/vue-3d-model/-/vue-3d-model-2.0.0-alpha.4.tgz",
+      "integrity": "sha512-/dGP7YTAK5e7o8i9592PS9S0mbUStRl26OeeC2Qz4XePrG9BU/Q1GkETqPSMJPWgNa8TkqrxXP9ItYgcmxuSqw==",
+      "dependencies": {
+        "@types/three": "^0.141.0",
+        "three": "^0.141.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",

front/package.json

@@ -11,7 +11,8 @@
   "dependencies": {
     "pinia": "^2.1.7",
     "reset-css": "^5.0.2",
-    "vue": "^3.4.21"
+    "vue": "^3.4.21",
+    "vue-3d-model": "^2.0.0-alpha.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

front/src/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, reactive } from 'vue';
+import { ModelFbx } from 'vue-3d-model';
 import { useProductStore } from './stores/product';
+import { SERVER_URL } from './constants'
 
 type StateType = {
   active_product?: number
@@ -13,7 +15,7 @@ const state: StateType = reactive({
 })
 
 const setActive = (id: number) => {
-  state.active_product = id
+  state.active_product = products.list.find(el => el.id == id)
 }
 
 onMounted(async () => {
@@ -34,8 +36,9 @@ onMounted(async () => {
     </div>
     <div class="header">Проекты Кустарщины</div>
     <div class="main">
-      <div v-if="products.list.length && state.active_product">
+      <div v-if="state.active_product">
-        {{ products.list.find(el => el.id == state.active_product)?.description }}
+        {{ state.active_product.description }}
+        <model-fbx :src="`${SERVER_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
       </div>
     </div>
   </div>

front/src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>