Mouse/touch events in html construct - best practice?

he guys,

i’m working on a client project where we want to use a playcanvas scene within a onescroll html construct (iframe). the scene is a product rotator with mouse/touch dragrotate. this seemingly interferes with -/overrides capturing of events. this leads to not being able to scroll in different usecases (especially considering touch). i’ve learned that it is possible to start/stop event propagation and that there are several ways to have the html communicate with playcanvas. so i’m kinda looking for a recommendation what a best practice in this case would be. i guess that this might be a common problem so appologies if this is a doubled/trippled/quadrupled thread.

Hi @rtz23,

So, if you have HTML elements on top of the canvas and you would like to stop it from obstructing input events on PlayCanvas canvas element, you can do so using a CSS rule on each element:

pointer-events: none;

That will disable input on that element.

For communicating between the parent website and the iframed Playcanvas instance the best practice is using the browser postMessage API:


he … thanks for quick reply. we’ve come this far. but we need the mouse events working for the drag rotate as soon as the user wants to play with the pc scene. if we activate propagation by a click we won’t be able to scroll anymore afterwards. maybe i should have mentioned that the playcanvas scene fills almost the complete visible area (full width). so as soon as pc starts to track mousevents we can’t leave the module anymore.

best solution would be if we were able to keeep the mousewheel from being tracked by playcanvas leaving it to the html (i suppose this won’t be possible though) …
second best - passing the mouse events from the html to pc (sounds kinda wonky to me) …

btw - we’ve bought your ERMIS post effects for this. originally wanted to use the dof (which i couldn’t get the desired results with) but ended up with having some chromatic abberation as a little glitch effect. i’ll show you the result when finished.

So, thinking now:

  • If you don’t add any on mousewheel event callback on the PlayCanvas side
  • If the PlayCanvas canvas element is properly resized, no scroll required to full view it
  • Then any HTML element on top of the canvas that requires scrolling will properly catch the mouse wheel and do the drag.

At least that’s what I think, sorry for not being more of help. If you have a project to share to take a look I may be able to help more.

Many thanks, very curious to see the result!

1 Like


it seems that just removing the eventlistener for the mousewheel does the trick. so obviously mouse event tracking does only interfere if the same events are subscribed by html and pc. so actually no real problem :frowning: … but thanks again anyways :wink:

1 Like