创建一个360度交互式产品预览。

Question

创建一个360度交互式产品预览。

androidiosmobile360-degrees

11

我感觉如果我这篇文章不符合论坛的主题，那请直接指引我正确的方向。

我想为一个网站创建一个360度旋转的产品预览。例如：

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

我想知道是否有一种简单的方法来做到这一点，就像我们有全景照片应用程序一样，是否可以使用某些应用程序创建类似的东西？或者有专门的相机来完成它。

另外，请告诉我如何在网站中嵌入这些360度旋转的图像。

提前感谢你指引我正确的论坛或直接在这里帮助我。 Zeeshan。

- Zeeshan Rang

你想使用3D模型还是普通的2D图像（多个不同角度的2D图像）来完成它？ - Sushil

不是3D模型，而是真人穿着裙子的照片。 - Zeeshan Rang

你有考虑使用gif图片吗？ - Sushil

3个回答

5

我已经为Android创建了一个可拖动的360度视图360-Productview-Android-App，用户可以像在购物车网站上一样旋转360度图片。应用程序的使用细节在链接中有描述，请查看应用程序的视频演示here。

- Ramz

请问在不使用JavaScript的情况下，我们该如何实现它？ - Menu

3

真实物体在图像上的问题在于无法进行计算，因此每个视角都有自己的图像，基本上需要为多个视角位置准备一个图像。5°或者10°的角度已经看起来比较平滑了。这样就可以根据视角显示72或36张图片。

我在一个应用程序中做过这个，通过手指滑动可以根据位置切换到另一张图片。

要获得这些图片，您需要安装设备，在每个定义的位置拍摄照片。

注意内存管理并在不需要时正确卸载图像。

- Christian

我一直在使用这个，但是会出现内存不足的问题。你能否向我展示代码或者解释一下如何使用levellist drawable来卸载图片？ - bv akhil

@Christian，你能告诉我你是如何实现的吗？ - Menu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sushil · Accepted Answer

如果你拥有不同角度的二维图片（如果你有gif图像，可以从中提取帧），可以按照以下方式进行操作：

在drawable文件夹中定义一个axml：

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创建您的布局：

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>

那么在你的活动中编写以下代码：

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