Javascript 在3J中设置bezier曲线的动画

我想在三个动画贝塞尔曲线。起点、终点和控制点将更新。最终，我将需要有许多曲线动画一次。最有效的方法是什么

如果您运行下面的代码片段，您将看到每次帧渲染时我都在创建贝塞尔对象、几何体和线。我将从场景中删除上一行，然后添加新的、更新的行。有更好的办法吗？也许只更新几何体而不再次添加线

var摄影机、场景、渲染器、几何体、材质、网格；
init（）；
制作动画（）；
/**
创建场景、摄影机、渲染器
*/
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=500；
场景。添加（摄影机）；
添加曲线（）；
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
}
/**
将初始贝塞尔曲线添加到场景中
*/
函数addCurve（）{
测试点=0；
曲线=新的3.CubicBezierCurve3(
新的3.Vector3（测试点，0,0），
新的三矢量3（-5150,0），
新的三个矢量3（20150,0），
新三，矢量3（10，0，0）
);
曲率测量=新的三点几何（）；
curveGeometry.Vertexs=曲线.getPoints（50）；
curveMaterial=新的三线基本材质（{color:0xff0000}）；
曲线=新的三条线（曲线测量法，曲线材料）；
场景。添加（曲线线）；
}
/**
在每个帧渲染上，删除旧线，创建新曲线、几何体并添加新线
*/
函数updateCurve（）{
testPoint++；
场景。移除（曲线线）；
曲线=新的3.CubicBezierCurve3(
新的3.Vector3（测试点，0,0），
新的三矢量3（-5150,0），
新的三个矢量3（20150,0），
新三，矢量3（10，0，0）
);
曲率测量=新的三点几何（）；
curveGeometry.Vertexs=曲线.getPoints（50）；
曲线=新的三条线（曲线测量法，曲线材料）；
场景。添加（曲线线）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
updateCurve（）；
渲染器。渲染（场景、摄影机）；
}

---

为每帧创建新行是一项非常有效的操作

创建动画曲线的最佳方法是什么？

可能是用。但实施起来可能需要更多的时间，所以如果我的下一个建议对你来说足够的话，就这些吧

改进代码中的曲线更新

我尽量不改变你的很多代码。用“

//已编辑的

”注释标记已编辑的位置。我添加了一个数组，因为你说会有很多曲线

解释

• 如上所述，尽量避免在动画循环中使用

  new

  关键字

• CubicBezierCurve3

  具有

  v0

  、

  v1

  、

  v2

  和

  v3

  属性。这些是您从一开始就提供的

  3.Vector3

  `s

  .getPoints（）

  使用它们返回顶点数组。因此，您可以简单地更改它们，不需要

  new

  关键字
• 而不是重新创建线，在您的情况下，您可以简单地更新几何体。因为你有一条三点线-你的几何体只需要顶点。更改顶点后，应设置

  geometry.verticesNeedUpdate=true

  ，否则Three.js将忽略您的更改

var摄影机、场景、渲染器、几何体、材质、网格、曲线=[]；
init（）；
制作动画（）；
/**
创建场景、摄影机、渲染器
*/
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=500；
场景。添加（摄影机）；
添加曲线（）；
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
}
/**
将初始贝塞尔曲线添加到场景中
*/
函数addCurve（）{
测试点=0；
曲线=新的3.CubicBezierCurve3(
新的3.Vector3（测试点，0,0），
新的三矢量3（-5150,0），
新的三个矢量3（20150,0），
新三，矢量3（10，0，0）
);
曲率测量=新的三点几何（）；
curveGeometry.Vertexs=曲线.getPoints（50）；
curveMaterial=新的三线基本材质（{color:0xff0000}）；
曲线=新的三条线（曲线测量法，曲线材料）；
场景。添加（曲线线）；
//编辑
curves.push（curveLine）；//将曲线添加到曲线数组
curveLine.curve=curve；//将曲线对象链接到此曲线
}
/**
在每个帧渲染上，删除旧线，创建新曲线、几何体并添加新线
*/
函数updateCurve（）{
testPoint++；
//编辑
对于（var i=0，l=curves.length；i

（1）在控制台中键入

renderer.info

。您没有正确处理几何图形。相反，创建一条

线

并更新顶点。请参阅（2）避免在紧密循环中使用

新
。创建对象并重用它们。