Question

据我所知，我必须为mapbox G1和p5使用一个画布。但是怎么做呢？如果我有p5动画会用地图覆盖画布怎么办？任何例子或提示？谢谢。我的代码，但没什么大不了的

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);
}

Answer 1

不同的绘图库通常不会在同一个画布上相互配合。您可以尝试在地图集画布上叠加P5.js画布。

更好的是，使用已经与P5.js兼容的地图库，例如Mappa或p5.tiledmap。这允许您在P5.js中绘制一个地图，这使得绘制更容易。

Answer 2

这是一个非常古老的问题，但是对于谁重新访问此问题以寻求一个选择……如今，可以使用最新版本的threebox和几行代码来轻松实现。结果看起来像这样：

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

使用three.js或p5.js在地图mapbox G1上添加3d（2d）对象

2 个答案: