3 ms·
Oh hey, I made this a couple of days ago! I initially made this to experiment with 'faking' depth of field in CSS (check out my penultimate tweet for the demo
by probabletrain 2y ago
Oh hey, I made this a couple of days ago!
I initially made this to experiment with 'faking' depth of field in CSS (check out my penultimate tweet for the demo vid and inspiration from shuding_, link at the bottom of the site).
But last night I remembered that ThreeJS exists, so rewrote it using react-three-fiber. This was my first time playing around with it and I'm super impressed, it's incredibly ergonomic.
Edit: not documented, but right-click drag to pan
- mistersquid 2y agoLove the interactivity of the UI. Nicely done! > Edit: not documented, but right-click drag to pan Confirming undocumented feature. Scratching my head why ctrl-left-click on macOS doesn't enable panning, too.
- lupusreal 2y agoRight-click to pan is how a lot of video games do it, if not left-click drags. Needing to also use a keyboard key at the same time wouldn't very ergonomic.
- mistersquid 2y ago> Needing to also use a keyboard key at the same time wouldn't very ergonomic. Agreed. But maybe better awkward than non-existent? Otherwise, users with no right-click can’t pan. Didn’t realize ctrl-click and right-click are not always functional equivalents.
- smegsicle 2y ago> users with no right-click "here's a nickle, kid. buy yourself a better computer."
- javierbyte 2y agoVery cool! I also made a CSS based fake depth of field inspired by Shuding :) https://depth-of-field.vercel.app/ https://depth-of-field.vercel.app/