Add 3d(2d) object on map mapbox Gl using three.js or p5.js

Question

As I understand I have to use one canvas for both mapbox Gl and p5. But how to do this? And what if I have p5 animation will it overwrite the canvas with map? Any example or hint? Thanks. My code, but nothing serious

mapboxgl.accessToken = 'pk.***';
var mapGL = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-120.36603539685188, 50.68667605749022],
    zoom: 11.6
});

var mainCanvas;
function setup() {
    mainCanvas = createCanvas(720, 400, WEBGL);
}

function draw() {
    background(102);
    rotate(frameCount / 100.0);
    rect(30, 20, 25, 25);
}

@KevinWorkman you can draw with p5 on div and then put that div anywhere on the map with mapbox projection — SERG, Mar 25 '18 at 06:38
Cool. You should post that as an answer so this question stops showing up as needing an answer. — Kevin Workman, Mar 25 '18 at 16:32

score 2 · Answer 1 · answered Feb 07 '18 at 17:39

2

Different drawing libraries don't usually play nice with each other on the same canvas. You could try something like overlaying the P5.js canvas on top of the mapbox canvas.

Better yet, use a map library that's already compatible with P5.js, like Mappa or p5.tiledmap. That allows you to draw a map inside P5.js, which makes drawing on top of it much easier.

answered Feb 07 '18 at 17:39

Kevin Workman

41,537
9
68
107

Thank you. I read about mappa - it is great, but I want to find out for myself how to join p5 or threejs with mapbox without any libs. I thought as they are all webgl powered it is possible to join them somehow. – SERG Feb 08 '18 at 05:53
1

@SERG Perhaps, but it's not going to be easy. Consider the fact that your P5.js code is clearing the canvas 60 times per second. – Kevin Workman Feb 08 '18 at 17:55

score 0 · Answer 2 · answered Jul 09 '20 at 16:56

This is a very old question, but for whoever revisits this question looking for an option... nowadays this could be easily done with the latest version of threebox and a few lines of code. The result looks like this:

<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';

    var origin = [2.294514, 48.857475];

    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/satellite-v9',
        center: origin,
        zoom: 18,
        pitch: 60,
        bearing: 0
    });

    map.on('style.load', function () {

        map
            .addLayer({
                id: 'custom_layer',
                type: 'custom',
                renderingMode: '3d',
                onAdd: function (map, mbxContext) {

                    window.tb = new Threebox(
                        map,
                        mbxContext,
                        {
                            defaultLights: true,
                        }
                    );

                    // import tower from an external glb file, downscaling it to real size
                    // IMPORTANT: .glb is not a standard MIME TYPE, you'll have to add it to your web server config,
                    // otherwise you'll receive a 404 error
                    var options = {
                        obj: '/3D/eiffel/eiffel.glb',
                        type: 'gltf',
                        scale: 0.01029,
                        units: 'meters',
                        rotation: { x: 0, y: 0, z: 0 }, //default rotation
                        adjustment: { x: -0.5, y: -0.5, z: 0 } // place the center in one corner for perfect positioning and rotation
                    }

                    tb.loadObj(options, function (model) {

                        model.setCoords(origin); //position
                        model.setRotation({ x: 0, y: 0, z: 45.7 }); //rotate it

                        tb.add(model);
                    })

                },

                render: function (gl, matrix) {
                    tb.update();
                }
            });
    })

</script>

Add 3d(2d) object on map mapbox Gl using three.js or p5.js

2 Answers2