使用 tweenjs 在 THREE.JS 中沿直线曲线移动对象答案

【问题标题】：move object in line curve in THREE.JS with tweenjs使用 tweenjs 在 THREE.JS 中沿直线曲线移动对象
【发布时间】：2016-03-16 08:29:16
【问题描述】：

我有一个对象是一条线。我想用一个可以移动所有顶点的对象制作动画，它可以是一个球体。为此，我将使用 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();

我使用“.to”方法并且效果很好，如果我把我想移动的顶点放在上面。方法，但如果我有 1000 个顶点，我将不得不将它们全部放入。我能做些什么？。我让几个球体以相同的距离移动穿过这条线。我该怎么做？。我需要沿着之前创建的网格线移动球体。我需要沿线移动 n 个球体，制作动画。使用 tween.js 应该更容易..

【问题讨论】：

标签： animation three.js tween.js

【解决方案1】：

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

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

【讨论】：

那个答案对我没有帮助，我需要沿着之前创建的网格线移动一个球体。我需要沿线移动 n 个球体，制作动画。使用 tween.js 应该更容易..
然后创建一个包含所需顶点副本的数组。使用此数组创建曲线，例如c = THREE.SplineCurve3(verts); 现在对于您想要动画的帧数，通过newPoints = c.getSpacedPoints(nFrames); 获取一个新的位置数组，然后为每个帧简单地将位置设置为该点。或者，如果您不想要固定的时间步长，您可以通过c.getPoint(t); 对其进行参数化查询，其中 t 从零变化到一。
谢谢，我对“Frames”不是很清楚，也不明白“c.getPoint (t) where t 从零变化到一”。我不认为用这个我需要实现动画。正如标题所说，我需要 tween.js 的动画
var t=0; var c = THREE.SplineCurve3(verts); function mvSphere(event) { sphere.position.copy().c.getPoint(t); } new TWEEN.Tween(t,{onChange:mvSphere).to(1.0,9000); 之类的东西应该可以解决问题。 TWEEN 只理解属性之间的线性转换，因此需要使用onChange 来执行更复杂的三个转换。