Question

我正在尝试在浏览器中绘制彩色线条 - 没有涉及网格。我目前查询存储几何和其他属性的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文档：http://thomasshouler.com/datavis/wrapper/axial.html

我需要让它更具可扩展性。我们目前正在加载最终需要可视化的1.7亿条记录中的1,300条记录。一个初始的逻辑步骤似乎是将对象和属性存储在单独的文件（JSON？）中，然后可以将其加载到html模板中（当然更干净，我期望有效吗？）。

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

Answer 1

如果它将静态显示（即没有逐帧更新），那么简单地在画布上绘图可能是最好的方法，因为重绘几千行可能对GPU来说很好，但数百万肯定会推动它（1 ）。 WebGL中也不支持linewidth，但是使用canvas方法可以正常工作。一旦在画布上绘制，就不需要逐帧重绘，如果你不需要3D，你可以完全绕过three.js。是的，您应该将您需要的数据从数据库中导出为JSON，然后在循环中处理它，而不是构建包含所有指令的HTML页面。

（1）您无法用数百万行填充图像，并且在此过程中不会显示可怕的混乱，因此您必须以某种方式过滤数据。

编辑：另请查看Circos，这可能就是您所需要的。

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

1 个答案: