基于ThreeJS实现箭头单向移动

示例描述与操作指南

当前示例用于展示在三维界面中如何设置箭头沿某一特定方向移动。

示例效果展示

实现方式

箭头沿y轴移动

// 箭头移动函数
const moveArrows = () => {
  let posSrc = {pos: 0}; // 初始化一个动画需要更新的值，tweenjs使用
  // 每次更新需要调用 TWEEN.update函数
  const animate = () => {
    TWEEN.update();  // 每次更新需要调用一下 TWEEN.update() 以更新TWEEN的值
    requestAnimationFrame(animate); //  浏览器每一帧刷新时执行的函数
  }

  // tween的更新函数
  const onUpdate = () => {
    arrow.position.y += 2 * posSrc.pos;  // 每次更新将箭头的位置的y值增加一下
  };

  // tweenBack的更新函数
  const onUpdate2 = () => {
    arrow.position.y = 0;     // 每次更新将箭头的位置的y值设置为0
  };

  // 实例化一个tween对象，设置它的参数posSrc在3秒内从1减到0
  const tween = new TWEEN.Tween(posSrc)
    .to({pos: 1}, 3000)      // 将posSrc.pos的值用3s变成1
    .onUpdate(onUpdate)      // 更新时执行的函数
    .easing(TWEEN.Easing.Sinusoidal.InOut)   // posSrc变化的规律
    .start();   // 开始执行此动画

  // 实例化另一个tween对象，设置它的参数posSrc在3秒内从0加到1
  const tweenBack = new TWEEN.Tween(posSrc)
    .to({pos: 0}, 30)     // 将posSrc.pos的值用3s变成0
    .onUpdate(onUpdate2)  // 更新时执行的函数
    .easing(TWEEN.Easing.Sinusoidal.InOut)  // posSrc变化的规律
    .chain(tween);  // 与tween衔接
  tween.chain(tweenBack);  // 与tweenBack衔接

  animate(); // 执行动画函数
}

下载完整代码