three.js常见小动画

1.创建box

function createBox() {
      // 矩形
      var geometry = new THREE.BoxGeometry(50, 50, 50);
      // 平面
      // var geometry = new THREE.PlaneGeometry( 204, 102 )
      // 球
      // var geometry = new THREE.SphereGeometry(30, 25, 25);
      var material = new THREE.MeshLambertMaterial({
        color: 0xff0000,
        // color: 0x009999,
        transparent: true, //开启透明度
        // opacity: 0, //设置透明度
        opacity: 1, //设置透明度
      });
      mesh = new THREE.Mesh(geometry, material);
      // 加载材质
      // let textureLoader = new THREE.TextureLoader();
      // // 网格材质
      // mesh.material = new THREE.MeshBasicMaterial({
      //   map: textureLoader.load("./Earth.png"),
      // });
      // for (let i = 0; i < 3; i++) {
      //   var mc = mesh.clone();
      //   mc.name = i;
      //   group.add(mc);
      //   mc.translateX(i * 80);
      // }
      scene.add(mesh);
      scene.add(group);
      // group.traverse(function (obj) {
      //   console.log(obj);
      // });
    }

2.串联动画[平移-缩放-复位]

function boxSeriesAnimation() {
      // 动画1:平移
      let pos = {
        x: 0,
        y: 0,
        z: 0,
      };
      let tween1 = new TWEEN.Tween(pos)
        .to({ x: 200, y: 0, z: 0 })
        .onUpdate(() => {
          mesh.position.x = pos.x;
        });

      // 动画2：缩放
      let obj = { s: 1 };
      let tween2 = new TWEEN.Tween(obj)
        .to(
          {
            s: 5,
          },
          4000
        )
        .onUpdate(() => {
          mesh.scale.y = obj.s;
          // 三个方向同时缩放
          // mesh.scale.set(obj.s,obj.s,obj.s);
        });
      // 动画3：平移复位
      let tween3 = new TWEEN.Tween(pos)
        .to({ x: 0, y: 0, z: 0 })
        .onUpdate(() => {
          mesh.position.x = pos.x;
        });
      // 用chain()方法把多端动画串联起来
      tween1.chain(tween2);
      tween2.chain(tween3);
      tween3.chain(tween1);
      tween1.start(); //tween动画开始执行
    }

3.渐变

function createBoxColor() {
      let obj = { r: 1, g: 0, b: 0 };
      let tween = new TWEEN.Tween(obj);
      tween.to(
        {
          r: 0,
          g: 1,
          b: 1,
        },
        2000
      );
      tween.onUpdate(() => {
        // http://www.webgl3d.cn/threejs/docs/?q=color#api/zh/math/Color
        mesh.material.color.setRGB(obj.r, obj.g, obj.b);
      });
      tween.start(); //tween动画开始执行
    }