如何通过替换新的位置数组来更新 three.js 对象？

Question

我有 2 个更新线（曲线）的例程。 第一个效果很好：

    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;

在第二个中，我试图替换新的位置数组而不是编辑旧的：

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

这会导致错误：

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)

我需要了解如何克服这个问题。

Answer 1

首先你需要从 coords 数组中创建一个类型化的 BufferAttribute，声明项目大小为 3。然后你可以直接用这个对象设置位置属性：

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