I put this playground inside a web page, I found when I reach the radius limit, it automatically scrolls down or scrolls up instead of stuck in the scene, what value do I need to set to achieve this? Like the overscroll-behavior - CSS: Cascading Style Sheets | MDN (mozilla.org) Thanks!
I tried add overscroll-behavior: auto css to the canvas, this does not do anything.
I also tried scene.detachControl() when reach the radius limit, which would do similar behavior like overscroll-behavior: auto, but I’m not sure what should I do when I hover back it should still can interact with the scene. In playground’s scene, it just do this without any additional setting
If you pass false when attaching the camera controls does it prevent the page scrolling for you? That way preventDefault is called… It fixed it in a quick test I just did at least.
Adding false as the value for noPreventDefault in camera.attachControl should prevent input events from bubbling up to the window and potentially prevent scrolling. Failing that, you could also add scrolling="no" to the iframe tag.
But the thing I’m trying to achieve is when the radius reach the upperlimit, it should scroll down to the page, when the radius reach the lowerlimit, it should scroll up to the page, not stuck in the scene, kind of like overscroll-behavior - CSS: Cascading Style Sheets | MDN (mozilla.org) in css, is this possible?
I tried do it using css when radius reach the limit, I set something like pointer-events to the canvas, or make scene.detachControl(), it did work as I need, but get a problem, when I hover back, I can’t interact with the scene anymore… I need when it hover back, the scene should still work as before
Thank you @PolygonalSun, but I added scrolling="no" it seems not work for me, also update my playground using `scrolling=“no” above, I’m using window edge
And the thing I’m trying to achieve is when the radius reach the upperlimit, it should scroll down to the page, when the radius reach the lowerlimit, it should scroll up to the page, not stuck in the scene, kind of like over scroll in css, please see more detail for reply above Scenes over scroll when reach the radius limit - #10 by pigga
Hmm that could get a bit tricky. You could try after detaching the camera controls to listen for the canvas’s “pointermove”, etc events to know when to re-attach the controls.
But a complication with that is the camera’s radius is still at the limit so then the camera controls will be detached again right away…
You could try changing the radius by a small, imperceptible amount so that it’s not at the limit anymore but then a tiny bit of zooming in that direction will disable the controls again.
So not sure what direction you’ll want to take your interface then but below is an example of doing it that way on “pointermove”, “pointerdown”, and “pointerenter" events. Hope it helps.