Plotly js中的高效3D线Plot？

Question

画线很难。 我正在寻找一种在 Plotly 中绘制大量 3D 线段的方法，而无需相应的巨大时间成本，其中绘制约 1000 个线段需要 10 秒以上。 我目前正在使用 scatter3d 线。

我知道限制跟踪的数量会对这些扩展问题有很大帮助，但我认为我无法限制数量，因为我想合并 3 个其他功能：

1. 尽可能无缝地按值对分段进行颜色编码
2. 给 3D 线提供可变宽度，我还没有找到平滑的方法，因此只能通过宽度逐渐变化的小段来完成
3. 绘制像树一样分支的连接线结构（使对整个图形使用色阶特征的任何可能性都复杂化）

我想知道是否有其他方法可以更有效地使用 Plotly 来绘制此 3D 线结构。 附件是一个带有简单示例的代码笔，显示了绘制许多线迹的巨大时间成本：

线条示例

如果在这种特定情况下没有其他方法可以提高 Plotly 效率，那么是否有人建议其他方法来渲染具有上述功能的 3D 行？ 我尝试过 Three.js 的 MeshLines，但遇到了几个问题。 非常感谢！

var d = 1;
let numlines = 1000;

function draw_trace(x0, y0, z0, x1, y1, z1, diam) {
    var trace = {
        type: 'scatter3d',
        mode: 'lines',
        x: [x0, x1],
        y: [y0, y1],
        z: [z0, z1],
        line: {
            width: diam,
            color: 'black',
        }
    };
    return trace;
}

traces = [];
for (var i=0; i < numlines; i++) {
    var x0 = Math.random()*100;
    var y0 = Math.random()*100;
    var z0 = Math.random()*100;
    line = draw_trace(x0, y0, z0, x0+(d*3), y0, z0, d);
    traces.push(line);
}
Plotly.newPlot('lines', traces, layout={'showlegend': false});

Answer 1

您是否已经尝试过intanceMesh的 intanceMesh？

它可以从给定的网格中创建任意数量的实例，也许它可以帮助你......这是一个简单的例子： https://codepen.io/matheus-wc/pen/eYvPpbB

let m = new THREE.MeshLambertMaterial();

let rows = 50;
let cols = 125;

let o = new THREE.InstancedMesh(g, m, rows * cols);