创建一个360度的，交互式产品preVIEW [英] Create a 360 degree, interactive product preview

问题描述

我觉得我要出本次论坛的背景下，如果我请你告诉我去正确的方向。

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.

我是创建一个网站，一个360度旋转的产品$​​ P $ PVIEW。例如：

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

http://uniqstudios.co.uk/ VID-360 /互动-360旋转的富媒体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.

另外，请让我知道如何嵌入这些360度旋转的图像在一个网站。

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

在此先感谢，指导我合适的论坛，或者帮助我在这里。
Zeeshan。

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

推荐答案

如果你有不同角度的2D图像（如果你有GIF图像，可以从中提取帧），您可以按以下方式操作：

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:

在定义绘制文件夹中的AXML：

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>

然后像这样的ImageView的创建布局：

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>

然后在你下code活性写：

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);
      }      
  }

这篇关于创建一个360度的，交互式产品preVIEW的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！