How to add mouse move and wheel zoom for UniversalCamera

Questions
1

hello everyone . I am changing ArcRotateCamera in my code to UniversalCamera. After changing
, I lost the mouse’s scrolling, zooming and right-click panning functions … how to slove it ？

2

They are not the same type of cameras, one is more a FPS kind of camera (universal one) whereas the other one is more like an Orbit around kind (Arc Rotate).

I am wondering what your use case is to require the functionalities your listing on a universal one which more adapted with keyboard navigation ?

3

My model is a community， I hope the camera can freely shuttle through the scene And users can freely complete this series of operations through the mouse. Arcrotatecamera can complete most requirements. But the zoom slows as it approaches the target center object… So i want to change
UniversalCamera

4

If it is the only reason, switching to another camera type is definitely not the right approach. You could have a look at the different configuration of the ArcRotateCamera instead using for instance wheelDeltaPercentage ?

@PolygonalSun is the king of our cameras and inputs and might be able to help.

5

I agree with @sebavan that if the ArcRotateCamera is doing everything that you need, except for Wheel Zooming, it’d be better to stick with that camera and modify the wheel behavior.

For our wheel zoom, we take the delta value from the mouse wheel and after some calculations, add it to the camera’s inertialRadiusOffset. Because of this, you’ll always have an inertial drop-off as you approach your end of movement. One approach that I could recommend would be to remove the mouse wheel input object from your camera (eg camera.inputs.removeByType("ArcRotateCameraMouseWheelInput");) and create your own input object that directly modifies the radius.

Another simpler approach would be to remove the mouse wheel like the previous option but just change the radius inside of onPointerObservable observer:

camera.inputs.removeByType("ArcRotateCameraMouseWheelInput");
scene.onPointerObservable.add((eventData) => {
    const evt = eventData.event;
    const radChange = evt.deltaY > 0 ? 0.1 : - 0.1;
    camera.radius += radChange;
}, BABYLON.PointerEventTypes.POINTERWHEEL);

This is one approach and may require some amount of smoothing (with Scalar.Lerp) depending on how much polish you want but this should at least get you started.

2 Likes
6

Thanks , It helps me.