Javascript 使用threejs将彩色线条加载到浏览器中

我正在尝试在浏览器中绘制彩色线——没有涉及网格。我目前查询一个存储几何体和其他属性的MySQL数据库，并将这些对象转换为文本块，每个文本块生成一个单行对象供

threejs

读取

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({
color: 0xF2AA20,
linewidth: 5});
var line = new THREE.Line(geometry, material);
geometry.vertices.push(new THREE.Vector3(1040,-406,-760));
geometry.vertices.push(new THREE.Vector3(1040,-406,-709));
scene.add(line);

这最终会生成一个独立的html文档，其中包含硬编码的数据：

我需要使它更具可扩展性。我们目前正在加载最终需要可视化的1.7亿条记录中的约1300条。最初的逻辑步骤似乎是将对象和属性存储在单独的文件（JSON？）中，然后将这些文件加载到html模板中（当然更干净，我希望效率更高？）

---

我认为这对大多数人来说都很简单，但我发现的例子通常要复杂得多，因此我很难将其融入到我的工作中。有人能提供一个例子，通过JSON格式将一行加载到浏览器中吗？

如果它是静态显示的（即没有逐帧更新），那么简单地在画布上绘制可能是最好的方法，因为对于GPU来说，重绘几千行可能是好的，但数百万人肯定在推动它（1）<代码>线宽在WebGL中也不到处受支持，但可以很好地使用画布方法。在画布上绘制后，不需要逐帧重画，如果不需要3D，可以完全绕过three.js。是的，您应该将数据库中需要的数据导出为JSON，然后在循环中处理，而不是构建包含所有说明的HTML页面

（1） 你不可能用数百万行填充一幅图像，也不可能在这个过程中显示出糟糕的混乱，因此你必须以某种方式过滤数据

---

编辑：还可以查看一下，这可能正是您需要的。

如何加载

JSON

取决于您是想使用像

jQuery

这样的库还是只使用本机浏览器功能。使用

jQuery

当然更容易。尝试合并几何体以获得更好的性能。每个网格意味着GPU需要额外的绘制调用。如果要对线应用不同的颜色，如果决定合并几何体，可以使用顶点颜色。窗口中不提供线宽（角度限制）。