创建 360 度交互式产品预览 [英] 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 度旋转产品预览.例如:

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.

另外，请让我知道如何在网站中嵌入这些 360 度旋转图像.

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.

推荐答案

如果你有不同角度的 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:

在 drawable 文件夹中定义一个 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>

然后使用这样的图像视图创建您的布局:

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

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