javascript - 自定义 THREE.Curve.create 显示不正确

Question

如 this answer 中的建议，我创建了一个线性插值曲线，如下所示:

THREE.Linear3 = THREE.Curve.create(

  function ( points, label /* array of Vector3 */) {

    this.points = (points == undefined) ? [] : points;
    this.label = label;

  },

  function ( t ) {    
    var v = new THREE.Vector3();
    var c = [];
    var points = this.points, point, intPoint, weight;
    point = ( points.length - 1 ) * t;

    intPoint = Math.floor( point );
    weight = point - intPoint;

    c[ 1 ] = intPoint;
    c[ 2 ] = intPoint  > points.length - 2 ? points.length - 1 : intPoint + 1;

    var pt1 = points[ c[1] ],
      pt2 = points[ c[2] ];

    v.copy( pt1 ).lerp( pt2, weight );

    return v;

  }

);

但是，当我尝试显示不同长度的轨迹(以动画方式)时，我得到以下行为，即曲线不是穿过点，而是穿过空间，请注意在每个轨迹下面的示例应该经过每个球体的坐标(下面的动画 gif):

我不确定我是否理解 getPoint 函数或它应该返回什么。非常感谢任何帮助。

JSFiddle

这是一个最小的示例，但您可以看到随着 pipe 的膨胀，右 Angular 有一个颠簸的 Action 。

http://jsfiddle.net/ElDeveloper/3uyf3sq3/1/

Answer 1

清理一些代码

这有助于我调查问题。

• 您正在泄漏几何体，您需要在从场景中移除网格后处理几何体

  scene.remove(c_mesh)
  c_tube && c_tube.dispose();
  

• 使用 WebGLRenderer。 Canvas 渲染器 leaks removed objects ，并且您在每一帧上创建新对象。 (如果您由于某种原因无法使用 CanvasRenderer，对不起)

• (对于 fiddle )放慢动作，requestAnimationFrame 不是测试所必需的，setTimeout(animate, 500); 允许用户看到发生了什么事。

• 0 段管有什么意义？

  if (index >= points.length - 1){
      index = 1; //start with 2 points
  }
  

按预期工作

• TubeGeometry 做一管 N(构造函数中的第二个参数， fiddle 中的 16)段。 (我稍后会回过头来，但我不认为你总是想要 16 个片段)

• Curve.getPoinAt(TubeGeometry 和可能许多其他几何体使用的方法)的默认行为是返回等距点。您可以预期:distance(getPointAt(0),getPointAt(0.1)) == distance(getPointAt(0.1),getPointAt(0.2)) 为真。

• 由于这些点，无论您在路径中放置多少点，TubeGeometry 都会构建一个 16 段管，所有段的长度都相同，从路径的第一个点到最后一个点. 15 个中间点中的一个恰好位于边缘位置的可能性很小。这应该可以解释您所看到的。

尝试修复问题

• 首先摆脱 TubeGeometry+Path 的等距方式。重载 getUtoTmapping 应该就足够了(我发现阅读源代码):

  THREE.Linear3.prototype.getUtoTmapping = function(u) {
      return u;
  };
  

• 我改变了你的getPoint。它可能做同样的事情，但我对我的代码进行调查更舒服

  function ( t ) {    
      var points = this.points;
      var index = ( points.length - 1 ) * t;
      var floorIndex = Math.floor(index);
      if(floorIndex == points.length-1)
          return points[floorIndex];
      var floorPoint = points[floorIndex];
      var ceilPoint = points[floorIndex+1];
      return floorPoint.clone().lerp(ceilPoint, index - floorIndex);
  }
  

• 为 TubeGeometry 构造函数提供正确的段数:

  var pathPoints = points.slice(0, index);
  c_path = new THREE.Linear3(pathPoints, 'Test');
  c_tube = new THREE.TubeGeometry(c_path, pathPoints.length-1, 10, 16, false, true);
  

  此时，您应该大致得到了您所期望的

• 您应该看到 pipe 始终穿过边缘。您还应该看到 TubeGeometry 并不意味着有 Angular 。您可以通过查看 TubeGeometry 和 Curve 如何处理切线来改善这个 Angular 问题，或者(如果您不关心速度慢的话)通过将段数增加到非常大的数量:

  c_tube = new THREE.TubeGeometry(c_path, 200/*pathPoints.length-1*/, 10, 16, false, true);
  

---

这就是答案。你可以在这里找到我实验的最新版本:http://jsfiddle.net/dqn73m98/5/ .您还可以询问 three.js 开发人员是否存在这样的功能，或者在 github 问题中请求实现(如果有人有时间这样做)，here