CODEWITHSUNDEEP
javascriptthree.js
Ivan Sudos
Ivan Sudos

Reputation: 1483

How to update three.js object with substitution of a new postions array?

I have 2 routines that update line (curve). The first one works well:

    curve.geometry.attributes.position.array[3 * event.object.span_idx] = event.object.position.x;
    curve.geometry.attributes.position.array[3 * event.object.span_idx + 1 ] = event.object.position.y;
    curve.geometry.attributes.position.array[3 * event.object.span_idx + 2] = event.object.position.z;
    curve.geometry.attributes.position.needsUpdate = true;

In the second one I'm trying to substitute new positions array instead of editing old one:

    curve.geometry.attributes.position.array = coords;
    curve.geometry.setDrawRange( 0, newProfile.length );
    curve.geometry.attributes.position.needsUpdate = true;

And this causes an error:

Uncaught TypeError: Failed to execute 'bufferSubData' on 'WebGL2RenderingContext': Overload resolution failed.
at updateBuffer (three.module.js?5a89:14149)
at Object.update (three.module.js?5a89:14228)
at Object.update (three.module.js?5a89:16632)
at Object.update (three.module.js?5a89:17061)
at projectObject (three.module.js?5a89:25735)
at projectObject (three.module.js?5a89:25771)
at WebGLRenderer.render (three.module.js?5a89:25575)
at ThreeForCarrer.render (ThreeForCarrer.ts?b15d:88)
at eval (ThreeForCarrer.ts?b15d:89)

I need to understand how to overcome this.

Upvotes: 0

Views: 253

Answers (1)

Mehmet AVŞAR
Mehmet AVŞAR

Reputation: 521

First you need to create a typed BufferAttribute from coords array, declaring item size of 3. Then you can directly set position attribute with this object:

var posAttribute = new BufferAttribute(new Float32Array(coords), 3);
e.geometry.setAttribute('position', posAttribute);
e.geometry.attributes.position.needsUpdate = true;

Upvotes: 1

Related Questions