'ThreeJS, Ionic, Angular2+ - How to modify position BufferGeometry / BufferAttribute values - It says Index Signature ArrayLike<number> is read only

I have everything for a 3d implementation with Three.js working in a plain js app. I am using BufferGeometry for lines and meshes and I am modifying the position attribute to modify their shapes.

Now I am using Ionic and converting the 3d stuff to be inside an angular component. I have everything working except I am unable to update the position values in the bufferAttribute.

I was using this in the original js to get positions array to modify:

var vrts = myMesh.geometry.attributes.position.array;

Then I could modify and set the vrts array values with things like:

vrts[0] = newValue;

and I was then setting needsUpdate = true with:

myMesh.geometry.attributes.position.needsUpdate = true;

Everything was working fine in the js app.

In the Ionic app, when I tried to point to get positions array it said: Property 'attributes' does not exist on type BufferGeometry | Geometry so I converted to this:

vrts = (this.geometry.getAttribute("position"));

and now I can access the values with:

vertexValue = vrts.array[0];

But, when I try to modify the value, ie:

vrts.array[0] = newValue;

It says: error TS2542: Index signature in type 'ArrayLike< number>' only permits reading

and won't allow me to modify the value.

I also had some trouble accessing the needsUpdate variable. I was previously using:

myMesh.geometry.attributes.position.needsUpdate = true;

and have now converted to this, but not sure if it is correct:

(<THREE.BufferAttribute>vrts).needsUpdate = true;

I am also trying to set the 'positions' array to be dynamic with the following statement:

(<THREE.BufferAttribute>this._geometry.getAttribute("position")).setUsage(THREE.DynamicDrawUsage);

I am using BufferGeometry for lines and meshes. Maybe my alternative is to create a new positions array and use setAttribute('position', newPositions) each time I modify things, but it seems like this would defeat the purpose of efficient memory use by allocating new memory every time things are changed.

Thank you for your advice!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source