Move DOM objects position relative to 3D Objects

[MichaelD]

Hello,

I have some UI elements on the DOM that I want to move relative to the 3D objects, I searched this forum and generally and the best I could find was:

scene.afterRender = function() {
        var worldMatrix = planet2.getWorldMatrix();
        var transformMatrix = scene.getTransformMatrix(true);
        var position = planet2.position;
        var viewport = scene.activeCamera.viewport;
        var coordinates = BABYLON.Vector3.Project(position, worldMatrix, transformMatrix, viewport);
        console.log(coordinates, window.innerWidth * coordinates.x);
    };

 but unfortunately the coordinates keep changing because the object is rotating, so is there another way to track the object absolute position and convert that to screen position so I can use it the the `window` gets resized or when the camera changes angle?

[NasimiAsl]

that not be complete yet

[JohnK]

An alternative might be to use Babylon.GUI using the `CreateForMesh` and `LinkWithMesh` methods, all depends on what you want to achieve.

[Pryme8]

Do what @JohnK said.

unless it has to be some fancy DOM element.
http://www.html5gamedevs.com/topic/14637-translating-a-meshs-vertices-to-screen-coords/

[d13]

18 hours ago, Pryme8 said:

unless it has to be some fancy DOM element.

... or you're required to meet the W3C Web Content Accessibility Guidelines (https://www.w3.org/WAI/intro/wcag)

[MichaelD]

To be honest I'm not trying to insert DOM elements inside the canvas. I'm trying to determine a mesh position (in pixels) and its size (in pixels) again. But it is difficult because a) the mesh is rotating and many values change, b ) On window resize the sphere gets scaled up/down and cannot find a good way of determining its size when that happens.

The site is a mix of simple HTML elements and Babylonjs

[Pryme8]

I was experimenting with turning html elements into svg's and pushing that to a dynamic texture. Ill link you to that when I get a chance.

If you combine that with the GUI system you will hit your mark.

[MichaelD]

hm not exactly what I'm after, I'm looking to keep both canvas (for 3D) and plain HTML on the same page, I just need a way to properly read 3D objects sizes and positions according to screen.

Something like what is doing here: http://www.space-advisor.ca/en/?experience

[Pryme8]

Ill make an example here...

http://www.babylonjs-playground.com/#ZG6PU7

I did not do the offsets, but yeah...

[MichaelD]

Thanks this is where I have reached also, but the offsets are giving me trouble, especially when the window resizes, I tried multiplying with a percentage but still its not perfect, on extreme scaling it goes way off.

[Pryme8]

that just offset stuff... super easy, https://stackoverflow.com/questions/442404/retrieve-the-position-x-y-of-an-html-element

And if its a full page canvas should not even be an issue.