Android实现VR查看图片

前言：

         最近没事逛懂车帝， 发现有VR全景图片看车这个功能， 于是查资料，自己也写一个。

方法一：利用谷歌提供的vr库

1、依赖vr库

implementation 'com.google.vr:sdk-panowidget:1.80.0'

2、布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".VrLocationActivity">
    <com.google.vr.sdk.widgets.pano.VrPanoramaView
        android:id="@+id/vr_view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

3、找到控件，设置图片， 图片由美工提供

public class VrLocationActivity extends AppCompatActivity {
    int type = -1;
    Bitmap mBitmap;
    VrPanoramaView panoWidgetView;
    VrPanoramaView.Options paNormalOptions;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_vr_location);

        type = getIntent().getIntExtra("type", 0);
        panoWidgetView = findViewById(R.id.vr_view);
        panoWidgetView.setEventListener(new ActivityEventListener());
        paNormalOptions = new VrPanoramaView.Options();
//      mVrPanoramaView.setFullscreenButtonEnabled (false); //隐藏全屏模式按钮
        panoWidgetView.setInfoButtonEnabled(false); //设置隐藏最左边信息的按钮
        panoWidgetView.setStereoModeButtonEnabled(false); //设置隐藏立体模型的按钮
        panoWidgetView.setEventListener(new ActivityEventListener()); //设置监听

        if (type == 1) {
            /**
                包含两个大小相等的投影 全景图垂直叠加。顶部图像被显示给左眼、底部图像被显示给右眼。图像将覆盖沿水平轴360度，而垂直范围是根据图像的宽高比来计算
            */
            paNormalOptions.inputType = VrPanoramaView.Options.TYPE_STEREO_OVER_UNDER;
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.andes);
        }
        else if (type == 2) {
            paNormalOptions.inputType = VrPanoramaView.Options.TYPE_MONO;
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.andes1);
        }
        else if (type == 3) {
            /**
             * 图像被预期以覆盖沿着其水平轴360度，而垂直范围是根据图像的宽高比来计算。例如，如果一个1000x250像素的图像，给出所述全景将覆盖360x90度与垂直范围是-45至+45度
             */
            paNormalOptions.inputType = VrPanoramaView.Options.TYPE_MONO;
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.andes2);
        }

        panoWidgetView.loadImageFromBitmap(mBitmap, paNormalOptions);
    }

    private class ActivityEventListener extends VrPanoramaEventListener {
        /**
         * Called by pano widget on the UI thread when it's done loading the image.
         */
        @Override
        public void onLoadSuccess() {
            Log.e("dongjie", "图片加载成功了 ");
        }

        /**
         * Called by pano widget on the UI thread on any asynchronous error.
         */
        @Override
        public void onLoadError(String errorMessage) {
            Log.d("dongjie", "图片加载: " + errorMessage);
        }

        @Override
        public void onDisplayModeChanged(int newDisplayMode) {
            //改变显示模式时候（全屏模式和纸板模式）
            super.onDisplayModeChanged(newDisplayMode);
            Log.i("dongjie", "onDisplayModeChanged------------>" + newDisplayMode);
        }
        @Override
        public void onClick() {
            super.onClick();
            //点击VrPanoramaView
            Log.i("dongjie", "onClick------------>");
        }
    }

    @Override
    protected void onPause() {
        panoWidgetView.pauseRendering();
        super.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        panoWidgetView.resumeRendering();
    }

    @Override
    protected void onDestroy() {
        // Destroy the widget and free memory.
        panoWidgetView.shutdown();
        super.onDestroy();
    }
}

二、Three.js      WebView混合开发

1、集成x5内核， 这里建议使用x5内核， 加载效率会快好多，集成过程在此省略

2、xml文件

<com.tencent.smtt.sdk.WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

3、下载Three.js

下载地址：https://threejs.org/

4、编写HTML代码： 这一步有困难的话可以交给web前端去做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Photo Sphere Viewer</title>
        <meta name="viewport" content="initial-scale=1.0" />
        <script src="js/three.min.js"></script>
        <script src="js/photo-sphere-viewer.min.js"></script>
        <style>
            html, body {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #container {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <script>
            var div = document.getElementById('container');
            var PSV = new PhotoSphereViewer({
                    panorama: 'https://gw.alicdn.com/tfs/TB1WSInRFXXXXXlXpXXXXXXXXXX-1200-600.jpg',
                    container: div,
                    time_anim: false,
                    navbar: true,
                    navbar_style: {
                        backgroundColor: 'rgba(58, 67, 77, 0.7)'
                    },
                });
        </script>
    </body>
</html>

5、编写Activity代码， 用webview加载上面html代码， 一般是web前端提供一个链接

public class WebViewActivity extends AppCompatActivity {

    private WebView webview;
    private String url = "file:///android_asset/vr.html";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        
        webview = (WebView) findViewById(R.id.web_view);
        webview.loadUrl(url);
        WebSettings webSettings = tencent_webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        tencent_webview.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return true;
            }
        });

    }
}