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

fog

This commit is contained in:
Kseninia Mikhaylova 2024-07-26 12:26:41 +03:00
parent fd141d19a3
commit 6cf76ff96c
6 changed files with 25 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
back/back/settings.py
View File

@ -61,6 +61,7 @@ CORS_ORIGIN_WHITELIST = [
"http://127.0.0.1",
"http://192.168.103.159",
"http://192.168.103.159:3000",
"http://192.168.103.159:5173",
"http://192.168.103.159:8000",
"http://front:4173",
"http://front:5173",

2
front/.env.development
View File

@ -1,3 +1,3 @@
VITE_SERVER_URL='https://demo.kustarshina.ru'
VITE_IMAGE_URL='https://demo.kustarshina.ru'
# VITE_SERVER_URL='http://localhost:8000'
VITE_SERVER_URL='http://192.168.103.159:8000'

4
front/src/components/Promo/env.vue
View File

@ -21,8 +21,8 @@ const loadEnv = async () => {
])
scene.value.environment = result.renderTarget.texture
scene.value.background = result.renderTarget.texture
scene.value.background.mapping = EquirectangularReflectionMapping
// scene.value.background = result.renderTarget.texture
// scene.value.background.mapping = EquirectangularReflectionMapping
// scene.value.backgroundBlurriness = 0.15
result.renderTarget.texture.dispose();
}

9
front/src/components/Promo/load_models.vue
View File

@ -15,7 +15,7 @@ import { IMAGE_URL, SERVER_URL, } from '../../constants'
import { usePromoSidebar } from '../../stores/promo_sidebar';
import { usePromoScene } from '../../stores/promo_scene';
const props = defineProps(['source', 'loaded', 'loaded_pan', 'tres_values'])
const props = defineProps(['source', 'loaded', 'loaded_pan', 'clearColor'])
const models = ref<model3DType[]>([])
const clickable = ref<clickableAreaType[]>([])
@ -40,9 +40,8 @@ const loadModels = async () => {
envVars.hdr_json = raw_data.hdr_json ? `${IMAGE_URL}/${raw_data.hdr_json}` : undefined
envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
// tiltShift.focus = raw_data.max_distance * 0.5
tiltShift.focus = raw_data.max_distance * 0.5
tiltShift.aperture = 15
tiltShift.focus = raw_data.max_distance * 0.33
tiltShift.aperture = 10
tiltShift.maxblur = 1
const data = raw_data.elements
@ -197,7 +196,7 @@ watch(() => sidebar_scene.list, () => {
<template>
<TresGroup name="loaded">
<Env v-bind="envVars" />
<PostProcess :tiltShift="tiltShift" :tres_values="tres_values"/>
<PostProcess :tiltShift="tiltShift" :clearColor="props.clearColor" />
<template v-for="item in models">
<TresGroup :name="item.name">
<TresObject3D v-bind="item.modelFile.clone()" />

39
front/src/components/Promo/main.vue
View File

@ -34,8 +34,8 @@ const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
const controlsState = reactive({
enableDamping: false,
maxPolarAngle: (Math.PI / 2) - 0.05,
minAzimuthAngle: (Math.PI / 2) - 0.02,
maxPolarAngle: (Math.PI / 2) - 0.07,
minAzimuthAngle: (Math.PI / 2) - 0.07,
})
const models_loading = ref(true)
const set_model_load_status = (status: boolean) => {
@ -54,42 +54,21 @@ watch(() => route.params.target, () => {
}
}, { deep: true })
import { useControls, TresLeches } from '@tresjs/leches'
import '@tresjs/leches/dist/style.css'
const tres_values = useControls({
focus: {
value: 150,
min: 0,
max: 200,
step: 1,
},
aperture: {
value: 15,
min: 1,
max: 100,
step: 1,
},
maxblur: {
value: 1,
min: 0,
max: 100,
step: 1,
},
})
const clearColor = 'steelBlue'
</script>
<template>
<div>
<div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
<TresCanvas window-size :alpha="false" power-preference="high-performance">
<TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="clearColor">
<TresPerspectiveCamera :position="cameraPosition" ref="camera" />
<OrbitControls v-bind="controlsState" @change="onChange" make-default />
<Suspense>
<LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
:tres_values="tres_values" />
<LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" :clear-color="clearColor" />
</Suspense>
<TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow name="ground" v-if="false">
<TresPlaneGeometry :args="[200, 200]" />
<TresShadowMaterial :opacity="0.2" />
<TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow>
<TresPlaneGeometry :args="[2000, 2000]" />
<!-- <TresShadowMaterial :opacity="0.2" /> -->
<TresMeshStandardMaterial :color="clearColor" />
</TresMesh>
</TresCanvas>
<div class="homelink">

29
front/src/components/Promo/post_pocessing.vue
View File

@ -8,12 +8,14 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { useTresContext, useLoop } from '@tresjs/core';
import { watch } from 'vue';
import { Fog, FogExp2 } from 'three';
const { renderer, camera, scene } = useTresContext()
const composer = new EffectComposer(renderer.value);
const props = defineProps(['tres_values', 'tiltShift'])
const props = defineProps(['tiltShift', 'clearColor'])
const k = { start: 0.25, end: 3 }
if (camera.value) {
const renderPass = new RenderPass(scene.value, camera.value);
@ -28,6 +30,9 @@ if (camera.value) {
composer.addPass(renderPass);
composer.addPass(bokehPass);
composer.addPass(outputPass);
// scene.value.fog = new FogExp2(0xff0000, 0.005)
scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
}
const { onAfterRender } = useLoop()
onAfterRender(() => {
@ -47,27 +52,9 @@ watch(props.tiltShift, () => {
composer.addPass(renderPass);
composer.addPass(bokehPass);
composer.addPass(outputPass);
scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
}
}, { deep: true })
// watch([
// props.tres_values.focus.value,
// props.tres_values.aperture.value,
// props.tres_values.maxblur.value
// ], () => {
// if (camera.value) {
// const args = {
// focus: props.tres_values.focus.value.value,
// aperture: props.tres_values.aperture.value.value * 0.00001,
// maxblur: props.tres_values.maxblur.value.value * 0.01
// }
// const bokehPass = new BokehPass(scene.value, camera.value, args);
// composer.passes = []
// const renderPass = new RenderPass(scene.value, camera.value);
// const outputPass = new OutputPass();
// composer.addPass(renderPass);
// composer.addPass(bokehPass);
// composer.addPass(outputPass);
// }
// }, { deep: true })
</script>
<template></template>