我有一个固定的MorphBlendMesh,它使用EdgesGeometry / LineBasicMaterial与LineSegments对象重叠,以便创建一个没有" diagonals"的线框外观。这是由较新版本的three.js中的三角形方法产生的。问题是我无法找到让LineSegments与网格一起动画的方法,大概是因为它不是网格,它只是一个Object3D。
有没有办法使用AnimationMixer为LineSegments对象设置动画?或者使用适合AnimationMixer的网格设置复制相同的外观?
作为参考,我的问题基本上是this question的扩展 - 相同的想法,但它必须能够使用AnimationMixer进行动画制作。
答案 0 :(得分: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();