How can we make Three.js scenes use DOM-style coordinates?

Questions
, ,
4

Alright, I finally did it. Here’s what I was aiming for (see the HTML):

Notes

  • This is a simple demo to show that the “dom elements” intersect each other as well as with WebGL Meshes, and receive shadow and light.
    • Use case: mixing traditional web content with 3D content in an easy way (it’s simple HTML)
    • Try selecting the text, it’s regular HTML text.
    • The second square is contenteditable.
  • I had to figure out how to match Three.js coordinate space to CSS3D coordinate space:
  • Three’s Planes don’t cast shadows
  • Selective lighting is not yet implemented, so the lighting can’t be configured very easily to make the lighting look more realistic. Due to the way the transparent meshes aligned with the DOM render, the shadows and shine are not as pronounced as with other solid meshes. Selective lighting would allow me to easily adjust lighting to make the “mixed mode” effect look more real.
    • Example of inconsistent lighting that might be fixable with selective lighting: https://codepen.io/trusktr/pen/xpxBJe?editors=1010 (the shadow on the rotating plane is much lighter than on the background)
    • A workaround mentioned in that issue – of rendering two scenes – is completely non-ideal and creates unwanted complexity and unexpected rendering results.

@mrdoob What are your thoughts on a selective lighting solution and Planes being able to cast shadows? It would make my implementation a lot cleaner without having to twiddle with renderer settings, without unnecessary complexity, and without unexpected results and artefacts.

2 Likes