删除数据（刷新）WebGL Globe答案

【问题标题】：Removing data (refreshing) WebGL Globe删除数据（刷新）WebGL Globe
【发布时间】：2015-04-08 00:38:25
【问题描述】：

我正在使用 WebGL Globe (http://globe.chromeexperiments.com/)，希望能够用新数据“刷新”它，然后将其动画化到新状态。库中提供的示例无济于事，因为它们在页面加载时立即加载数据系列，但我想动态加载新数据（例如，每 30 秒）

使用新的data 重复执行以下操作只会累加地更新地球的数据，因此当新数据进来时，这些条会“堆积”在地球上：

globe.addData(data, {format: 'magnitude'});
globe.createPoints();
globe.animate();

似乎没有一种明显的方法可以使用内置 API 减去/清除/重置地球的数据（然后动画到新的数据状态）。这很容易做到吗？

【问题讨论】：

这不正是他们在您在第 144 行链接的页面上所做的吗？通过 ajax 加载数据并将条形图补间到新数据。
不完全是.. 该示例通过 ajax 加载数据文件“population909500.json”，但该数据文件中有 3 个数据集（每年一个）。加载一组新数据并重新执行对 globe.addData 的调用会导致新数据堆叠在旧数据之上
看起来在调用了 globe.createPoints() 之后，就不能再制作 Tweens 了。这是一个问题，因为我想动态添加数据（我不知道新数据会是什么）。
这方面有什么更新吗？

标签： javascript webgl-globe

【解决方案1】：

我想通了。在您的 globe.js 中添加以下行：

function createPoints() {
    ...
    this.points.name = "lines"; // Add this line
    scene.add(this.points);
    }
}

// Create this function
function removeAllPoints() {
    scene.remove(scene.getObjectByName("lines"));
}

// Near the bottom of the code
this.addData = addData;
this.removeAllPoints = removeAllPoints; // Add this line
this.createPoints = createPoints;
this.renderer = renderer;
this.scene = scene;

现在您可以简单地执行以下操作：

TWEEN.start();
globe.removeAllPoints();
globe.addData(data, {format: 'magnitude', name: 'results', animated: false});
globe.createPoints();

【讨论】：

你是对的，但我想我会提到我必须在 removeAllPoints() 中添加this 以防止内存泄漏。

【解决方案2】：

hobbes3 给出的答案真的很有帮助。但只有一点点变化。

您无需致电globe.animate()。

我曾在一个项目中使用它，在该项目中，我每 5 秒更新一次数据，并一遍又一遍地调用 globe.animate() 使渲染陷入困境。把它评论出来，你就是金子。

【讨论】：