mapbox threebox 加载gltf 点击拾取

最新推荐文章于 2024-06-20 09:09:33 发布

AllBlue

最新推荐文章于 2024-06-20 09:09:33 发布

阅读量357

点赞数 2

分类专栏： mapbox threebox 文章标签：前端 javascript

本文链接：https://blog.csdn.net/AllBluefm/article/details/135936972

版权

mapbox 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

threebox

3 篇文章 0 订阅

订阅专栏

1、必须开启tb.enableSelectingObjects

2、在点击事件中通过e.target.selectedObject拿到对象

// 允许拾取对象，值为false的情况下点击获取不到gltf
window.tb.enableSelectingObjects = true;

// 加载gltf，部分参数如url、position等根据实际情况填写
map.addLayer({
    id: layer_id,
    type: 'custom',
    renderingMode: '3d',
    onAdd: function () {
       const options = {
           id: layer_id,
           obj: url,
           type: 'gltf',
           scale: 1,
           units: 'meters'
        };

        window.tb.loadObj(options, (model) => {
             model.setCoords(position);
             window.tb.add(model);
        });
     },
     render: function () {
        }
});

// click
map.on('click', (e) => {
    if (e.target.selectedObject) {
        // 拾取到gltf
        // ........
    }
});