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

来源https://threejs.org/docs/#api/en/core/BufferGeometry