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);