check boke

This commit is contained in:
Kseninia Mikhaylova 2024-07-25 12:38:29 +03:00
parent 2cd417c762
commit 8dc0d64010
2 changed files with 27 additions and 15 deletions

View File

@ -58,22 +58,22 @@ import { useControls, TresLeches } from '@tresjs/leches'
import '@tresjs/leches/dist/style.css'
const tres_values = useControls({
focus: {
value: 96,
value: 150,
min: 0,
max: 1000,
max: 200,
step: 1,
},
aperture: {
value: 0.01,
min: 0.01,
max: 0.1,
step: 0.001,
value: 15,
min: 1,
max: 100,
step: 1,
},
maxblur: {
value: 87,
value: 1,
min: 0,
max: 100,
step: 0.01,
step: 1,
},
})
</script>
@ -85,7 +85,8 @@ const tres_values = useControls({
<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"
:tres_values="tres_values" />
</Suspense>
<TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow name="ground" v-if="false">
<TresPlaneGeometry :args="[200, 200]" />

View File

@ -21,8 +21,8 @@ if (camera.value) {
const bokehPass = new BokehPass(scene.value, camera.value, {
focus: props.tres_values.focus.value.value,
aperture: props.tres_values.aperture.value.value,
maxblur: props.tres_values.maxblur.value.value
aperture: props.tres_values.aperture.value.value * 0.00001,
maxblur: props.tres_values.maxblur.value.value * 0.01
});
const outputPass = new OutputPass();
@ -32,7 +32,7 @@ if (camera.value) {
}
const { onAfterRender } = useLoop()
onAfterRender(() => {
composer.render(0.1)
composer.render()
})
watch([
props.tres_values.focus.value,
@ -40,12 +40,23 @@ watch([
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
}
console.log(args)
const bokehPass = new BokehPass(scene.value, camera.value, {
focus: props.tres_values.focus.value.value,
aperture: props.tres_values.aperture.value.value,
maxblur: props.tres_values.maxblur.value.value
aperture: props.tres_values.aperture.value.value * 0.00001,
maxblur: props.tres_values.maxblur.value.value * 0.01
});
composer.passes[1] = bokehPass;
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>