Android移动开发-VR全景照片简单实现

蔚落 2023-01-01 08:55 159阅读 0赞

VR技术的热度每年都在增长，在购物、旅游等方面运用度很高。该项目引用了Google的vr:sdk-panowidget依赖库，通过VrPanoramaView，简单实现在手机上查看全景照片，下面是项目介绍。  
  
  
build.gradle(Module:app)需要导入依赖：

> dependencies \{  
> implementation ‘com.google.vr:sdk-panowidget:1.30.0’  
> \}

布局文件 activity\_main.xml，调用Google的VrPanoramaView。在运行时支持触摸水平滑动浏览全景，不支持垂直方向；实现自动调用手机陀螺仪传感器，进行同步旋转全景图片。

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">
        <com.google.vr.sdk.widgets.pano.VrPanoramaView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/my_vr_view">
        </com.google.vr.sdk.widgets.pano.VrPanoramaView>
    </RelativeLayout>

MainActivity文件，在应用运行时，读取assets文件中的素材pic.jpg，调用makeimageToByte方法转换格式。  
Options是VrPanoramaView所需的设置，设置TYPE\_MONO，图像被预期以覆盖沿着其水平轴360度，使图片可以360水平旋转。  
若使用VR设备，可以设置TYPE\_STEREO\_OVER\_UNDER，将图片分割成重合度很高两部分，分别对应左眼与右眼。

public class MainActivity extends AppCompatActivity {
        
    
        /**
         * vr控件
         */
        private VrPanoramaView vrpview;
    
        /**
         * byte格式
         */
        private Bitmap bitmap = null;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            vrpview = (VrPanoramaView) findViewById(R.id.my_vr_view);
    
            VrPanoramaView.Options options = new VrPanoramaView.Options();
            options.inputType = VrPanoramaView.Options.TYPE_MONO;
            vrpview.setStereoModeButtonEnabled(false);//隐藏全屏模式
            vrpview.setInfoButtonEnabled(false);//隐藏信息按钮
    
            String uri = "pic.jpg";
            vrpview.loadImageFromByteArray(makeimageToByte(uri), options);
    
            vrpview.setEventListener(new VrPanoramaEventListener(){
        
                @SuppressLint("ShowToast")
                @Override
                public void onLoadSuccess() {
        
                    //加载成功
                    super.onLoadSuccess();
                    Toast.makeText(MainActivity.this, "加载完成", Toast.LENGTH_SHORT).show();
                }
    
                @SuppressLint("ShowToast")
                @Override
                public void onLoadError(String errorMessage) {
        
                    //加载失败
                    super.onLoadError(errorMessage);
                    Toast.makeText(MainActivity.this, "加载失败", Toast.LENGTH_SHORT).show();
                }
    
                @SuppressLint("ShowToast")
                @Override
                public void onClick() {
        
                    //点击事件
                    super.onClick();
                    Toast.makeText(MainActivity.this, "点击了全景", Toast.LENGTH_SHORT).show();
                }
    
                @SuppressLint("ShowToast")
                @Override
                public void onDisplayModeChanged(int newDisplayMode) {
        
                    //切换模式
                    super.onDisplayModeChanged(newDisplayMode);
                    Toast.makeText(MainActivity.this, "改变显示模式", Toast.LENGTH_SHORT).show();
                }
            });
    
        }

makeimageToByte方法，通过getAssets()读取assets文件。

public byte[] makeimageToByte(String path){
        
            byte[] data = null;
            InputStream input = null;
            ByteArrayOutputStream output = null;
            try {
        
                input = getAssets().open(path);
                output = new ByteArrayOutputStream();
                byte[] buf = new byte[1024];
                int numBytesRead;
                while ((numBytesRead = input.read(buf)) != -1) {
        
                    output.write(buf, 0, numBytesRead);
                }
                data = output.toByteArray();
            } catch (IOException ex1) {
        
                ex1.printStackTrace();
            } finally {
        
                try {
        
                    if (input != null) {
        
                        input.close();
                    }
                    if (output != null) {
        
                        output.close();
                    }
                } catch (IOException e) {
        
                    e.printStackTrace();
                }
            }
            return data;
        }

需要注意的是，assets文件的目录一定要与res和java同级，否则素材无法被读取，软件运行时没有对应的图片显示。  
查看方法：切换到Project->app->src->main  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMzgwMQ_size_16_color_FFFFFF_t_70]  
最后，复写处理资源的方法，加载图片与回收资源等

/**
         * 渲染3D
         */
        @Override
        protected void onResume() {
        
            super.onResume();
            if (vrpview != null){
        
                vrpview.resumeRendering();
            }
        }
        /**
         * 暂停渲染
         */
        @Override
        protected void onPause() {
        
            super.onPause();
            if (vrpview != null){
        
                vrpview.pauseRendering();
            }
        }
    
        /**
         * 释放资源
         */
        @Override
        protected void onDestroy() {
        
    
            vrpview.shutdown();
            if (bitmap != null && !bitmap.isRecycled()){
        
                bitmap.recycle();
                System.gc();
            }
            super.onDestroy();
        }

assets中放入素材：pic.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMzgwMQ_size_16_color_FFFFFF_t_70_pic_center]  
运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMzgwMQ_size_16_color_FFFFFF_t_70 1]  
水平触摸滑动  
![在这里插入图片描述][20201227235958358.gif_pic_center]

陀螺仪传感  
![在这里插入图片描述][20201228000604372.gif_pic_center]  
作者 石文禧  
[原文链接][Link 1]  
[参考资料][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMzgwMQ_size_16_color_FFFFFF_t_70]: /images/20221120/acca590967214097ab5a30b0753e96b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMzgwMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3069147016494873bd987b94826cd372.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMzgwMQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/db7e15686b964499860f6d7c22bb7809.png
[20201227235958358.gif_pic_center]: /images/20221120/2e2602b1f84a485888c217d5f3c64660.png
[20201228000604372.gif_pic_center]: /images/20221120/a8996b27a1464c4aacbb1e62f97d0eb6.png
[Link 1]: https://blog.csdn.net/weixin_43933801/article/details/111828989
[Link 2]: https://blog.csdn.net/weixin_34281537/article/details/92421790