I need an orthographic camera with a custom input manager. It has to function similar to the orthographic view in blender, but I only need zoom and pan. I am new to both BabylonJS and JS/TS, so I have been struggling with pointer events. I have approached this in two ways, one is configuring custom controls for a FreeCamera, and the other is simply detachControl and handle pointer events(playground link for both is below). Issue is, I need this for a multiplatform app, so I need to handle touch input as wall, pan with two fingers and zoom on pinch. Please can anyone show me how can I achieve that. Preferably through custom inputs. I can only get it to zoom using custom controls.
Welcome aboard!
cc @PolygonalSun, the master of inputs!
The mousedown event does not fire, because preventDefaultOnPointerDown of Scene is enabled:
scene.preventDefaultOnPointerDown = false;
Also to support touch input you need pointer events i.e. pointerdown, pointermove, pointerup.
To zoom on pinch I would use gestureend event:
element.addEventListener('gestureend', function(event) {
if (event.scale < 1.0) {
// User moved fingers closer together
} else if (event.scale > 1.0) {
// User moved fingers further apart
}
}, false);
1 Like
Thank you! This really explains a lot
It’s still not responsive on a touch screen
Hello!
Somthing like this? Works with mouse and touch as well.
More info on camera inputs:
1 Like
wrong playground, but it’s still the same https://playground.babylonjs.com/#D6ZDDX#5
The “gestureend” event listener does nothing
Hi! Yes, this takes care of most use cases with some tweaks. Thanks you
1 Like
You’re welcome!
https://forum.babylonjs.com/t/creating-a-custom-orthographic-camera/42226/6?u=qq2315137135
As he said ,you should use the pointer event, not the mouse event
For example, pointerdown, pointermove, instead of mousedown, mouseup
This pg should work
Guys, if you really want to bypass the BabylonJS camera controls and you want to implement yours from scratch I highly recommend HammerJS for the inputs.
I implemented a Google Maps style camera using it. Here is a demo video. (red dot - pointer finger, blue - thumb)
1 Like