ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

load

This commit is contained in:
aarizona 2024-08-30 17:17:14 +03:00
parent 9c706ec661
commit 32f70b6d8c
4 changed files with 23 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
front/package-lock.json generated
View File

@ -26,7 +26,6 @@
"three": "^0.164.1", "three": "^0.164.1",
"vite-svg-loader": "^5.1.0", "vite-svg-loader": "^5.1.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-3d-model": "^2.0.0-alpha.4",
"vue-router": "^4.3.2" "vue-router": "^4.3.2"
}, },
"devDependencies": { "devDependencies": {
@ -3735,31 +3734,6 @@
} }
} }
}, },
"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-3d-model/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/vue-3d-model/node_modules/three": {
"version": "0.141.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.141.0.tgz",
"integrity": "sha512-JaSDAPWuk4RTzG5BYRQm8YZbERUxTfTDVouWgHMisS2to4E5fotMS9F2zPFNOIJyEFTTQDDKPpsgZVThKU3pXA=="
},
"node_modules/vue-router": { "node_modules/vue-router": {
"version": "4.3.2", "version": "4.3.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",

1
front/package.json
View File

@ -28,7 +28,6 @@
"three": "^0.164.1", "three": "^0.164.1",
"vite-svg-loader": "^5.1.0", "vite-svg-loader": "^5.1.0",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-3d-model": "^2.0.0-alpha.4",
"vue-router": "^4.3.2" "vue-router": "^4.3.2"
}, },
"devDependencies": { "devDependencies": {

5
front/src/assets/main.scss
View File

@ -35,8 +35,9 @@ a[href] {
} }
} }
canvas { &-canvas {
height: 40vh; flex-grow: 1;
height: 50vh;
width: 100vw; width: 100vw;
} }
} }

17
front/src/components/Main/index.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { SRGBColorSpace } from 'three'; import { SRGBColorSpace } from 'three';
import { TresCanvas } from '@tresjs/core'; import { TresCanvas, useLoop } from '@tresjs/core';
import { useGLTF } from '@tresjs/cientos'; import { useGLTF } from '@tresjs/cientos';
import { useItem } from '../../stores/item'; import { useItem } from '../../stores/item';
import { useRawData } from '../../stores/raw_data'; import { useRawData } from '../../stores/raw_data';
@ -10,13 +10,21 @@ import { IMAGE_URL } from '../../constants';
const raw_dataStore = useRawData() const raw_dataStore = useRawData()
const pageStore = useItem() const pageStore = useItem()
const camera = ref()
const models = ref([] as model3DType[]) const models = ref([] as model3DType[])
const scene = ref()
const loadModels = async () => { const loadModels = async () => {
camera.value.minDistance = raw_dataStore.data.min_distance;
camera.value.maxDistance = raw_dataStore.data.max_distance;
const d = raw_dataStore.data.max_distance * 0.5;
camera.value.position.set(d, d, d)
for (let index = 0; index < raw_dataStore.data.elements.length; index++) { for (let index = 0; index < raw_dataStore.data.elements.length; index++) {
const element = raw_dataStore.data.elements[index]; const element = raw_dataStore.data.elements[index];
const item = {} as model3DType const item = {} as model3DType
if (element.name == 'ground') continue
item.modelUrl = `${IMAGE_URL}/${element.model_file}` item.modelUrl = `${IMAGE_URL}/${element.model_file}`
let { scene: loaded_scene } = await useGLTF(item.modelUrl) let { scene: loaded_scene } = await useGLTF(item.modelUrl)
item.modelFile = loaded_scene item.modelFile = loaded_scene
@ -48,7 +56,6 @@ watch(() => pageStore.page.id, async () => {
await raw_dataStore.load({ source: pageStore.page.id }) await raw_dataStore.load({ source: pageStore.page.id })
loadModels() loadModels()
}) })
</script> </script>
<template> <template>
<div class="main"> <div class="main">
@ -60,13 +67,17 @@ watch(() => pageStore.page.id, async () => {
{{ p }} {{ p }}
</p> </p>
</div> </div>
<div class="main-canvas">
<TresCanvas :output-encoding="SRGBColorSpace"> <TresCanvas :output-encoding="SRGBColorSpace">
<TresPerspectiveCamera /> <TresPerspectiveCamera ref="camera" />
<TresGroup ref="scene">
<template v-for="item in models"> <template v-for="item in models">
<TresGroup :name="item.name"> <TresGroup :name="item.name">
<TresObject3D v-bind="item.modelFile.clone()" /> <TresObject3D v-bind="item.modelFile.clone()" />
</TresGroup> </TresGroup>
</template> </template>
</TresGroup>
</TresCanvas> </TresCanvas>
</div> </div>
</div>
</template> </template>