使用 three.js 或 p5.js 在地图 mapbox Gl 上添加 3d(2d) 对象答案

【问题标题】：Add 3d(2d) object on map mapbox Gl using three.js or p5.js使用 three.js 或 p5.js 在地图 mapbox Gl 上添加 3d(2d) 对象
【发布时间】：2020-07-10 00:56:26
【问题描述】：

据我了解，我必须为 mapbox Gl 和 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);
}

【问题讨论】：

你有没有想过这个问题？
@KevinWorkman 您可以在 div 上使用 p5 进行绘制，然后使用 mapbox 投影将该 div 放在地图上的任何位置
酷。您应该将其作为答案发布，这样这个问题就不会再显示为需要答案了。

标签： three.js webgl mapbox p5.js mapbox-gl

【解决方案1】：

不同的绘图库通常不会在同一个画布上相互配合。您可以尝试将 P5.js 画布覆盖在 mapbox 画布之上。

更好的是，使用已经与 P5.js 兼容的地图库，例如 Mappa 或 p5.tiledmap。这使您可以在 P5.js 中绘制地图，这使得在其上进行绘制变得更加容易。

【讨论】：

谢谢。我阅读了有关 mappa 的信息——这很棒，但我想自己了解如何在没有任何库的情况下使用 mapbox 加入 p5 或threejs。我认为由于它们都是由 webgl 驱动的，因此可以以某种方式加入它们。
@SERG 也许，但这并不容易。考虑一下您的 P5.js 代码每秒清除画布 60 次的事实。

【解决方案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>

【讨论】：