CODEWITHSUNDEEP
javascriptjquerythree.jsmapbox-gl-jstween.js
abhishek ranjan
abhishek ranjan

Reputation: 652

Animating a 3D object randomly in mapbox using Tween.js

I have started with mapbox and I am trying to animate a 3D object randomly using Tween.js. So far I have managed to move the objects in straight lines on defined paths only. The problem is that this part: .to({ x: 300, y: 200 }, time) is not working with mapbox.

I have been animating objects just by using the onUpdate() function of the Tween.js.

I want to move the object randomly and in a specific area only at a slow speed. Can anyone help me out here please?

Upvotes: 1

Views: 375

Answers (1)

Yan Wu
Yan Wu

Reputation: 79

I'm not an expert on three.js and Tween.js. But I notice that I usually need to call TWEEN.update(); on render() function to render animations. Sorry that I wasn't able to run your code. 

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

Upvotes: 0

Related Questions