I understand how to get the zoom working (although I cannot set wheelPrecision??). I presume that to implement PAN correctly, I need to intercept the onPointerDown and onPointerMove and move the camera position but it there a better way? I also need to use these events to call scene.pick to grab meshes in the scene.
Also, I want to stop the rotation because I want a pure Orthographic view. Is there a simple way to stop the rotation?
You could try setting angularSensibility to infinity but I guess here the best would be to customize the camera/inputs to your own needs.
Adding @PolygonalSun who is currently working on inputs and might provide more guidance. As this is thanksgiving week, there might be a slight delay in his answers.
Since the mouse wheel input is handled separately from general mouse input, you could always try just removing the mouse input and then adding the wheel input:
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
camera.inputs.removeByType("FreeCameraMouseInput");
// You can also use camera.inputs.removeMouse();
camera.inputs.addMouseWheel();
From there, you can either manually handle the events or create a custom camera input. That’s where I’d recommend starting.
As for setting wheelPrecision, you can set each of the axes separately like this:
var mouseWheelInput = camera.inputs.attached["mousewheel"];
// Default is 3. If the number is negative, it should reverse the direction
mouseWheelInput.wheelPrecisionY = 10;
You can access the other axes by just changing Y to X or Z but for almost all cases, you should only need to change wheelPrecisionY. Lemme know how this works for you.
I don’t want to remove the mouse input because I want to orthographic pan with the right button and be able to select meshes in the scene and move them with the left button (and not rotate the camera).
What would be best is for some way to stop the standard rotation/pan from happening. I saw onBeforeCameraRenderObservable and wonder if this is a function that is called before rotate/pan is performed and if there is a way I can stop the standard behavior? Or some other method.
With threejs, using an Orthographic camara with Orbit controls does just this. The application I have written in threejs is a configurator that allows you to design in Orthographic mode (see Edströms Configurator (jamtsoft.com) and when you see the perspective view, click on Views and select Configure).
Sorry about the delay in response. Removing the mouse control from the camera just removes the default rotation behavior. You should still be able to set up a custom option for how you want to handle the panning and mesh movement. Here’s a slight modification of your first PG with the custom panning code: Orthographic Zoom | Babylon.js Playground
Another option would be to try combining what @sebavan said about setting the angularSensibility to Infinity and using something like an ArcRotateCamera, with its built-in panning. It will require a bit of tweaking but this could work. Here’s an example that demonstrates this. Using PointerInfo, you can pick meshes and if you access the event variable of a PointerInfo object, you can get the specific mouse button (check Line 114 of the PG) presses (0 for left, 2 for right).
As for OnBeforeRenderObservable, I believe that it’s called after all camera inputs (eg. rotate or pan) are checked.