Javascript 在THREE.js中设置线段动画

Javascript 在THREE.js中设置线段动画,javascript,three.js,Javascript,Three.js,我有一个实心变形网格,它与使用EdgesGeometry/LineBasicMaterial的LineSegments对象重叠,以便创建线框外观,而不使用three.js新版本中三角形方法产生的“对角线”。问题是,我找不到一种方法使线段与网格一起设置动画,可能是因为它不是网格,只是Object3D 是否有方法使用AnimationMixer设置线段对象的动画?或者使用与AnimationMixer配合良好的网格设置复制相同的外观 作为参考,我的问题本质上是——相同想法的扩展,但它必须能够使用An

我有一个实心变形网格,它与使用EdgesGeometry/LineBasicMaterial的LineSegments对象重叠,以便创建线框外观,而不使用three.js新版本中三角形方法产生的“对角线”。问题是,我找不到一种方法使线段与网格一起设置动画,可能是因为它不是网格,只是Object3D

是否有方法使用AnimationMixer设置线段对象的动画?或者使用与AnimationMixer配合良好的网格设置复制相同的外观


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

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

    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();

旋转的?我想你可能误解了,我不是在尝试旋转网格,而是使用AnimationMixer/morphTargets等设置它的动画。是的,我误解了这个问题。删除我的评论。