心里装着小星星生活才能亮晶晶。

写在最前

相信6月14号 Uzi 复出首场的比赛大伙都赶上了吧，看完感觉和上次复出的状态完全不一样，这一次像是来真的了，发挥的还算不错，对线打团丝毫没有掉链子。希望后面能够发挥的更好！

不知道大家小时候有没有看过电视剧 — 魔幻手机，相信看过的小伙伴还记得女主角拥有时光机的功能，能够通过时空隧道回到过去，那今天就带大家一起实现 轨道穿越 的效果，看完本文后你可以通过极少的代码实现一个视觉非常好的效果，废话不多说直接开冲。

今天需要出场的主角有两个：

贝塞尔曲线

相信小伙伴们贝塞尔曲线已经耳熟能详了，很多地方都会遇到，如CSS3过渡中的cubic-bezier，实现购物车抛物线功能都会遇到。

这两张经典动图能够清晰的解释其原理。

动图封面

还记得CSS中贝塞尔曲线是怎么使用的么

cubic-bezier(x1, y1, x2, y2)

其中x1、y1与x2、y2就是用来定义动图中的 p1、p2。

www.bezier-curve.com/ 在线绘制。

同样，在Threejs也拥有对应的API，但今天要用到的是它的’兄弟’，曲线中的 CatmullRomCurve3。

官网介绍的非常详细，感谢threeJS，API封装的非常简单，我们随便定义几个点，就能得到相对平滑的曲线。

let points = [
  new THREE.Vector3(0, 5, 15),
  new THREE.Vector3(10, 12, -2),
  new THREE.Vector3(20, 0, 1),
  new THREE.Vector3(20, 50, 2),
  new THREE.Vector3(58, 20, 0),
  new THREE.Vector3(60, 18, 0),
];

let CatmullRomCurve = new THREE.CatmullRomCurve3(points);

原理

得到曲线后，将摄像机追随曲线上的点，并且朝向当前点的下几个点位，则可完成曲线运动。

我们可以通过 CatmullRomCurve.getPoints(N) 来将曲线分为N段，每一段为一个点位。

由此可知，当N值取得越大时，镜头运动的越慢


let getChannelPointPoi = (index) => {
  let pointPoiGroup = CatmullRomCurve.getPoints(END);
  return pointPoiGroup[index];
};


let time = 0;   // index

let animate = () => {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
    // 当前镜头位置点
    let position = getChannelPointPoi(time);
    // 镜头朝向点
    let leaderPosition = getChannelPointPoi(time + 10);

    if (leaderPosition) {
        camera.position.copy(position);
        camera.lookAt(leaderPosition);
    } else{
       // to do ending something
    }
    
    time += 1;
};

上面代码非常简单易懂，现在就差一个轨道就能够完成了

管道几何体 tubeGeometey

它就是为实现隧道运动而生的！名如其能，通过路径就可以生成管道。

path — Curve – 一个由基类Curve继承而来的3D路径。 Default is a quadratic bezier curve.
tubularSegments — Integer – 组成这一管道的分段数，默认值为64。
radius — Float – 管道的半径，默认值为1。
radialSegments — Integer – 管道横截面的分段数目，默认值为8。
closed — Boolean 管道的两端是否闭合，默认值为false。

第一个参数正好是我们上面的 CatmullRomCurve，其他参数就像van强哥的副系符文随便点点就行了???

let TubeGeometry = new THREE.TubeGeometry(CatmullRomCurve, 100, 1, 20);
let TubeMaterial = new THREE.MeshStandardMaterial({
  color: 0x86e1fd,
  side: THREE.DoubleSide,
});


let channel = new THREE.Mesh(TubeGeometry, TubeMaterial);

不瞒你说，到这里就已经完成了，接下来就即兴装饰一下，下面是最终效果。