63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
|
|
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
|
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
|
|
|
|
import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
|
|
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
|
|
|
|
import { useTresContext, useLoop } from '@tresjs/core';
|
|
import { useControls } from '@tresjs/leches'
|
|
import { watch } from 'vue';
|
|
|
|
const { renderer, camera, scene } = useTresContext()
|
|
|
|
const composer = new EffectComposer(renderer.value);
|
|
|
|
const props = defineProps(['tres_values'])
|
|
|
|
if (camera.value) {
|
|
const renderPass = new RenderPass(scene.value, camera.value);
|
|
|
|
const bokehPass = new BokehPass(scene.value, camera.value, {
|
|
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 outputPass = new OutputPass();
|
|
composer.addPass(renderPass);
|
|
composer.addPass(bokehPass);
|
|
composer.addPass(outputPass);
|
|
}
|
|
const { onAfterRender } = useLoop()
|
|
onAfterRender(() => {
|
|
composer.render()
|
|
})
|
|
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
|
|
}
|
|
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 * 0.00001,
|
|
maxblur: props.tres_values.maxblur.value.value * 0.01
|
|
});
|
|
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> |