OrbitControl embeded conflict with scroll on page

p5.js Coding Questions
1

Hello,

I’m working on that project : https://sophie1000.com/F360D/F360D/index.html
Each 3D object is in a canvas with OrbitControl, then embedded in iframe.
On the global page, there is a horizontal scroll that works only when the mouse isn’t over the canvas.
That’s the problem: I would like the MouseWheel scroll to works whoever the mouse is located on the page.

I have tried to disable the mouseWheel (https://p5js.org/reference/#/p5/mouseWheel) on my canvas but it still doesn’t work.

The only thing that works is to set :

iframe {
pointer-events : none;
}

But then we can’t manipulate the object anymore, so that’s not the solution I need.
I’ve also tried that as well :

iframe {
overflow : hidden; 
}

and nop, it doesn’t work.

Any idea?

Thank you for reading!

2

hi! welcome to the forum!

maybe preventDefault() would be the solution?

It is a nice design but I found that you are using many canvases in one page, and that makes it very slow (I couldn’t load it on my laptop). Perhaps you need to reduce the number of pages, or you need to disable the canvases when they are not shown - but I think this is not a trivial problem to solve :thinking:

1 Like
3

Hi Micuat,

Sorry for the late answer, I had to work on something else!
I tried to add :
this.canvas.addEventListener('wheel',function(event){ mouseController.wheel(event); event.preventDefault(); }, false);

It works! I just need to figure out how it could work perfectly with Instance Mode,
because as you said: There was too much canvas so I decided to change that. Thank you a lot for that feedback :slight_smile:

1 Like