I made a simple example that shows drawing a DOM element at the screen position of an object. This could be useful for tooltips, for example. Drag the camera to move the red cube and the pink <div> will move accordingly. (Pardon the other stuff also happening in the example):
Yes, but I also want to render labels with WebGL (not shown in the above demo).
That’d be cool, not sure if that’s what you meant but it would be nice if we could do the other way around. A completely normal web app and a tooltip in 3D, or a special button class that gives it 3D capabilities for light, shadow and effects.
That’s not what I meant in the above post, but I’ve also been working on that! Here is, for example, a demo of exactly what you described, standard HTML <button> elements with light and shadow:
https://lume.io/docs/#/examples/buttons-with-shadow
Right click then inspect the elements to see what it looks like.
It’s a WIP! New demos coming soon!
2 Likes
The link you attached looks already cool. In order not to deviate this threrad’s topic, I only post a link here and not attach the gif, let me know if you dedicate a post to that.
In short, you can see in this link how the mouse interacts with SVG filters of light and shadow, I expect such effects to be easier in the future with real 3D API yet simple web components interface :
1 Like
Cool project! Fun physics there!
That’s exactly what that demo does, real 3D shadow. EDIT: Oh, I see you already mentioned it in the README. 
Try adding the following code at the top of the mounted method:
mounted: function() {
const node = document.querySelector('#button-container i-dom-plane')
node.rotation = [40, 30]
then move the mouse or click the button (and check the DOM).
1 Like
@wassfila
Oh, I see you mentioned it in the README! Maybe I can help make that concept with the 3D effect.
I’ll be very glad to.
I even started two projects on that github organization, one for 2D and one for 3D based on three.js. But I leaned a lot more about web dev since, and the graph2D got completely refactored into that graphysics. Integration in graphysics is not that easy as it’s based on SVG elements not html elements. But graphysics together with graph3D might get both refactored on a next gen engine that includes 3D effects, but that’s mid term Months planning, the week planning is still focus on graph functionalities.
I appreciate any sorts of help, review. I guess with generic 3D web effects any webapp is a potential customer and not only graph webapps.
@wassfila I’m planning to circle back to that idea on graphysics soon…
Oh by the way, regarding your first comment above about putting 3D content on regular DOM, I also made a simple example of the technique in this pen (without my Lume lib, just plain Three.js and DOM):
1 Like
I’m very impressed I must say, who knows maybe this will be soon part of the web standard supported by default.
The current css 3d effects are too much abtracted, easier to use if you don’t need a specific case, otherwise if you do, I think it becomes easier to define 3d properties than try to fake them with 2d effects.
1 Like