OnPointerOverTrigger shifted when canvas is on a <div>

Recommended Posts


Hope I'm clear with my explanation:

I have a Babylon scene and when it is alone (no other div on the html that has the canvas) the OnPointerOverTrigger works perfectly.

However, when I put the canvas inside a <div> the OnPointerOverTrigger seems shifted, I mean, when I hover over the mouse over the mesh the action starts outside the mesh.

I need the scene to be inside a div as I'm using w2ui as the GUI interface of the application.

Attached one example: camera.html and cameraGood.html

camera.html is the one with the issue, it only adds these lines:

<canvas id="renderCanvas" touch-action="none"></canvas>

cameraGood.html has no divs

<canvas id="renderCanvas" touch-action="none"></canvas>

I create a sphere every time  you click on the surface. Without the div it works great, but when I add a div for a title and another for the canvas it fails, it picks another position.

It seems the mouse coordinates are being used for the complete web browser and not the canvas.

Any recommendation?




Share this post

Link to post
Share on other sites

This is normal as the value you use are from the start of the screen not canvas position.

Replace your code :

pickInfo = scene.pick(evt.clientX, evt.clientY);

By :

pickInfo = scene.pick(scene.pointerX, scene.pointerY);

Which contains the offset translation computed as :

pointerX = evt.clientX - canvasRect.left;

pointerY = evt.clientY - canvasRect.right;

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.