如何使用Three.js在JavaScript中为数组创建几何？

Question

哪一个是最好（最快）的方法来创建这个数据数组的几何？我即时创建数组，也可以创建一个对象而不是数组。我可以做的一切来改善这一点将是完美的。

数据（X，Y，Z）：

var data = [    
    [-500,0,-500], 
    [-496,0,-500], 
    [-492,0,-500], 
    //.. 
    [488,0,496], 
    [492,0,496], 
    [496,0,496] 
]; 
//data.length: 62500 

我的方式：

var geo = new THREE.Geometry(); 
for(i = 0; i < data.length; i++) 
    geo.vertices.push(data[i][0],data[i][1],data[i][2]); 

然后我循环通过所有顶点并创建面得到的地形（如下图所示，但不是平的）

Answer 1

如果你正在寻找速度，我建议使用BufferGeometry。

它使用平坦的Float23Array来降低发送数据到GPU的成本。

例如

var geometry = new THREE.BufferGeometry(); 
// create a simple square shape. We duplicate the top left and bottom right 
// vertices because each vertex needs to appear once per triangle. 
var vertices = new Float32Array([ 
    -1.0, -1.0, 1.0, 
    1.0, -1.0, 1.0, 
    1.0, 1.0, 1.0, 

    1.0, 1.0, 1.0, 
    -1.0, 1.0, 1.0, 
    -1.0, -1.0, 1.0 
]); 

// itemSize = 3 because there are 3 values (components) per vertex 
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); 
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
var mesh = new THREE.Mesh(geometry, material); 

来源http://threejs.org/docs/#Reference/Core/BufferGeometry