Here’s a pen with some Shadows:
It’s written with HTML, but behind the scenes it’s using Three.js.
On line 5, the shadow properties can be tweaked, where
light.threeObject3d is… you guessed it… a
I can’t seem to find the right setting (f.e. bias, etc) to remove the ACNE while not messing up the button shadows (either the shadow is too dim, or the light blends into the shadow).
You can see the ACNE if you look on desktop, maximize the window, then you’ll see the ACNE lines on the background (it’s not super obvious, but it’s not smooth either).
What magical setting might do the trick?
Every DOM element (i-scene, i-mesh, i-light, etc) has a property called
threeObject3dwhich is a reference to the underlying Three.js object, so you can query any node, then access the scene objects that way. I haven’t exposed all the properties via HTML attributes yet.
For example, on line 69 I am modifying the material opacities after querying the elements from the DOM.
Let me know if you have any questions about which internals to access, and I can let you know how.
Any time you move the mouse, internally that triggers an animation frame and a