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

home page

This commit is contained in:
aarizona 2024-08-31 08:55:13 +03:00
parent a1e67f5860
commit 36e7aa45ed
8 changed files with 97 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/components.d.ts vendored
View File

@ -36,6 +36,7 @@ declare module 'vue' {
Load: typeof import('./src/components/load.vue')['default']
Load_models: typeof import('./src/components/Promo/load_models.vue')['default']
Main: typeof import('./src/components/Main/index.vue')['default']
Main_load_models: typeof import('./src/components/Main/main_load_models.vue')['default']
ModelItem: typeof import('./src/components/Promo/modelItem.vue')['default']
Models: typeof import('./src/components/Promo/models.vue')['default']
Nav: typeof import('./src/components/nav.vue')['default']

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

@ -39,6 +39,7 @@ a[href] {
flex-grow: 1;
height: 50vh;
width: 100vw;
max-height: 65vh;
}
}

2
front/src/components/Gallery/gallery.vue
View File

@ -90,5 +90,5 @@ onMounted(async () => {
})
</script>
<template>
<div id="gallery"></div>
<div id="gallery" style=" width: 100vw; height: 100vh;"></div>
</template>

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

@ -1,18 +1,17 @@
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { onMounted, reactive, ref, watch } from 'vue';
import { SRGBColorSpace } from 'three';
import { TresCanvas, } from '@tresjs/core';
import { useGLTF, OrbitControls } from '@tresjs/cientos';
import { OrbitControls } from '@tresjs/cientos';
import MainLoadModels from './main_load_models.vue';
import { useItem } from '../../stores/item';
import { useRawData } from '../../stores/raw_data';
import { IMAGE_URL } from '../../constants';
const raw_dataStore = useRawData()
const pageStore = useItem()
const camera = ref()
const controls = ref()
const models = ref([] as model3DType[])
const controlsState = reactive({
enableDamping: true,
@ -23,51 +22,14 @@ const controlsState = reactive({
autoRotate: true,
})
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++) {
const element = raw_dataStore.data.elements[index];
const item = {} as model3DType
if (element.name == 'ground') continue
item.modelUrl = `${IMAGE_URL}/${element.model_file}`
let { scene: loaded_scene } = await useGLTF(item.modelUrl)
item.modelFile = loaded_scene
item.id = element.id
item.name = element.name
if (!element.is_enabled) {
item.modelFile.visible = false
}
if (item.modelFile.children[0]) {
item.modelFile.children[0].position.set(
item.modelFile.children[0].position.x + element.x_pos,
item.modelFile.children[0].position.y + element.y_pos,
item.modelFile.children[0].position.z + element.z_pos
)
item.modelFile.children[0].updateMatrixWorld(true)
}
models.value.push(item)
}
}
onMounted(async () => {
if (!raw_dataStore.data.id && pageStore.page.id) {
await raw_dataStore.load({ source: pageStore.page.id })
await loadModels();
controls.value.autoRotate = true
controls.value.value.update()
await raw_dataStore.load({ source: pageStore.page.scene_3d })
}
})
watch(() => pageStore.page.id, async () => {
await raw_dataStore.load({ source: pageStore.page.id })
await loadModels()
controls.value.autoRotate = true
controls.value.value.update()
await raw_dataStore.load({ source: pageStore.page.scene_3d })
})
</script>
@ -85,13 +47,8 @@ watch(() => pageStore.page.id, async () => {
<TresCanvas :output-encoding="SRGBColorSpace">
<TresPerspectiveCamera ref="camera" />
<OrbitControls v-bind="controlsState" make-default ref="controls" />
<TresGroup ref="scene">
<template v-for="item in models">
<TresGroup :name="item.name">
<TresObject3D v-bind="item.modelFile.clone()" />
</TresGroup>
</template>
</TresGroup>
<MainLoadModels v-if="raw_dataStore.data.id" />
<TresAmbientLight />
</TresCanvas>
</div>
</div>

69
front/src/components/Main/main_load_models.vue Normal file
View File

@ -0,0 +1,69 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useLoop, useTresContext } from '@tresjs/core';
import { useGLTF } from '@tresjs/cientos';
import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
import { useRawData } from '../../stores/raw_data';
import { IMAGE_URL } from '../../constants';
import { Euler, Vector3 } from 'three';
const { controls, camera } = useTresContext()
const raw_dataStore = useRawData()
const models = ref([] as model3DType[])
const loadModels = async () => {
for (let index = 0; index < raw_dataStore.data.elements.length; index++) {
const element = raw_dataStore.data.elements[index];
const item = {} as model3DType
if (element.name == 'ground') continue
item.modelUrl = `${IMAGE_URL}/${element.model_file}`
let { scene: loaded_scene } = await useGLTF(item.modelUrl)
item.modelFile = loaded_scene
item.id = element.id
item.name = element.name
if (!element.is_enabled) {
item.modelFile.visible = false
}
if (item.modelFile.children[0]) {
item.modelFile.children[0].position.set(
item.modelFile.children[0].position.x + element.x_pos,
item.modelFile.children[0].position.y + element.y_pos,
item.modelFile.children[0].position.z + element.z_pos
)
item.modelFile.children[0].updateMatrixWorld(true)
}
models.value.push(item)
}
}
const cameraSet = () => {
if (controls.value) {
(controls.value as OrbitControlsProps).minDistance = raw_dataStore.data.min_distance;
(controls.value as OrbitControlsProps).maxDistance = raw_dataStore.data.max_distance;
(controls.value as OrbitControlsProps).autoRotate = true;
(controls.value as OrbitControlsProps).autoRotateSpeed = 1;
(controls.value as any).update()
}
if (camera.value) {
const d = raw_dataStore.data.max_distance * 0.5;
camera.value.position.set(d * 0.25, d * 0.5, d);
camera.value.updateMatrixWorld()
}
}
loadModels()
cameraSet()
const { onAfterRender } = useLoop()
onAfterRender(() => {
(controls.value as any).update()
})
</script>
<template>
<template v-for="item in models">
<TresGroup :name="item.name">
<TresObject3D v-bind="item.modelFile.clone()" />
</TresGroup>
</template>
</template>

15
front/src/components/load.vue
View File

@ -1,11 +1,22 @@
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { useItem } from '../stores/item';
import { watch } from 'vue';
const page = useItem()
const route = useRoute()
const router = useRouter()
await page.load(route.params)
router.afterEach((to) => {
if (to.name == 'home_no') {
page.load(route.params)
}
return true
})
watch(() => route.params.item, () => {
page.load(route.params)
})
</script>
<template>

2
front/src/components/nav.vue
View File

@ -8,7 +8,7 @@ const pageStore = useItem()
<template>
<div class="nav">
<div class="nav-group">
<span class="nav-icon" :class="[{ 'active': route.name == 'main' }]">
<span class="nav-icon" :class="[{ 'active': ['main', 'home_no'].includes(route.name as string) }]">
<RouterLink :to="`/${pageStore.page.slug}`">
<i-mdi-home-outline />
</RouterLink>

5
front/src/main.ts
View File

@ -22,12 +22,7 @@ const router = createRouter({
})
router.beforeEach((to, from, next) => {
// This function will be called before each route change
console.log('Navigating from', from.fullPath, 'to', to.fullPath);
// You can perform any additional logic here
// Make sure to call next() to continue with the navigation
next();
});