Customising camera doesn't seem to work for me

Questions
,
1

Hi, I am new to babylon and am using the ArcRotateCamera in react. It’s functionality seems fine but I need to write my own custom inputs to switch modes from panning mode to rotate mode to zoom mode using buttons on the screen. I have a zoom bar to control the zooming. I have created a class for input controls with methods as instructed in the documentation but nothing seems to work when I try moving my mouse around the canvas.

Here is how I am trying to attach the controls.

const cam = this._scene.activeCamera
cam.attachControl(this._canvas)
cam.inputs.clear()
cam.inputs.add(new CameraInput(this.store))
cam.inputs.add(new ArcRotateCameraMouseWheelInput())
cam.inputs.attachInput(camera.inputs.attached.pointers)
cam.inputs.attachInput(camera.inputs.attached.mousewheel)
2

Hi @DANIEL_S and welcome to the forum. It would be much easier for someone to help you if you could produce a playground to show what you have done. In the custom camera docs you will find a playground example for a universal camera. If you create something similar for your custom inputs to an arc rotate camera we can check it out.

1 Like
3

Here’s a link to the playground https://playground.babylonjs.com/#FLJF71#1

4

The DOM events seem to be blocked when I use the canvas, I can only rotate model if I start mouse movements away from the canvas.

5

I have figured out how to make it work. I have used the pointer observable instead of adding events to the DOM directly.

scene.onPointerObservable.add((pointerInfo) => {
            switch (pointerInfo.type) {
                case BABYLON.PointerEventTypes.POINTERDOWN:
                    this.handleMouseDown(pointerInfo.event)
                    break
                case BABYLON.PointerEventTypes.POINTERUP:
                    this.handleMouseUp(pointerInfo.event)
                    break
                case BABYLON.PointerEventTypes.POINTERMOVE:
                    this.handleMouseMove(pointerInfo.event)
                    break
                case BABYLON.PointerEventTypes.POINTERWHEEL:
                    console.log('POINTER WHEEL')
                    break
                case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
                    console.log('POINTER DOUBLE-TAP')
                    break
                default:
                    break
            }
 })
3 Likes