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

如何使用 Three.js 从 JavaScript 中的数组创建几何图形？

How to create a geometry out of an array in JavaScript with Three.js?

javascript

three.js