How do you integrate Signed Distance Fields (SDF) into a basic three.js scene?

That was pure fun to make this. :sweat_smile:

Video:

Demo: https://codepen.io/prisoner849/full/vEYYPwz

Boxes are usual meshes. The reflective blob is three SDF spheres, drawn on the box’s surface (used a wireframe helper to show its limits)

4 Likes