【问题标题】:Create a 360 degree, interactive product preview创建 360 度交互式产品预览
【发布时间】:2023-05-26 13:07:01
【问题描述】:

我觉得我要脱离这个论坛的背景了,如果我是的话,请指引我正确的方向。

我要为网站创建 360 度旋转产品预览。例如:

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

我想知道是否有一种简单的方法可以做到这一点,例如我们如何拥有全景照片应用程序,我是否也可以使用某些应用程序创建类似的东西?或者有特定的相机可以做到这一点。

另外,请告诉我如何将这些 360 度旋转图像嵌入网站。

在此先感谢您将我引导至正确的论坛,或在这里帮助我。 泽山。

【问题讨论】:

  • 您想使用 3D 模型还是普通的 2D 图像(不同角度的许多 2D 图像)?
  • 不是 3D 模型,而是穿着这件衣服的真人。
  • 你考虑过使用 gif 图像吗?

标签: android ios mobile 360-degrees


【解决方案1】:

如果你有不同角度的 2d 图像(如果你有 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);
      }      
  }

【讨论】:

  • 你能解释一下这段代码吗?实际上我需要为64张图片修改这段代码
  • @Sushil 你能帮我看看你是如何实现的吗?
【解决方案2】:

我为 android 360-Productview-Android-App 创建了一个可拖动的 360 度视图

用户可以360度旋转图像,就像我们在购物车网站中看到的那样,使用该应用程序的详细信息在链接中进行了描述。请参阅该应用程序的视频演示here

【讨论】:

  • 你能帮我解决没有javascript的情况吗?
【解决方案3】:

图像上的真实物体的问题是您无法计算它们,因此每个视角都有自己的图像,因此基本上您需要为多个视角位置提供一个图像。

5°甚至10°的角度已经看起来相对平滑。根据您的视角,您可以显示 72 或 36 张图像。

我在一个应用程序中做到了这一点,用手指滑动会根据位置带来另一张图像。

要获得这些图像,您需要安装一个可以为每个已定义位置制作照片的装置。

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

【讨论】:

  • 所以我一直在使用它,但内存不足。所以你能告诉我代码或解释一下如何使用 levellist drawable 卸载图像吗?
  • @Christian 你能帮我看看你是如何实现的吗?