Create a 360 degree, interactive product preview

Question

I feel like I am going to be out of context of this forum, if I am please do direct me to the right direction.

I was to create a 360 degree rotating product preview for a website. eg:

http://uniqstudios.co.uk/vid-360/interactive-360-rotate-rich-media-2

I want to know if there are an easy way to do it, like how we have panoramic photo apps, can I create something like this using some app as well? Or there are specific cameras to do it.

Also, please let me know how to embed those 360 degree rotating images in a website.

Thanks in advance, for directing me to right forum, or helping me out right here. Zeeshan.

Answer 1

In case you have 2d images for different angles (If you have gif image, you can extract frames from it), you can do in following way:

Define an axml in drawable folder:

image_3D_images.xml

<level-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:maxLevel="0" android:drawable="@drawable/bg_01" />
  <item android:maxLevel="1" android:drawable="@drawable/bg_02" />
  <item android:maxLevel="2" android:drawable="@drawable/bg_03" />
  <item android:maxLevel="3" android:drawable="@drawable/bg_04" />
  <item android:maxLevel="4" android:drawable="@drawable/bg_05" />
</level-list>

Then create your layout with an imageview like this:

activity_3d_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  >

<ImageView
  android:id="@+id/santafe3dview"
  android:layout_gravity="center"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/image_3d_images"
  android:scaleType="fitXY"
  />

</RelativeLayout>

Then in you activity write following code :

Launcher3DViewActivity.java:

  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      mContext = this;
      setContentView(R.layout.activity_3d_view);
          m360DegreeImageView = (ImageView)findViewById(R.id.santafe3dview);
   }


  @Override
  public boolean onTouchEvent(MotionEvent event){ 

      int action = MotionEventCompat.getActionMasked(event);

      switch(action) {
          case (MotionEvent.ACTION_DOWN) :

              mStartX = (int)event.getX(); 
              mStartY = (int)event.getY(); 
              return true;

          case (MotionEvent.ACTION_MOVE) :

              mEndX = (int)event.getX(); 
              mEndY = (int)event.getY();

              if((mEndX - mStartX) > 3) { 
                mImageIndex++;
                 if(mImageIndex > 56 )
                    mImageIndex = 0;

                m360DegreeImageView.setImageLevel(mImageIndex);

              }
              if((mEndX - mStartX) < -3) { 
                mImageIndex--;
                 if(mImageIndex <0)
                     mImageIndex = 56;

                 m360DegreeImageView.setImageLevel(mImageIndex);

              } 
              mStartX = (int)event.getX(); 
              mStartY = (int)event.getY(); 
              return true;

          case (MotionEvent.ACTION_UP) :
              mEndX = (int)event.getX(); 
              mEndY = (int)event.getY(); 

              return true;

          case (MotionEvent.ACTION_CANCEL) :
              return true;

          case (MotionEvent.ACTION_OUTSIDE) :
              return true;

          default : 
              return super.onTouchEvent(event);
      }      
  }

Answer 2

i have created a draggable 360 degree view for android 360-Productview-Android-App

where user can rotate the image in 360 degree as we see in shoping cart sites, details of using the app is describe in the link.please see the video demo of the app here

Answer 3

The problem with real objects on images is that you can not calculate them, so each angle of view has its own image, so basically you need to have one image for a number of view-positions.

An angle of 5° or maybe even 10° is already looking relatively smooth. That makes 72 or 36 images that you can show depending on your view-angle.

I did this in one app where sliding with the finger will bring another image depending on the position.

To get these images you need to have an installation where you can make pictures of each of the defined positions.

Be careful with memory management and unload your images properly when they are not needed.