Move DOM objects position relative to 3D Objects

Recommended Posts


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?

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.