[英]Threebox how do I get all 3d objects on the map?
I need to get an array or object with all 3D models that have been added to the Mapbox map, as it is on the screenshot below.我需要一个数组或 object 以及所有已添加到 Mapbox map 的 3D 模型,如下面的屏幕截图所示。 How can I get these objects?我怎样才能得到这些对象?
I was trying to do something like this code but it didn't work.我试图做类似这段代码的事情,但它没有用。
const buildings3DModels = map.tb.world.children;
console.log("buildings3DModels: ", buildings3DModels);
buildings3DModels.forEach(element => console.log(element));
I can see log an array with object with:我可以看到使用 object 记录一个数组:
console.log(map.tb.world.children);
But for some reason I cant loop through the array with for example forEach or any other loops, it's just don't return anything.但是由于某种原因,我无法使用例如 forEach 或任何其他循环遍历数组,它只是不返回任何内容。
So, my question is: How can I get these 3D objects from the map after they were added to the map?所以,我的问题是:在将这些 3D 对象添加到 map 之后,如何从这些对象中获取这些 3D 对象? and how can I loop through each object?以及如何遍历每个 object?
I'm maintaining the latest threebox repo .我正在维护最新的三盒回购。 tb.world.children
is a simple array so if tb.world.children.forEach((o) => { console.log(o) });
tb.world.children
是一个简单的数组,所以 if tb.world.children.forEach((o) => { console.log(o) });
is not logging anything is because is empty at the runtime is being executed.没有记录任何东西是因为在运行时为空正在执行。 Could you post your full code?你能发布你的完整代码吗?
If your 3D objects are being loaded through tb.loadObj
which is a full async method, it's very probable you are trying to access to tb.world.children
array before the objects are fully loaded.如果您的 3D 对象正在通过tb.loadObj
这是一个完整的异步方法加载,那么您很可能在对象完全加载之前尝试访问tb.world.children
数组。 If so, then you should manage the Promise
instances returned by this method and control when all of them are resolved.如果是这样,那么您应该管理此方法返回的Promise
实例并控制它们何时全部解决。
Here you have a method that loads 100 models and logs the objects inside threebox.在这里,您有一个加载 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;
}
I'm not sure why it's not working for you, but you are using threebox, so here is a fiddle that seems to work: http://jsfiddle.net/up8j3va5/我不确定为什么它不适合你,但你使用的是三盒,所以这里有一个似乎工作的小提琴: http://jsfiddle.net/up8j3va5/
Short snip from the 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));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.