如何使用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