Threejs 3D头像滚动抽奖

  <div
      ref="threeContainer"
      style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start"
    ></div>

核心代码 

// helix 螺旋
      var vector = new THREE.Vector3();
      let arrIndex = 72;

      for (var i = 0, l = this.objects.length; i < l; i++) {
        var phi = (i / 2) * 0.175 + Math.PI;
        var object = new THREE.Object3D();
        object.position.x = 1600 * Math.sin(phi);
        object.position.y = -(parseInt(i / arrIndex) * 120);
        object.position.z = 1600 * Math.cos(phi);
        vector.x = object.position.x * 2;
        vector.y = object.position.y;
        vector.z = object.position.z * 2;
        object.lookAt(vector);
        this.targets.helix.push(object);
      }
      function play() {
        // 放大进入动画
        that.parent.visible = true;
        // that.parent.scale.set(.8, .8, .8)
        var enterBlowUp = new TWEEN.Tween({
          z: 0.01,
        })
          .to(
            {
              z: 3,
            },
            2e3,
          )
          .onUpdate(function (t) {
            that.parent.scale.set(t, t, t);
          });
        // 停止缩小动画
        var stopShrink = new TWEEN.Tween(that.parent.scale)
          .to(
            {
              x: 0.01,
              y: 0.01,
              z: 0.01,
            },
            0.6e3,
          )
          .onComplete(function (t) {
            destroyed();
          });
        // 放大动画
        var runBlowUp = new TWEEN.Tween(that.parent.scale)
          .to(
            {
              x: 2.8,
              y: 2.8,
              z: 2.8,
            },
            2e3,
          )
          .delay(5e3);
        // 缩小动画
        var runShrink = new TWEEN.Tween(that.parent.scale)
          .to(
            {
              x: 0.8,
              y: 0.8,
              z: 0.8,
            },
            2e3,
          )
          .delay(3e3);
        // 循环旋转动画
        var rotateLoop = new TWEEN.Tween(that.parent.rotation)
          .to(
            {
              y: -2 * Math.PI,
            },
            12e3,
          )
          .repeat(1 / 0)
          .onComplete(function () {
            that.parent.rotation.y = 0;
          })
          .onUpdate(function () {
            that.lotteryPlayState == 'stop' &&
              (runShrink.stop(), runBlowUp.stop(), rotateLoop.stop(), stopShrink.start());
          });

        rotateLoop.start();
        runShrink.chain(runBlowUp);
        runBlowUp.chain(runShrink);
        // enterBlowUp.onComplete(function(e){
        runBlowUp.start();
        // });
        // enterBlowUp.start();

        that.lotteryTweenArr.push(enterBlowUp);
        that.lotteryTweenArr.push(stopShrink);
        that.lotteryTweenArr.push(runBlowUp);
        that.lotteryTweenArr.push(runShrink);
        that.lotteryTweenArr.push(rotateLoop);
      }

      function stop() {
        that.lotteryPlayState = 'stop';
      }

      return {
        play: play,
        stop: stop,
        playing: false,
      };