threejs结合tween实现动画效果

1 渲染一个八卦图，实现尺寸从1增大到2，并伴随着旋转

效果如下

 如果用原生js实现上面效果的话，代码如下:

首先创建一个八卦图圆面:

// 创建圆面
let texture =  new THREE.TextureLoader().load(
  require(`../../assets/images/bagua.jpeg`)
);
let geometry = new THREE.CircleGeometry(20, 150);
let mesh=new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.DoubleSide,
      transparent: true,
  })
);
this.scene.add(mesh);
mesh.rotateX(Math.PI/2);

然后写动画方法:

  基本原理就是利用requestAnimationFrame函数，定义两个更新函数，

  在update1中不断增大尺寸，并提高转速；当尺寸达到2，然后调用update2函数，不断减小尺寸和旋转速度，当尺寸达到1再调用update1

// 方式一
let scale=1;
let speed=2;
let inter1;
let inter2;
update1();
function update1(){ 
  mesh.rotateZ((Math.PI/50)*speed);
  mesh.scale.set(scale,scale,scale)
  scale+=0.01
  speed+=0.02;
  inter1=requestAnimationFrame(update1)
  if(scale>2){
    window.cancelAnimationFrame(inter1)
    update2();
  }    
}

function update2(){ 
  mesh.rotateZ((Math.PI/50)*speed);
  mesh.scale.set(scale,scale,scale)
  scale-=0.01
  speed-=0.02;
  inter2=requestAnimationFrame(update2)
  if(scale<1){
      window.cancelAnimationFrame(inter2)
      update1();
  } 
}

 2 利用tween插件实现上述动画

安装tween.js,然后引入tween:

import TWEEN from "tween.js";

代码如下:

const r={
  scale:1,
  rad:0
}
var s1 = new TWEEN.Tween(r);
s1.to({
  scale:2,
  rad:Math.PI/30
}, 4000)
s1.easing(TWEEN.Easing.Sinusoidal.InOut).repeat(Infinity)
s1.onUpdate(function() {
  debugger
  mesh.scale.set(this.scale,this.scale,this.scale)
  mesh.rotateZ(this.rad);
});

var s2 = new TWEEN.Tween(r);
s2.to({
  scale:1,
  rad:0
}, 4000)
s2.easing(TWEEN.Easing.Sinusoidal.InOut).repeat(Infinity)
s2.onUpdate(function() {  
  mesh.scale.set(this.scale,this.scale,this.scale)
  mesh.rotateZ(this.rad);
});
s1.chain(s2);
s2.chain(s1);
s1.start();

然后在animate函数中调用

animate(){
    TWEEN.update();
}

即可完成tween的动画

可以明显看出，使用tween插件，实现动画效果代码可读性提高，比如可以规定动画从起始效果到终止效果的时间，循环次数，过度效果等等；遇到更复杂的动画，tween的优势将更加明显。