使用tweenjs在THREE.JS中的行曲线中移动对象

Question

我有一个对象是一条线。我想用一个将移动所有顶点的对象制作一个动画，它可以是一个球体。为此，我将使用tween.js。我的问题是我无法实现其所有顶点动画。如何让动画从起点到终点显示？ 我有这段代码：

//myline.geometry.vertices  -> array with vertices of the line (1000 vertices)
new TWEEN.Tween( mysphere.position ).to( { x: myline.geometry.vertices[0].x, y: myline.geometry.vertices[0].y, z: myline.geometry.vertices[0].z }, 9000 ).to( { x: myline.geometry.vertices[1].x, y: myline.geometry.vertices[1].y, z: myline.geometry.vertices[1].z }, 9000 ).delay(2000).start(); 

我使用＆＃34; .to＆＃34;如果我把顶点移动到我要移动的方法并且效果很好。方法，但如果我有1000个顶点，我将不得不把它们全部放在一起。我能做什么？。 我把几个球体在整个线上移动了相同的距离。我该怎么做？。  我需要沿着一条线移动一个球体，这条线是先前创建的。我需要沿着线移动n个球体，制作动画。使用tween.js应该更容易..

Answer 1

虽然您尚未指定如何确定这些顶点的移动位置，但我强烈建议您查看THREE.MorphAnimMesh和THREE.MorphBendMesh类型。通过在几何体的定义中指定目标位置，您可以获得平滑的动画，而无需使用tween.js进行复杂的设置 - 只需调用混合量，而不是每个顶点循环。 THREE.js将为您完成所有工作。您也可以使用基本的THREE.Mesh类型，例如：http://threejs.org/examples/#webgl_morphtargets

如果确实需要更改几何.vertces数组，请记住在更改值后设置geometry.verticesNeedUpdate = true;，以便THREE可以确保更新其模型的内部WebGL表示。