Get Started         Best Practices         Developer Guide         FAQ        

Rotating and Translating a 3D model with CraftAR Augmented Reality SDK

Last Updated: Apr 30, 2018
This article applies only to the Augmented Reality SDK.

There are certain applications, such as interactive catalogues where the user is interested in viewing a 3D model from a different angle or even, you want to animate the model such that it spins continously. Such interaction can be implemented by programmatically rotating and translating the 3D model.

The Augmented Reality SDK lets you render 3D models into the AR scene. This article explains how to change the viewpoint a 3D model at run-time with a few lines of code on iOS and on Android.

In the example of this article, we added a slider in our layout. When the user slides, the 3D model is rotated.

Below are two screenshots of a 3D model with different values of the slider.

 
 

Rotate the model on Android

In order to modify the content’s rotation, we need to implement the Slider’s OnSeekBarChangeListener and modify our content’s rotation matrix:

 
  SeekBar slider = (SeekBar)mainLayout.findViewById(R.id.zSlider);
  slider.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
      // Create rotation matrix on z axis
      float[] rotation = new float[16];
      Matrix.setRotateEulerM(rotation, 0, 0, 0, progress);
      modelContent.setRotationMatrix(rotation);
				
    }
 
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
      // TODO Auto-generated method stub
				
    }
 
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
    }
  });
 

Rotate the model on iOS

In order to modify the content’s rotation, we need to connect the slider to an IBAction method and update the content’s rotation as follows:

 
-(IBAction)sliderAction:(id)sender {
    float rotZ = [self.mSliderRotZ value];
    CATransform3D modelRotation = CATransform3DMakeRotation(rotZ*M_PI, 0, 0, 1);
    [currentModel setRotation:modelRotation];

Couldn't find what you were looking for?

support@catchoom.com
https://cdn.desk.com/
false
catchoom
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete