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.VrPanoramaViewandroid: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;@Overrideprotected 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.*/@Overridepublic void onLoadSuccess() {Log.e("dongjie", "图片加载成功了 ");}/*** Called by pano widget on the UI thread on any asynchronous error.*/@Overridepublic void onLoadError(String errorMessage) {Log.d("dongjie", "图片加载: " + errorMessage);}@Overridepublic void onDisplayModeChanged(int newDisplayMode) {//改变显示模式时候（全屏模式和纸板模式）super.onDisplayModeChanged(newDisplayMode);Log.i("dongjie", "onDisplayModeChanged------------>" + newDisplayMode);}@Overridepublic void onClick() {super.onClick();//点击VrPanoramaViewLog.i("dongjie", "onClick------------>");}}@Overrideprotected void onPause() {panoWidgetView.pauseRendering();super.onPause();}@Overrideprotected void onResume() {super.onResume();panoWidgetView.resumeRendering();}@Overrideprotected void onDestroy() {// Destroy the widget and free memory.panoWidgetView.shutdown();super.onDestroy();}
}

二、Three.js WebView混合开发

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

2、xml文件

<com.tencent.smtt.sdk.WebViewandroid: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";@Overrideprotected 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() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {return true;}});}
}

Android实现VR查看图片相关推荐

Android使用ACTION_VIEW查看图片和视频
Android使用ACTION_VIEW查看图片和视频一.目标二.实现方案三.最终代码四.过程回顾五.接下来六.Finally 神马笔记已经实现在笔记中插入图片和视频,但是不能全屏查看. ...
android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
前言用TextView显示Html图文,每一个需求都是需要探索的,不再是简单的添加点击事件就可以了. 1.如何添加点击事件这里要使用上在Html.forHtml()方法中的第四个参数:Html.T ...
安卓直接展示html,Android textView展示html图片，实现图文混排，点击查看大图片
Android textView展示html图片,实现图文混排,点击查看大图片最近要展示html在textView上,实现图文混排,并且图片可以点击放大,所以去研究了一下,效果图如下: 我们知道te ...
android仿微信头像点击放大查看,仿微信查看图片（带大小图切换查看）
之前一直想仿微信朋友圈那样做个图片查看,但是看了网上很多demo都觉得比较简单,少了从小图切换到大图的加载过程,都只是在所有预览里加载大图,点击进去也是加载大图,于是在网上下载了别人的demo自己修改 ...
android 图片大小判断,Android列表查看图片大小
我的列表视图中有一个问题,它包含一个ImageView和每个项目的几个TextView.Android列表查看图片大小更多或更少的,有TextViews的两条线和一个ImageView的(XX)应该 ...
Android Camera开发系列（下）——自定义Camera实现拍照查看图片等功能
Android Camera开发系列(下)--自定义Camera实现拍照查看图片等功能 Android Camera开发系列(上)--Camera的基本调用与实现拍照功能以及获取拍照图片加载大图片上 ...
Android多媒体功能开发(4)——调用系统Activity拍照、选择图片、查看图片、裁剪图片
一.拍照拍照界面就是调用系统照相机,动作为MediaStore.ACTION_IMAGE_CAPTURE.生成的照片有三种返回方式: 在调用拍照应用的Intent中通过EXTRA_OUTPUT属性设 ...
Android 查看图片的经纬度
第一步随便找个权限框架 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /& ...
Android宫格动态列,Android实现宫格图片连续滑动效果
本文给大家介绍如何在Android中实现宫格图片连续滑动效果. 在这之前,写过几篇关于在Android中实现滑动的效果,毕竟滑动效果在Andriod开发中也使用得比较频繁,有兴趣的朋友请查看我以前的文 ...
Android 九宫格布局（图片上传、预览）
前言: 利用RecyclerView展示朋友圈UI布局,包含展示.预览.删除等功能效果图 1.在项目app\build.gradle添加依赖 //图片加载implementation 'com.gi ...

Android实现VR查看图片

Android实现VR查看图片相关推荐

最新文章

热门文章