Math visualisation for an upcoming installation I'm working on.

Compute the shortest distance between a 2D point and a curved path made of two segments and a quadratic bezier curve then project the point on path with linear interpolation.

#madewithfragment

Less than 12 hours left to get access to ThreeTools beta, a Chrome extension to inspect and tweak any @threejs.org website in realtime in the browser.

→ three.tools

I added support for @threejs.org Lights and Cameras to ThreeTools over the last weeks, available now for all beta users!

It means you can now tweak your lights in realtime to make your scene look even better ✨

three.tools

Props groups 🖖

Props can also be organised with groups! Groups are subsets of props that can be displayed in different modules.

props.color.group = "cubes";

Thanks to this, you can organise the layout to better reflect your workflow by having props wherever you want them to be.

Demo ⬇️

Props folders 🗄️

After many unsuccessful attempts in the past years, I finally managed to make folders work as I wanted, thanks to @svelte.dev runes and snippets!

props.color.folder = "materials";

And it's fully reactive like any other props attributes!

Docs: github.com/raphaelameau...

Reactive props ⚡

Props are now reactive by default!

You can update a prop value in your code and the UI will react accordingly. And it works with any prop attributes!

This brings a whole new dimension to Fragment as you can also create props on the fly and build reactive interfaces!

Demo ⬇️

Props persistence 💫

Props values are now persisted across refreshes through local storage. They will only get overridden if you change their initial values in the code.