Error: The array provided to THREE.BufferAttribute must be a Typed ArraydataType

Question

Error: The array provided to THREE.BufferAttribute must be a Typed ArraydataType

I am attempting to generate a point cloud using threejs with the following code:

const pcGeom = new THREE.BufferGeometry();
const rows = 100;
const columns = 3;
const vertices = [...Array(rows)].map(() => [...Array(columns)].fill(0));
for(let i = 0; i < rows; i++) {
  for (let j = 0; j < columns; j++) {
     vertices[i][j] = Math.random() * (2 - 0) + 0;
  }
}
pcGeom.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); // error at this line
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const pointCloud = new THREE.Mesh( geometry, material );

However, I encounter an error (at the line noted above):

TypeError: THREE.BufferAttribute: array should be a Typed Array.

Since 'vertices' is initialized, I assumed it was typed, right?

javascript three.js

Answer 1

Answer №1

Based on the information provided in the documentation, it is essential for the array parameter to be a TypedArray. If you are dealing with Vector3 vertices, it is suggested to utilize Float32Array.

The TypedArray should be in a flat format, with the itemSize specifying the dimension of each component (in the case of Vector3, it is 3). Therefore, the first vertex would be represented by

[vertices[0], vertices[1], vertices[2]]

, and the second vertex by

[vertices[3], vertices[4], vertices[5]]

, and so forth. An implementation similar to the following code snippet should function effectively:

const pcGeom = new THREE.BufferGeometry();
const rows = 100;
const columns = 3;
const vertices = new Float32Array(rows * columns);
for(let i = 0; i < rows; i++) {
  for (let j = 0; j < columns; j++) {
     vertices[i * columns + j] = Math.random() * (2 - 0) + 0;
  }
}
pcGeom.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const pointCloud = new THREE.Mesh( pcGeom, material );

Answer 2

Based on the information provided in the documentation, it is essential for the array parameter to be a TypedArray. If you are dealing with Vector3 vertices, it is suggested to utilize Float32Array.

The TypedArray should be in a flat format, with the itemSize specifying the dimension of each component (in the case of Vector3, it is 3). Therefore, the first vertex would be represented by

[vertices[0], vertices[1], vertices[2]]

, and the second vertex by

[vertices[3], vertices[4], vertices[5]]

, and so forth. An implementation similar to the following code snippet should function effectively:

const pcGeom = new THREE.BufferGeometry();
const rows = 100;
const columns = 3;
const vertices = new Float32Array(rows * columns);
for(let i = 0; i < rows; i++) {
  for (let j = 0; j < columns; j++) {
     vertices[i * columns + j] = Math.random() * (2 - 0) + 0;
  }
}
pcGeom.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const pointCloud = new THREE.Mesh( pcGeom, material );

Error: The array provided to THREE.BufferAttribute must be a Typed ArraydataType

Answer №1

Similar questions

Attempting to grasp the concept of memory leakage in a more thorough manner

transferring a LatLng variable from one function to initialize Google Maps

What is the proper way to utilize variables in package.json with npm version 7.x.x?

Passing a variable via routes using Express

When the JS function 'postMessage()' is invoked on an HTML object tag, what specific action does it perform?

Creating unique shaders with THREE.ShaderLibLearn how to craft personalized shaders using THREE

Pictures squeezed between the paragraphs - Text takes center stage while images stand side by side

The function req.send('null') does not exist in the Node.js MySQL library

When running the test, the message "Unable to resolve all parameters for BackendService" is displayed

Select an item from the options available

Performing calculations while transferring information via Mongoose to the MongoDb database

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Using JavaScript: How to utilize Array.reduce within a function that also accepts arguments

What methods can be used to differentiate between value equality and reference equality when watching something?

Hiding or removing DOM elements with ng-bootstrap pagination

The characteristics that define an object as a writable stream in nodejs

Discovering a device's model using JavaScript

Enclose each instance of "Rs." with <span class="someClass">

Display the X button solely once text has been inputted into the textbox

Guide to integrating animations into a React JS array sorting program