Create a 360 degree, interactive product preview
Asked Answered
V

3

11

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.

Vat answered 12/3, 2014 at 7:45 Comment(3)
You want to do it using 3D models or normal 2D images (many 2D images for different angles)?Pulvinus
Not a 3D model, but of a real person wearing the dress.Vat
Did you consider using gif image?Pulvinus
P
13

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);
      }      
  }
Pulvinus answered 12/3, 2014 at 8:0 Comment(2)
could you please explain this code actually i need to modify this one for 64 imagesGiovannagiovanni
@Pulvinus Could you please help me out how you implemented ?Aitchbone
L
5

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

Lying answered 28/6, 2015 at 6:54 Comment(1)
Could you please help me out without javascript how we can implement it ?Aitchbone
M
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.

Menander answered 12/3, 2014 at 7:59 Comment(2)
so i have been using this but going to out of memory.So can you show me code or explain me on how to unload images using levellist drawable?Wendellwendi
@Menander Could you please help me out how you implemented ?Aitchbone

© 2022 - 2024 — McMap. All rights reserved.