javascript - 使用 Tween.js 在 Mapbox 中随机动画 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);
    }
  };