Search the Community

Hi All I have a 3D scene (a house) and I am wanting to navigate the scene using mouse inputs that similar to that used in other 3D CAD software applications. Specifically I am trying to acheive the following:- MIDDLE MOUSE BUTTON: PAN LEFT / RIGHT / UP / DOWN MIDDLE + RIGHT MOUSE BUTTON: ROTATE X/Y/Z MOUSE WHEEL: ZOOM IN / OUT Using the above controls you will see it is not possible to move/pan the camera position IN/OUT however it is possible to rotate, pan and zoom on the object of interest. Effectively the PAN mouse inputs will enable the focal point of the camera to be repositioned in 3D space, all ROTATE and ZOOM actions are performed around this 3D point. Hopefully the explanation of what I am trying to do is understable. I have tried using ArcRotateCamera (e.g.) var camera = new BABYLON.ArcRotateCamera("camera1", -90*Math.PI/180, -180*Math.PI/180, 100, new BABYLON.Vector3(0, 0, -0), scene); camera.lowerBetaLimit = -Math.PI; camera.upperBetaLimit = Math.PI; camera.allowUpsideDown = true; camera.checkCollisions = false; camera.panningSensibility = 20; This camera is a good starting point but it does not achieve my goal (as above) - i.e. panning and rotations do not work as I desire. I wanted to know if it was possible to override the inputs for a given instance of a camera (i.e. so I can remap the mouse inputs and override how rotations and panning is handled). However, I have not found a post that explains this ability. I am slowly coming to the conclusion that you have to create your own custom camera. I have read [ https://doc.babylonjs.com/tutorials/Customizing_Camera_Inputs#configure-your-inputs ] but it is not clear to me what I am supposed to do... I did a Frankenstien experiment (I literally created a monster) by creating a new custom input based off the "class FreeCameraMouseInput implements ICameraInput<FreeCamera>". To do this I did the following: (a) extracted the TypeScript code, (b) converted it to JavaScript, (c) referenced it as a new input for my camera - NOTE: I did not make any changes to the TypeScript file. Here is the result (see lines 9~10): http://www.babylonjs-playground.com/#1RGN1Y#2 The inputs seem to be working - but I am not sure what I am supposed to do next to configure the input configuration as defined at the beginning of this post. If you look at lines [ 101~103 ] you will see I added some logic to capture the mouse wheel event - but I do not know how to obtain the wheel delta (e.wheelDelta). I also do not know how to detect the middle + right mouse button press event... If anyone can guide me (or possibly tweak the playground code) I would very much appreciate. Thanks Rolento