Tips for building a geometric shape using an array in JavaScript and Three.js

Question

Tips for building a geometric shape using an array in JavaScript and Three.js

What is the most efficient method for transforming this data array into a geometry? I am generating the array dynamically and have the option to create an object instead of an array. Any suggestions for improving this process would be greatly appreciated.

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

Current Approach:

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

Subsequently, I iterate through all vertices to create the faces required for a terrain (similar to the image below, but not flat).

javascript three.js

Answer 1

Answer №1

For optimal performance, consider utilizing BufferGeometry.

BufferGeometry utilizes a flat Float32Array to minimize the data transfer overhead to the GPU.

Example:

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

Answer 2

For optimal performance, consider utilizing BufferGeometry.

BufferGeometry utilizes a flat Float32Array to minimize the data transfer overhead to the GPU.

Example:

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

Tips for building a geometric shape using an array in JavaScript and Three.js

Answer №1

Similar questions

Preventing JQuery from interrupting asynchronous initialization

Setting up a personalized JSPM registry configuration

Exploring potentials in OpenLayers by filtering characteristics

ES6 Class Directive for Angular 1.4

I am frustrated because the csvtojson converter keeps replacing my file name with "undefined."

Discovering the Nearest Point to the Mouse Cursor using Three JS Ray Casting

Creating a visually appealing gantt chart in React Native using the react-google-charts library - here's how!

Is there a way to enclose an element with two other elements using JavaScript/jQuery

The peculiar behavior of Google Maps markers refreshing inconsistently upon bounds adjustment

Using JQuery to dynamically change className based on specific logic conditions

The People and Groups selection dialog is displaying incorrectly in IE 10

Encountering a crash issue with JMeter's Selenium Sampler while attempting to click on a button with the Phantom

Utilizing the require function to implement an AngularJS Controller without having

Repetitive attempts have led to the cancellation of the AJAX and PHP petition statuses

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Issues persist with the Angular UI Tree Module: the removed callback is not functioning as

Unable to invoke function on HTML element

"Troubleshooting the issue of Angular UI-Select failing to display a large

Using Material-UI in a project without the need for create-react-app

Encountering a registration error persistently: [TypeError: Network request failed]