使用 Tween.js 在 mapbox 中随机设置 3D 对象的动画答案

【问题标题】：Animating a 3D object randomly in mapbox using Tween.js使用 Tween.js 在 mapbox 中随机设置 3D 对象的动画
【发布时间】：2020-06-26 18:08:03
【问题描述】：

我从 mapbox 开始，我正在尝试使用 Tween.js 随机为 3D 对象设置动画。到目前为止，我已经设法仅在定义的路径上以直线移动对象。问题是这部分：.to({ x: 300, y: 200 }, time) 不适用于 mapbox。

我一直在使用 Tween.js 的 onUpdate() 函数为对象设置动画。

我只想在特定区域内以低速随机移动对象。有谁能帮帮我吗？

【问题讨论】：

标签： javascript jquery three.js mapbox-gl-js tween.js

【解决方案1】：

我不是three.js 和Tween.js 方面的专家。但我注意到我通常需要在 render() 函数上调用 TWEEN.update(); 来渲染动画。抱歉，我无法运行您的代码。

render: function(gl, matrix) {
      Tween.update(); // or tween.update();
      var rotationX = new THREE.Matrix4().makeRotationAxis(
        new THREE.Vector3(1, 0, 0),
        modelTransform.rotateX
      );

      var rotationY = new THREE.Matrix4().makeRotationAxis(
        new THREE.Vector3(0, 1, 0),
        modelTransform.rotateY
      );

      var rotationZ = new THREE.Matrix4().makeRotationAxis(
        new THREE.Vector3(0, 0, 1),
        modelTransform.rotateZ
      );

      var m = new THREE.Matrix4().fromArray(matrix);
      var l = new THREE.Matrix4().makeTranslation(
        modelTransform.translateX,
        modelTransform.translateY,
        modelTransform.translateZ
      ).scale(
        new THREE.Vector3(
          modelTransform.scale * 3, -modelTransform.scale * 3,
          modelTransform.scale * 3
        )
      ).multiply(rotationX).multiply(rotationY).multiply(rotationZ);

      this.camera.projectionMatrix = m.multiply(l);
      this.renderer.state.reset();
      this.renderer.render(this.scene, this.camera);
      this.map.triggerRepaint();
      // console.log("transform ",modelTransform);
    }
  };

【讨论】：

嘿@Yan Wu 感谢您的回复。但是你是否从 render() 外部调用 requestframeAnimation(animate) ，然后也从 render 调用 Tween.update() ？