Skip to main content
1-Visitor
March 29, 2018
Solved

3D object looping rotation on button press

  • March 29, 2018
  • 1 reply
  • 5523 views

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

Best answer by tmccombie

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. 

1 reply

tmccombie21-Topaz IAnswer
21-Topaz I
March 29, 2018

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. 

1-Visitor
March 29, 2018

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

21-Topaz I
April 4, 2018

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