check boke
This commit is contained in:
parent
2cd417c762
commit
8dc0d64010
|
@ -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]" />
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue