Android实现VR查看图片

前言：

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

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

1、依赖vr库

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

2、布局文件

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文件

3、下载Three.js

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

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

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

    }
}