Solved: PickInfo Not Getting Hit When Embedded in Drupal

[touslecoq]

Hi all

I'm struggling to debug an issue with my babylon.js app when embedded in a Drupal page.  The click events are definitely registering (ie I can orbit that camera by click-dragging and have got it to write the co-ordinates scene.pointerX and scene.pointerY to the chrome console).  However for some reason when I click on a mesh (I've a load of boxes in the scene) pickInfo is not returning a hit and therefore not allowing me to drag the boxes around.

I have tried it just embedded in a standard non-drupal html page (with my babylon app in a separate .js file, and it works fine allowing me to click and move the meshes around.

I've tried tracing it through in Chrome Developer tools with breakpoints and it is just failing to register a hit.  Not sure where to go next ... has anyone seen this before?

Thanks

Rich

 

[touslecoq]

Ah right just noticed something ... if I click in blank space in certain places then the boxes are clicked.  So it looks like the co-ordinates are offset somehow when its embedded (ie I click in position coordinate 50,50 and the app thinks I've clicked at position 100,100 where the box is.  Any thoughts why this might be happening?

 

[touslecoq]

Fixed it.  I hadn't forced the canvas element width and height to 100% in the drupal version.  Added the following into a Drupal twig.  It should probably go in a CSS file but concept proven.

<style>
#renderCanvas {
width: 100%;
height: 100%;
}</style>