solved OnPointerOverTrigger shifted when canvas is on a <div>

[rgalindox]

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

[Sebavan]

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;

[rgalindox]

Sebavan, you're a genious!!! you saved me ?

It works a charm!

Thanks for the prompt reply. I appreciate it a lot!

 

Rafael

[rgalindox]

By the way, I know this is another topic. How do you add 3d Text in Babylon? not as a GUI but as a mesh.

 

Thanks

[Guest]

here we are => 3D text: https://doc.babylonjs.com/extensions/mesh_writer_introduction