Plotly js中的高效3D线图？

Posted 2023-02-18

【中文标题】Plotly js中的高效3D线图？

【英文标题】：Efficient 3D Line Plot in Plotly js?

【发布时间】：2020-10-15 07:48:46

【问题描述】：

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

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

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

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

Lines Example

如果在这种特定情况下没有其他方法可以提高 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);

【参考方案1】：

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

它可以从给定的 Mesh 创建任意数量的实例，也许它可以帮助您... 这是一个简单的例子：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);