在mapbox中使用Tween.js实现3D对象的随机动画

Question

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

我一直在使用Tween.js的onUpdate()函数对对象进行动画处理。

我想要随机移动物体，并且只在一个特定的区域以较慢的速度移动。有谁能帮帮我吗？

Answer 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);
    }
  };