trois
trois copied to clipboard
troisjs
Add postprocessing
React Three Fiber includes easy ways to implement postprocessing - I'd like to see how straightforward it would be to create a custom effect pass in the EffectComposer using these methods. Will self-assign and keep this thread updated!
Update - this is going well so far, I was able to implement a couple postprocessing effects successfully and am working on some different scenarios to make sure things are working well. PR hopefully by the start of next week!
@klevron While working on this, I'm finding that it'd be useful to run three.init in the Renderer's setup function rather than mounted. There are a few questions I haven't solved yet, like getting info from child components, but before I get too far into those I want to make sure this isn't a path you've already decided against. Let me know if that's the case or if you have any other thoughts on that direction - thanks!
We need a canvas element to init WebGLRenderer, that's why it is done in mounted(). Could you use three.onAfterInit() (this will maybe moved to renderer comp soon) ? What kind of child elements do you need access to ?
onAfterInit is a good thought, I'll try that! I needed access to the scene and camera since trying to do three.init in setup was throwing "Missing Scene" and "Missing Camera" errors, but this should be a good fix for now. Thanks!
Made a branch : https://github.com/troisjs/trois/tree/vanruesc/postprocessing
PR : #53
This is fantastic! I've been very busy lately but will definitely take a look when I get a moment again - thanks for digging into this @klevron !
Example of dof effect, already tried last year but it's easier with troisjs :)
