Creating a custom orthographic camera

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.

Custom Input Playground

Detach Control Playground

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


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
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!

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

gestureend compatibility is poor

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)