Threejs BufferGeometry Index Update (faces added)

Question

Threejs BufferGeometry Index Update (faces added)

I have successfully added vertices to a BufferGeometry and updated the positions attribute, but now I am struggling with adding faces (updating the index). Does anyone know how to accomplish this task effectively?

const vertices = new Float32Array(100 * 3);
const indices = new Array(100 * 3);

These arrays are being utilized for this process.

Update: It appears that the following code does the job:

const indices = new Uint16Array(100 * 3);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

For some reason, this method works.

geometry.index.needsUpdate = true

did not seem to have any impact.

typescript three.js

Answer 1

Answer №1

When it comes to updating attributes in Three.js, the commonly used method is geometry.setAttribute(). However, for updating indices, a different approach is required using geometry.setIndex(), as it's not considered an attribute in the traditional sense. More details on this can be found in the official documentation.

To see a practical demonstration of how to utilize setIndex, take a look at this interactive example along with its corresponding source code. Essentially, all you need to do is provide an array and the engine will handle the conversion process automatically:

const indices = [0, 1, 2, 2, 3, 0];
geometry.setIndex(indices);

Answer 2

When it comes to updating attributes in Three.js, the commonly used method is geometry.setAttribute(). However, for updating indices, a different approach is required using geometry.setIndex(), as it's not considered an attribute in the traditional sense. More details on this can be found in the official documentation.

To see a practical demonstration of how to utilize setIndex, take a look at this interactive example along with its corresponding source code. Essentially, all you need to do is provide an array and the engine will handle the conversion process automatically:

const indices = [0, 1, 2, 2, 3, 0];
geometry.setIndex(indices);

Threejs BufferGeometry Index Update (faces added)

Answer №1

Similar questions

Tips for keeping a specific key value pair as the final entry in a Typescript Object

Which is better for narrowing object property types: using dot notation or object literal notation?

Utilizing a variable to pass props to a component (instead of a static component) within React Router 5

Extending an interface in TypeScript to include an Array

Creating a null array of a specific size can easily be accomplished in Typescript

Avoiding the ESLint error of missing return type in a React TypeScript function

Tips for aligning the types of objects transmitted from a Web API backend to a React/Redux frontend

What is the best way to remove all attributes from one interface when comparing to another?

Consolidating Typescript modules into a single .js file

Using Three.js to ensure that child object3d expands within the boundaries of its parent object

Attempting to incorporate alert feedback into an Angular application

Issue: The function react.useState is either not defined or its output is not iterable

Is it possible to utilize Typescript generics for key filtering in an object?

The converted document exported using threejs-usdzExporter does not appear correctly on an iPhone

Guide on adding up the value of a property within an array of objects using AngularJS

Error message TS2693: Trying to use 'T' as a value although it is only meant to be a type

"Encountering issues with getStaticPaths not generating any paths

What methods are available for altering state in Server Actions in NextJS 13?

You were supposed to provide 2 arguments, but you only gave 1.ts(2554)

What causes TypeScript to narrow the type when a return statement is present, but not when it is absent?