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

Question

Which one is the best (fastest) method to create a geometry out of this data-array? I create the Array on-the-fly and can also create a object instead of an array. Everything that I can do to improve this would be perfect.

Data (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

My way:

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

And then I loop trough all vertices and create the faces to get a terrain (like the following picture, but not flat)

Geometry

Peter · Accepted Answer · 2019-05-22 14:48:03Z

4

If you are looking for speed, I suggest using BufferGeometry.

It uses a flat Float23Array to reduce the cost of sending data to the GPU.

e.g.

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 );

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

edited May 22, 2019 at 14:48

Peter

4285 silver badges23 bronze badges

answered Feb 7, 2015 at 15:36

Brendan Annable

2,74726 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Display Name Over a year ago

Thank you, sounds nice. Well, but what is the Float32Array? Which number (-1.0, -1.0, 1.0) is for what? X,Y,Z? Twice?

Brendan Annable Over a year ago

Correct, it is a flat list of xyz coordinates, so it goes x1,y2,z1,x2,y2,z2,etc...

Display Name Over a year ago

But why 9 coordinates? Is this just for one face (3 vertices) or can I add all my vertices into this list?

Brendan Annable Over a year ago

That example was for a square, you can add as many or little vertices as you like.

Display Name Over a year ago

So: 2,0,0 - 0,0,0 - 0,0,2 would be an triangle? If yes, I got it. Thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related