我在 THREEJS 中显示 25000 行，性能很差。(<5FPS)
我遵循“最简单”的方法，每条线创建 1 个网格并将其添加到场景中：
// trks is an array that contains 25000 geometries
var trks = ...;
var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
for(var i = 0; i<trks.length; i++) {
var line = new THREE.Line( trks[i].geometry, material);
scene.add( line );
}
我生成常规几何（与缓冲区几何）为：
var geometry = new THREE.Geometry();
...
// push n vertices
geometry.vertices.push(new THREE.Vector3(track.points[k][0], track.points[k][1], track.points[k][2]));
...
// push n colors
geometry.colors.push(new THREE.Color(diff[0], diff[1], diff[2]));
现场 JSFiddle：http: //jsfiddle.net/16fnyb8k/34/
几何创建：https ://github.com/FNNDSC/ami/blob/dev/src/loaders/loaders.trk.js#L328-L408
我应该以某种方式将所有几何图形合并在一起吗？改用缓冲区几何形状（这会对性能产生任何影响）吗？两个都？
=== 更新 ===
我用 N BufferGeometries 做了一个虚拟测试，但它似乎并没有真正产生任何影响：
for(var i = 0; i<trks.length; i++) {
// create buffer geometry per track
var bufferGeometry = new THREE.BufferGeometry();
var vertices = [];
for(var j=0; j<trks[i].geometry.vertices.length; j++) {
vertices.push(trks[i].geometry.vertices[j].x);
vertices.push(trks[i].geometry.vertices[j].y);
vertices.push(trks[i].geometry.vertices[j].z);
}
var fvertices = new Float32Array(vertices);
bufferGeometry.addAttribute( 'position', new THREE.BufferAttribute( fvertices, 3 ) );
// create mesh
var line = new THREE.Line( bufferGeometry, material);
line.applyMatrix(series[0].stack[0].ijk2LPS);
scene.add( line );
}
现场小提琴：http: //jsfiddle.net/16fnyb8k/51/
=== 更新 2 ===
使用缓冲区几何图形并将所有线条合并在一起使其更加平滑，但是现在所有线条都已连接：
var bufferGeometry = new THREE.BufferGeometry();
var vertices = [];
var colors = [];
for(var i = 0; i<trks.length; i++) {
for(var j=0; j<trks[i].geometry.vertices.length; j++) {
vertices.push(trks[i].geometry.vertices[j].x);
vertices.push(trks[i].geometry.vertices[j].y);
vertices.push(trks[i].geometry.vertices[j].z);
colors.push(trks[i].geometry.colors[j].r);
colors.push(trks[i].geometry.colors[j].g);
colors.push(trks[i].geometry.colors[j].b);
}
}
var fvertices = new Float32Array(vertices);
var fcolors = new Float32Array(colors);
bufferGeometry.addAttribute( 'position', new THREE.BufferAttribute( fvertices, 3 ) );
bufferGeometry.addAttribute( 'color', new THREE.BufferAttribute( fcolors, 3 ) );
var line = new THREE.Line( bufferGeometry, material);
line.applyMatrix(series[0].stack[0].ijk2LPS);
scene.add( line );
JS 小提琴：http: //jsfiddle.net/16fnyb8k/59/
谢谢