I’m currently working on a project using Babylon.js and have encountered a specific requirement for which I need some guidance. In my scene, the <canvas> element used for rendering is covered by another div element, and due to special reasons, setting click-through for this div is not an option. I want to change the default behavior of camera controls so that they respond to events on this div element instead of directly on the <canvas> . This includes mouse movements and clicks for camera angle changes and other interactions that would normally be applied to the canvas. Since this div completely covers the canvas and matches its size, I’m looking to shift all event listening from the canvas to this div.
I do not think you can anymore as there was way too many issues with fullscreen, computing css offsets and other transformations.
cc @PolygonalSun to confirm ?
Just off of the top of my head, I can’t think of any easy way to do this outside of either creating a new event, using the properties from the original event handled by the div, and dispatching it to the canvas. Either that or you could try adding event listeners to the div that modify the values of the camera’s movement/rotation properties directly. This, of course, assumes that the div is exactly the same size.
The task does not involve CSS computation but simply involves transferring all event listeners originally attached to the canvas to another DOM element. This element is positioned to exactly match the canvas in terms of size and location, is transparent, and is layered on top of the canvas. This DOM element has additional functionalities, making it impractical to set it to allow click-throughs.