Threebox 如何获取地图上的所有 3d 对象？

Question

我需要获取一个数组或对象，其中包含已添加到 Mapbox 地图的所有 3D 模型，如下面的屏幕截图所示。我怎样才能得到这些对象？

我正在尝试执行类似此代码的操作，但没有成功。

const buildings3DModels = map.tb.world.children;
console.log("buildings3DModels: ", buildings3DModels);
buildings3DModels.forEach(element => console.log(element));

我可以看到用以下对象记录一个数组：

console.log(map.tb.world.children);

但出于某种原因，我无法使用例如 forEach 或任何其他循环遍历数组，它只是不 return 任何东西。

所以，我的问题是：将这些3D对象添加到地图后，如何从地图中获取它们？以及如何遍历每个对象？

Answer 1

我不确定为什么它对你不起作用，但你使用的是 threebox，所以这是一个似乎有效的 fiddle：http://jsfiddle.net/up8j3va5/

来自 fiddle 的短片：


    threebox.addAtCoordinate(
                    plane, 
                    [origin[0], origin[1], 10],
                    {preScale: 1}
                );
                
    threebox.world.children.forEach(element => 
      console.log(element.position.x, 
                  element.position.y, 
                  element.position.z));

Answer 2

我正在维护 latest threebox repo。 tb.world.children 是一个简单的数组，所以如果 tb.world.children.forEach((o) => { console.log(o) }); 没有记录任何内容，那是因为在运行时它是空的。你能 post 你的完整代码吗？

如果您的 3D 对象是通过 tb.loadObj 加载的，这是一个完整的异步方法，您很可能在对象完全加载之前尝试访问 tb.world.children 数组。如果是这样，那么您应该管理此方法返回的 Promise 个实例并控制何时解析所有实例。

这里有一个方法可以加载 100 个模型并记录 threebox 中的对象。

function makeNaive(options) {
    let promises = [];
    for (var i = 0; i < 100; i++) {
        promises.push(new Promise((resolve) => {
            tb.loadObj(options, function (model) {
                let lng = origin[0] + Math.random() * 0.4 - 0.2;
                let lat = origin[1] + Math.random() * 0.4 - 0.2;
                let alt = origin[2] + Math.random() * 0.4 - 0.2;
                let obj = model.setCoords([lng, lat, alt]);
                tb.add(obj);

                if (api.animation) {
                    // play default animation, for 10 seconds
                    let opt = { animation: 0, duration: 10000 };
                    obj.playDefault(opt);
                }

                getGeometryTotalLength();
                resolve(true);

            })
        }));

    }

    Promise.all(promises).then((values) => {
        console.log("All promises finished:");
        tb.world.children.forEach((o) => { console.log(o) });
    });
    map.repaint = true;
}

Threebox 如何获取地图上的所有 3d 对象？

Threebox how do I get all 3d objects on the map?

javascript

mapbox

mapbox-gl

mapbox-gl-js

threebox