When hovering over my three js canvas the mouse wheel leads to zooming in and out of the camera. I have defined a minimum and maximum distance for the camera to zoom therefore it stops zooming at a point like it should.
But can I switch to scrolling the page when this point is reached?
This would be helpful for usability because if you want to scroll the page you’d have to move your cursor out of the three js canvas. I hope I explained my question well enough.
Are you talking about OrbitControls or a different control class (e.g. TrackballControls)?
yeah I’m using OrbitControls
You have to modify OrbitControls to achieve your intended behavior. Maybe you can do it like this (you have to scroll to see the canvas^^): https://jsfiddle.net/f2Lommf5/14601/
The following code snippet is added to onMouseWheel(). The idea is to perform an early out if you know that the controls already reached the bounds (min/max) and an additional translation would have no effect. In this case, we call return because we don’t want to execute the subsequent event.preventDefault() (which effectively prevents scrolling).
if ( ( spherical.radius === scope.minDistance && event.deltaY < 0 ) ||
( spherical.radius === scope.maxDistance && event.deltaY > 0 ) ) {
return;
}
Thanks man this is exactly what I was thinking about! ^^