在 THREE.js 中为 LineSegments 设置动画答案

【问题标题】：Animating LineSegments in THREE.js在 THREE.js 中为 LineSegments 设置动画
【发布时间】：2018-08-21 22:00:42
【问题描述】：

我有一个实体 MorphBlendMesh，它使用 EdgesGeometry/LineBasicMaterial 覆盖了 LineSegments 对象，以便创建一个没有“对角线”的线框外观，而新版本的 three.js 中的三角形方法会产生这种“对角线”。问题是我找不到让 LineSegments 与网格一起动画的方法，大概是因为它不是网格，它只是一个 Object3D。

有没有办法用 AnimationMixer 为 LineSegments 对象设置动画？或者使用适用于 AnimationMixer 的网格设置复制相同的外观？

作为参考，我的问题本质上是 this question 的扩展——同样的想法，但它必须能够使用 AnimationMixer 制作动画。

【问题讨论】：

旋转？我想你可能误会了，我不是要旋转网格，而是使用 AnimationMixer/morphTargets 等对其进行动画处理。
是的，我误解了这个问题。删除我的评论。

标签： javascript three.js

【解决方案1】：

您可以将任意属性附加到混音器。该属性将保存顶点。

    const a: any = ((lines.geometry as THREE.BufferGeometry).attributes.position as BufferAttribute)
      .array;
    const p: any = (line.geometry as any).attributes.position.array;
    (lines as any).value = [...a];


    const keyFrame2 = new THREE.NumberKeyframeTrack(
      '.value',
      [0,1],
      [...a, ...p],
      THREE.InterpolateSmooth
    );
    this.lineGeometriesToUpdate.push(lines as THREE.LineSegments);
    const clip2 = new THREE.AnimationClip('lines', 1, [keyFrame2]);
    const mixer2 = new THREE.AnimationMixer(lines);
    const ca2 = mixer2.clipAction(clip2);
    this.mixer.push(mixer2);

然后，在您的动画循环中，您使用此属性来更新几何图形

this.lineGeometriesToUpdate.forEach(l => {
      const geom = l.geometry as THREE.BufferGeometry;
      const values = (l as any).value;
      geom.setAttribute('position', new THREE.BufferAttribute(new Float32Array(values), 3));
      (geom.attributes.position as BufferAttribute).needsUpdate = true; 
});

this.renderScene();

【讨论】：