Propagating mousewheel event to parent?

[0l4f]

Hello there!

On my portfolio website, I'm using a Babylon scene as a splash page: https://rocketclowns.com/

When the user hovers their mouse over the Babylon scene, mousewheel events don't reach the parent, so users can't use their mouse to scroll down.

Is there a way to propagate the mousewheel events to restore normal scrolling behaviour on the page?

 

Many thanks in advance

[Wingnut]

Wow, what a beautiful scene!!!  OMG!  Fantastic!

I don't have any mouse wheel solutions quite yet, but I might go hacking on camera.inputs.

Man, is that scene nice.  (drooooool)

Update:  Goofy test scene.  http://playground.babylonjs.com/#6FHKHC

A FreeCamera doesn't normally HAVE a mouseWheel observer, so I decided to hijack BABYLON.FreeCameraMouseInput.prototype.attachControl() and bring it into a playground.  The scene ONLY dumps mousewheel event-reports... to console, via line 63 area.  I don't know if this can be helpful AT ALL, but I wanted to goof around. 

In line 64 area, perhaps a guy could harvest the mouseWheel event just like arcRotateCam does...

      var event = p.event;
      var delta = 0;
      if (event.wheelDelta) {
          delta = event.wheelDelta / (_this.wheelPrecision * 40);
      }
      else if (event.detail) {
          delta = -event.detail / _this.wheelPrecision;
      }
      if (delta)
          _this.camera.inertialRadiusOffset += delta;  // perhaps remove this line, and hack here.
      if (event.preventDefault) {
          if (!noPreventDefault) {
              event.preventDefault();
          }
      }

Perhaps do some forcing.    Those bottom 5 lines look interesting.

[mr_pinc]

Can you capture the mousewheel events from the canvas object then dispatch via the document object?  

[sable]

Hi there. Just did a similar test to Wingy, and looks like babylon doesn't block the events, http://www.babylonjs-playground.com/#C3ZPAS.

Looking at your page source, I think the issue is that the scene is embedded in an iframe. You should be able to send the event (or a message) from the iframe to the parent either via window.parent or window.Postmessage

[GameMonetize]

This is really beautiful  do you want to be highlighted on www.babylonjs.com?

[0l4f]

Hey guys, thanks for the awesome feedback 

@Deltakosh I'd be honoured to be highlighted on babylonjs.com with this scene! Maybe also as a demo for your awesome positional audio API  ? Maybe you'd like to link to the source page here:

https://www.rocketclowns.com/canvas/BabylonSteps/

 

So far, I haven't been able to solve this puzzle. Setting 

pointer-events: none;

on the iframe CSS works - page scrolling behaves as expected - but disables all pointer events 

 

Right now, I'm looking into re-dispatching the mousewheel event from the iframe, but haven't been successful yet. Something along these lines:

function bindIFrameMousemWheel(){
   	document.getElementById("animationframe").addEventListener("mousewheel", mouseWheelHandler, false);
	// Firefox
	document.getElementById("animationframe").addEventListener("DOMMouseScroll", mouseWheelHandler, false);
}

bindIFrameMousemWheel();


function mouseWheelHandler(e){
	// cross-browser wheel event
	var e = window.event || e; // old IE support
	document.getElementById("animationframe").dispatchEvent(e);
}

 

Thanks again for the compliments and pointers !

[GameMonetize]

do you mind giving me a 800x500 screenshots + title + author?

 

thanks!

[sable]

In your init function (in the iframe, main.js) you should be able to send a message to the parent page, something like

window.addEventListener("wheel", (e) => {
    window.parent.postMessage(e, "*");
});

and receive it there with something like this in your main page js

window.addEventListener("message", (e) => {
    //do something with the event
});