Babylon in Mapbox Layer

I would like to make the same as this example with Three.js but with a Babylon renderer instead :p…

It works but I think BABYLON is still handling touch events (scrolling zoom works) :

Edit BABYLON
(I can’t make a Playground because 3D context is provided by mapbox)

 onAdd: function(map, gl) {
            this.engine = new BABYLON.Engine(gl, true, {
                doNotHandleTouchAction : true,
                preserveDrawingBuffer : true,
            });
            this.scene = this._createScene();
            this.scene.autoClear = false;
            this.map = map;
        },
render: function(gl, matrix) { 
             this.scene.render();
             this.engine.wipeCaches(true);
             this.map.triggerRepaint();
        }

just make sure to call scene.detach() and you should be fine :wink:

1 Like

YEAH :raised_hands: :champagne:

Scene.detachControl()

CodeSandbox updated

2 Likes

@sharp If you don’t mind, could you please share the CodeSandBox again? I can’t seem to open it on my end, it errors out saying reached 10 MB limit. Thanks!

Hi,

I will release a full featured Babylon Mapbox Layer next week so be patient it will be a much better option than the old Sandbox :smiley:

2 Likes

The full featured repo is not yet ready and I will be in holiday tonight so I made a minimal jsFiddle :
https://jsfiddle.net/fabsharp/w3dephvm/

It is the same example as in the mapbox-gl doc but with babylon instead of three.

3 Likes

That deserves a page in the doc!

1 Like