3D object looping rotation on button press

[jsimpsonJD]

Is there a simple way to make a 3d object rotate constantly on a button click?  

[tmccombie · Accepted solution]

Using an app parameter and some JavaScript you can achieve this.

Step 1: Depending on which axis you want to rotate the model on, create a new app parameter and bind it to the corresponding rotation property of your model.

I created an app parameter 'ry' and bound it to the y rotation property

Step 2: Add a JS function for the rotation to Home.js

I used the below function - the quadcopter example experience has some additional code examples for moving model parts. 

var timerId = -1;
var angleIncrement = 45; // degrees
var timingInterval = 30; // milliseconds

$scope.rotateModel = function(){
    if (timerId > -1) {
    clearInterval(timerId);
  }

  timerId = setInterval(function() {
  	
  	if (!$scope.app.params.ry) {
      $scope.app.params.ry = 0;
    }
    
    $scope.$apply(function(){
  
	$scope.app.params.ry += angleIncrement % 360;
    });
    }, timingInterval);
};

Step 3: Create a button and call the JS function on the Click event

The model will now rotate around the y axis after clicking on the button. 

[jsimpsonJD]

Excellent, thank you!  I'll give that a shot.

[tmccombie]

@jsimpsonJD If this worked, please mark the appropriate post with "Accept as Solution" for the benefit of others who may have the same question.

[jsimpsonJD]

That worked great, thanks again!

[lcase]

Thank you for the post! I have tried to implement your suggestion on a model item and while the model now rotates, the center point about which it rotates is off. The location of the model item as displayed by vuforia studio (the blue/green/red box) is different from the location expressed numerically by the x, y and z property's and the rotation takes place around this numerical NOT displayed location. Is there a way to get the model item to rotate around the displayed location or at least have the displayed and numerical model item location be consistent?

Thanks in advance!

-Lulu 

[RolandRaytchev]

Hi Lulu,

yes the point of the rotation is defined in the CAD system which exported the file and is the main or  default coordinate system of the part. So you cannot change it. When you set the values of rotX, rotY and rotZ they are always in respect of this coordinate system (For example for parts coming from Creo it is the default coordinate system)

There are 2 options:

1.)using calculations in JavaScript. So mathematical is possible to rotate via arbitrary axis in space when you set all values X,Y ,Z translation + RX , RY and  RZ - rotations. So a very simple explanation how to change the rotation axis in the 2d plane you can find  here  2D Rotation ...

2.)the second option is to change the coordinate system in the creation CAD system. So you can for example create an new assembly (ROOT assembly) and add/insert  the model/ subassembly and move it in the way that now the default coordinate system of the ROOT assembly is on the desired roation point/axis. Then export the model to .pvz file format.

So I think this was discussed more detailed  in this post:

Mechanism Concept in Vuforia Studio- How to make rotation more easy