base vue 3d
This commit is contained in:
parent
09951d1655
commit
1d65625611
|
|
@ -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):
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{{ products.list.find(el => el.id == state.active_product)?.description }}
|
||||
<div v-if="state.active_product">
|
||||
{{ state.active_product.description }}
|
||||
<model-fbx :src="`${SERVER_URL}/${state.active_product.model3d.replace('/back', '')}`"></model-fbx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue