101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { IMAGE_URL, SERVER_URL, } from '../../constants'
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { Vector3 } from 'three';
|
|
|
|
import { TresCanvas } from '@tresjs/core';
|
|
import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
|
|
|
|
import Env from './env.vue'
|
|
import ModelItem from './modelItem.vue';
|
|
|
|
const minPan = new Vector3(-10, 1, -5);
|
|
const maxPan = new Vector3(5, 1, 5);
|
|
const _v = new Vector3();
|
|
|
|
const onChange = (e: any) => {
|
|
_v.copy(e._target);
|
|
e._target.clamp(minPan, maxPan);
|
|
_v.sub(e._target);
|
|
e._camera.position.sub(_v);
|
|
}
|
|
|
|
const cameraPosition = [-6, 4, 25] as unknown as Vector3
|
|
|
|
const controlsState = reactive({
|
|
minDistance: 5,
|
|
maxDistance: 30,
|
|
maxPolarAngle: (Math.PI / 2) - 0.02,
|
|
maxZoom: 1,
|
|
minZoom: 1,
|
|
})
|
|
|
|
const { hasFinishLoading, progress } = await useProgress()
|
|
|
|
const point_light = reactive({
|
|
intensity: 10000,
|
|
position: new Vector3(-100, 5, 5),
|
|
})
|
|
interface element3DType {
|
|
id: number
|
|
model_file: string
|
|
name: string
|
|
description: string
|
|
parent?: number
|
|
}
|
|
interface model3DType extends element3DType {
|
|
modelUrl?: string
|
|
}
|
|
const models = ref<model3DType[]>([])
|
|
const loadModels = async () => {
|
|
const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
|
|
const data = await res.json() as element3DType[]
|
|
for (let index = 0; index < data.length; index++) {
|
|
const element = data[index];
|
|
const item = { ...element } as model3DType
|
|
item.modelUrl = `${IMAGE_URL}/${item.model_file}`
|
|
models.value.push(item)
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
loadModels()
|
|
})
|
|
</script>
|
|
<template>
|
|
<div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
|
|
Загрузка {{ progress }}%
|
|
</div>
|
|
<div :class="[{ 'invisible': !hasFinishLoading }]">
|
|
<TresCanvas window-size>
|
|
<TresPerspectiveCamera :position="cameraPosition" />
|
|
<CameraControls v-bind="controlsState" @change="onChange" make-default />
|
|
<Suspense>
|
|
<Env />
|
|
</Suspense>
|
|
<Suspense>
|
|
<TresGroup v-for="item in models">
|
|
<ModelItem :model-url="item.modelUrl" />
|
|
</TresGroup>
|
|
</Suspense>
|
|
<TresMesh>
|
|
<TresBoxGeometry :args="[1, 1, 1]" />
|
|
<TresMeshStandardMaterial />
|
|
</TresMesh>
|
|
<TresPointLight v-bind="point_light" />
|
|
<TresAmbientLight :intensity="1" />
|
|
</TresCanvas>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loader {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
min-height: 100vh;
|
|
}
|
|
</style> |