Jump to content

OnPointerOverTrigger shifted when canvas is on a <div>


rgalindox
 Share

Recommended Posts

Hi,

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:

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

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?

 

camera.html

cameraGood.html

Link to comment
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;

Link to comment
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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...