three.js 中 tweenjs的使用

1. 导入 tweenjs 库

import * as TWEEN from '@tweenjs/tween.js'

2. 使用 tweenjs 的 动画 源码地址 https://github.com/tweenjs/tween.js/blob/master/src/Tween.js

var option = { px: 0 }
new TWEEN.Tween(option)
        .to({
            px: 40 
        }, 1000)
        .onUpdate(function() {
            that.spriteDoorLeft.position.setX( (-86 - option.px) * that.initFactor )
            that.spriteDoorRight.position.setX( ( 166 - option.px) * that.initFactor )
        })
        .onComplete(function() {
            that.doorOpen = false
        })
        .delay(500)
        .easing(TWEEN.Easing.Elastic.InOut)
        .start();

3. 最后一步 使 tweenjs 生效

animate = function () { 
     renderer.render( scene, cameraOrtho )   
     if (TWEEN.update()){
       that.isRunning = true
     } else {
       that.isRunning = false
     }
     requestAnimationFrame(animate)
  }
requestAnimationFrame(animate)

当有动画在运行时 TWEEN.update() 返回 true

下面是使用 Vue threejs tweenjs 做的一个车子运动的页面效果 https://www.wangchunjian.top/rail/