【轉】Android三種姿勢帶你玩轉360度全景圖功能
方法
1.OpenGL ES
2.GoogleCardboard（Google VR）上面的一個整合模組，我們只使用裡面展示全景圖部分模組
3.Three.js（利用前端姿勢）WebView混合開發
三種姿勢孰強孰弱，根據需求你們自己判斷！我會在結尾給出一些建議，多說無益開擼
先看下三種實現的效果：
1.OpenGL ES
2.Google VR（全景圖模組）
3.Three.js（利用前端姿勢）WebView混合開發
第一種 OpenGL ES
第一種方式使用OpenGL來實現（上面gif圖擷取因為部落格限制上傳圖片的大小，我壓縮了，看起來有些卡其實很流暢的）
可以看到支援旋轉手機檢視、或者拖動圖片檢視、可以看到右邊中心部分有個指示器會隨著角度變化而變化並且點選可以還原起始位置。
一.使用
在build.gradle 檔案中新增庫依賴：
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
在 build.gradle 檔案中新增庫依賴：
dependencies {
compile 'com.github.CN-ZPH:weibo360panorama:v1.0.1'
}
build.gradle 完整程式碼：
apply plugin: 'com.android.application'
android {
compileSdkVersion 26
buildToolsVersion "26.0.1"
defaultConfig {
applicationId "com.zph.three360panorama"
minSdkVersion 19
targetSdkVersion 26
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
}
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
compile 'com.android.support:design:26.+'
compile 'com.github.CN-ZPH:weibo360panorama:v1.0.1'
compile 'com.google.vr:sdk-panowidget:1.80.0'
testCompile 'junit:junit:4.12'
compile files('libs/tbs_sdk_thirdapp_v3.3.0.1045_43300.jar')
}
建立佈局檔案.XML
<com.zph.glpanorama.GLPanorama
android:id="@+id/mGLPanorama"
android:layout_width="match_parent"
android:layout_height="match_parent"></com.zph.glpanorama.GLPanorama>
傳入你的全景圖
*R.drawable.imggugong 這張全景圖傳到控制元件裡面
public class MainActivity extends AppCompatActivity {
private GLPanorama mGLPanorama;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化全景控制元件
mGLPanorama= (GLPanorama) findViewById(R.id.mGLPanorama);
//傳入你的全景圖
mGLPanorama.setGLPanorama(R.drawable.imggugong);
}
}
原理分析
首先我們需要了解全景圖是什麼東西，全景圖是一種廣角圖。通過全景播放器可以讓觀看者身臨其境地進入到全景圖所記錄的場景中去，通常標準的全景圖是一張2：1的影像，其背後的實質就是等距圓柱投影。等距圓柱投影是一種將球體上的各個點投影到圓柱體的側面上的一種投影方式，投影完之後再將它展開就是一張2：1的長方形的影像。比較常見的就是應用在地圖上的投影。
得到全景圖後那我們就需要展示了，看到旁邊地球了嗎？
怎麼展示呢簡單來說就是把全景圖片整個貼到一個球體上。
好了知道原理那我們就該考慮在android上怎麼實現了，在android中繪製3d圖形可以使用OpenGL （就不說OpenGL 基礎了想看的自己百度一大堆資料）。
1.繪製球體：
引用tim_shadow大佬的關於全景圖一篇文章介紹
在OpenGL ES中基本上所有的立體影像都是通過一個個的小三角形拼接而成我們知道球面上面的每一個點（P(x,y,z)）都會滿足方程組（球的極座標方程）：
x = r * sin(a) cos(b)
y = r * cos(a)
z = r * sin(a)sin(b)
其中 r為球的半徑,a為線段 OP與 z軸正方向所夾角，b為 OP在xoy平面的投影 OP‘ 與x的正方向所夾角
我們可以根據這個方程組，通過控制∠a和∠b的變化，從上到下，逆時針的取得我們需要用來組合稱三角形的點，然後我們需要將全景圖片上的點與我們在球上面選取的點一一對應起來（注意：球的座標是3維座標，圖片的座標是2維座標）
球上面的點與圖片上面的點一一對應起來。
紋理和圖片繫結繪製到螢幕上
int[] textures = new int[1];
glGenTextures(1, textures, 0);
int textureId = textures[0];
glBindTexture(GL_TEXTURE_2D, textureId);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
InputStream is = context.getResources().openRawResource(drawableId);
Bitmap bitmapTmp;
try {
bitmapTmp = BitmapFactory.decodeStream(is);
} finally {
try {
is.close();
} catch (IOException e) {
e.printStackTrace();
}
}
GLUtils.texImage2D(GL_TEXTURE_2D, 0, bitmapTmp, 0);
bitmapTmp.recycle();
2.利用感測器讓球隨著手機轉動而轉動
第一想到的就是重力感應感測器，可是隻能獲得我們向那個位置偏移的方向，顯然不可能滿足我們旋轉的需求，使用陀螺儀感測器。
陀螺儀就是內部有一個陀螺，它的軸由於陀螺效應始終與初始方向平行，這樣就可以通過與初始方向的偏差計算出實際方向。
陀螺儀對裝置旋轉角度的檢測是瞬時的而且是非常精確的。
1.註冊陀螺儀感測器
首先註冊陀螺儀感測器根據具體需要自己設定靈敏度，當然越靈敏，越耗電。
註冊陀螺儀感測器，並設定感測器嚮應用中輸出的時間間隔型別是SensorManager.SENSOR_DELAY_GAME(20000微秒)
SensorManager.SENSOR_DELAY_FASTEST(0微秒)：最快。最低延遲，一般不是特別敏感的處理不推薦使用，該模式可能在成手機電力大量消耗，由於傳遞的為原始資料，演算法不處理好會影響遊戲邏輯和UI的效能
SensorManager.SENSOR_DELAY_GAME(20000微秒)：遊戲。遊戲延遲，一般絕大多數的實時性較高的遊戲都是用該級別
SensorManager.SENSOR_DELAY_NORMAL(200000微秒):普通。標準延時，對於一般的益智類或EASY級別的遊戲可以使用，但過低的取樣率可能對一些賽車類遊戲有跳幀現象
SensorManager.SENSOR_DELAY_UI(60000微秒):使用者介面。一般對於螢幕方向自動旋轉使用，相對節省電能和邏輯處理，一般遊戲開發中不使用
我這裡為了測試設定了SENSOR_DELAY_FASTEST，實際使用建議用SENSOR_DELAY_GAME
private void initSensor() {
sensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);
gyroscopeSensor = sensorManager.getDefaultSensor(Sensor.TYPE_GYROSCOPE);
sensorManager.registerListener(this, gyroscopeSensor,
SensorManager.SENSOR_DELAY_FASTEST);
}
2.獲得感測器資料
當感測器的值發生變化時，例如磁阻感測器方向改變時會呼叫OnSensorChanged(). 當感測器的精度發生變化時會呼叫OnAccuracyChanged()方法。
從 x、y、z 軸的正向位置觀看處於原始方位的裝置，如果裝置逆時針旋轉，將會收到正值；否則，為負值
得到兩次檢測到手機旋轉的時間差（納秒），並將其轉化為秒
將手機在各個軸上的旋轉角度相加，即可得到當前位置相對於初始位置的旋轉弧度,將弧度轉化為角度
@Override
public void onSensorChanged(SensorEvent sensorEvent) {
if (sensorEvent.sensor.getType() == Sensor.TYPE_GYROSCOPE) {
if (timestamp != 0) {
final float dT = (sensorEvent.timestamp - timestamp) * NS2S;
angle[0] += sensorEvent.values[0] * dT;
angle[1] += sensorEvent.values[1] * dT;
angle[2] += sensorEvent.values[2] * dT;
float anglex = (float) Math.toDegrees(angle[0]);
float angley = (float) Math.toDegrees(angle[1]);
float anglez = (float) Math.toDegrees(angle[2]);
Sensordt info = new Sensordt();
info.setSensorX(angley);
info.setSensorY(anglex);
info.setSensorZ(anglez);
Message msg = new Message();
msg.what = 101;
msg.obj = info;
mHandler.sendMessage(msg);
}
timestamp = sensorEvent.timestamp;
}
}
3.設定填充球的Y，X的角度
每次獲得角度資料後只需要y，x的值計算位移的值
因為全景圖上下旋轉會翻轉整個圖所以我這裡設定了上下只能偏移50f，如果不限制你可以去掉
mBall.yAngle += dx* 2.0f;這裡*2.0也就是陀螺儀傳過來的值乘以得出偏移的角度，數值越大，每次偏移更快！
Sensordt info = (Sensordt) msg.obj;
float y = info.getSensorY();
float x = info.getSensorX();
float dy = y - mPreviousY;// 計算觸控筆Y位移
float dx = x - mPreviousX;// 計算觸控筆X位移
mBall.yAngle += dx * 2.0f;// 設定填充橢圓繞y軸旋轉的角度
mBall.xAngle += dy * 0.5f;// 設定填充橢圓繞x軸旋轉的角度
if (mBall.xAngle < -50f) {
mBall.xAngle = -50f;
} else if (mBall.xAngle > 50f) {
mBall.xAngle = 50f;
}
mPreviousY = y;
mPreviousX = x;
3.加入手勢操控，拖動圖片轉動
加入手勢這裡沒什麼好說的了，就是重寫onTouchEvent()方法。
這裡唯一要注意的就是，當手指點選螢幕的時候要關閉陀螺儀感測器的監聽不然會引起衝突。當手指離開螢幕，重新監聽陀螺儀感測器。
和上面也一樣只是這裡換成獲取手指偏移角度，而不是感測器的數值，直接看程式碼。
public boolean onTouchEvent(MotionEvent e) {
sensorManager.unregisterListener(this);
float y = e.getY();
float x = e.getX();
switch (e.getAction()) {
case MotionEvent.ACTION_MOVE:
float dy = y - mPreviousYs;// 計算觸控筆Y位移
float dx = x - mPreviousXs;// 計算觸控筆X位移
mBall.yAngle += dx * 0.3f;// 設定填充橢圓繞y軸旋轉的角度
mBall.xAngle += dy * 0.3f;// 設定填充橢圓繞x軸旋轉的角度
if (mBall.xAngle < -50f) {
mBall.xAngle = -50f;
} else if (mBall.xAngle > 50f) {
mBall.xAngle = 50f;
}
Log.i("zphsas", "mHandler *** mPreviousY" + mBall.yAngle);
Log.i("zphsas", "mHandler *** mPreviousx" + mBall.xAngle);
rotate();
break;
case MotionEvent.ACTION_UP:
sensorManager.registerListener(this, gyroscopeSensor,
SensorManager.SENSOR_DELAY_FASTEST);
break;
}
mPreviousYs = y;// 記錄觸控筆位置
mPreviousXs = x;// 記錄觸控筆位置
return true;
}
4.加入指示器
指示器這裡弄了一個角標指示當前在全景圖的角度，並且點選還原起始角度。
可以想象同樣是獲取角度，我們直接放在全景圖改變的地方，讓指示器一起改變，而我們改變的地方只有2個陀螺儀和拖動螢幕。
我這裡指示器放了一張圖也就是一個 ImageView 控制元件
1.為指示器加入動畫跟隨全景圖一起轉
private void rotate() {
RotateAnimation anim = new RotateAnimation(predegrees, -mBall.yAngle,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(200);
img.startAnimation(anim);
predegrees = -mBall.yAngle;//記錄這一次的起始角度作為下次旋轉的初始角度
}
2.點選指示器還原起始位置
當點選還原的時候,我一開始是直接恢復起始位置可是太生硬了，通過獲取當前旋轉的角度，逆向旋轉，慢慢還原，讓其有個過渡的效果。
Y軸=旋轉的角度-90f（起始角度）/10f(每次偏移多少，經過我多次嘗試10f在我的手機上剛剛好)；
得到我們總共偏移幾次可以復位；
X軸同理，因為我上面限制了X軸的最大偏移，這裡就不就算X軸了，不過在完成的同時直接復位X軸。（只是沒有過渡的效果），你可以加上。
我設定的起始角度是90f和0f，也就是X，Y軸的起始點
mHandlers.postDelayed(this, 16);
這行程式碼就是多少毫秒復位一次。
看程式碼：
private void zero() {
yy = (int) ((mBall.yAngle - 90f) / 10f);
mHandlers.post(new Runnable() {
@Override
public void run() {
if (yy != 0) {
if (yy > 0) {
mBall.yAngle = mBall.yAngle - 10f;
mHandlers.postDelayed(this, 16);
yy--;
}
if (yy < 0) {
mBall.yAngle = mBall.yAngle + 10f;
mHandlers.postDelayed(this, 16);
yy++;
}
} else {
mBall.yAngle = 90f;
}
mBall.xAngle = 0f;
}
});
}
至此第一種OpenGL ES方式核心程式碼分析完畢
第二種 Google VR
第二種也就是谷歌官方為移動平臺下VR解決方案，有興趣的可以點開下面連結玩玩，我們只使用其中全景圖模組。
Google VR主頁:https://developers.google.com/vr/
Google VR for Android github地址：https://github.com/googlevr/gvr-android-sdk
一.使用
目前GitHub上最新版本號為1.8.0，我這裡也用最新的了。
最低支援到 minSdkVersion 19 也就是Android 4.4.0
在 build.gradle 檔案中新增庫依賴：
dependencies {
compile 'com.google.vr:sdk-panowidget:1.80.0'
}
2.建立佈局檔案.XML
<com.google.vr.sdk.widgets.pano.VrPanoramaView
android:id="@+id/mVrPanoramaView"
android:layout_width="match_parent"
android:layout_height="250dip"/>
3.AndroidManifest中新增許可權
<!-- These permissions are used by Google VR SDK to get the best Google VR headset profiles. !-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
//因為全景圖較大，所以在application下申請更多空間，但是作為一個有節操的碼農建議你不要這麼幹。
<application android:largeHeap="true" </application>
4.Activity中初始化元件
//初始化VR圖片
private void initVrPaNormalView() {
mVrPanoramaView = (VrPanoramaView) findViewById(R.id.mVrPanoramaView);
paNormalOptions = new VrPanoramaView.Options();
paNormalOptions.inputType = VrPanoramaView.Options.TYPE_STEREO_OVER_UNDER;
// mVrPanoramaView.setFullscreenButtonEnabled (false); //隱藏全屏模式按鈕
mVrPanoramaView.setInfoButtonEnabled(false); //設定隱藏最左邊資訊的按鈕
mVrPanoramaView.setStereoModeButtonEnabled(false); //設定隱藏立體模型的按鈕
mVrPanoramaView.setEventListener(new ActivityEventListener()); //設定監聽
//載入本地的圖片源
mVrPanoramaView.loadImageFromBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.andes), paNormalOptions);
//設定網路圖片源
// panoWidgetView.loadImageFromByteArray();
}
private class ActivityEventListener extends VrPanoramaEventListener {
@Override
public void onLoadSuccess() {//圖片載入成功
}
@Override
public void onLoadError(String errorMessage) {//圖片載入失敗
}
@Override
public void onClick() {//當我們點選了VrPanoramaView 時候觸發 super.onClick();
}
@Override
public void onDisplayModeChanged(int newDisplayMode) {
super.onDisplayModeChanged(newDisplayMode);
}
}
第二種到這裡已經可以顯示玩玩了，也沒什麼可分析的，都是官方提供的sdk，會呼叫相關的方法就好了，具體都有那些方法介面，最好的文件永遠都是官方提供的，上面已經給出了連結，最好自己把GitHub上的官方提供的demo拿下來跑一遍，我就不多介紹了。
第三種 Three.js（利用前端姿勢）WebView混合開發
Three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
Android下相信很多人都多少做過前端開發，現在很多應用程式都是基於前端H5/RN/小程式等來玩的。
當然我們全景圖也可以放到前端來實現，套個WebView利用JavaScript與Android互動來實現一部分功能。
考慮到在多種機型相容性，還有原生WebView的一些坑，我這裡使用騰訊的X5核心的WebView。
一.使用
1.新增x5 SDK
到x5官網下載最新的sdk得到一個jar包
我在這的是3.3.0版本的。
將下載好的jar包放到你的工程libs目錄下
在 build.gradle 檔案中新增庫依賴：
dependencies {
compile files('libs/tbs_sdk_thirdapp_v3.3.0.1045_43300_sharewithdownload_withoutGame_obfs_20170605_170212.jar')
}
2.AndroidManifest.xml里加入許可權宣告
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
3.APPAplication中X5核心初始化
public class APPAplication extends Application {
@Override
public void onCreate() {
// TODO Auto-generated method stub
super.onCreate();
//蒐集本地tbs核心資訊並上報伺服器，伺服器返回結果決定使用哪個核心。
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
@Override
public void onViewInitFinished(boolean arg0) {
// TODO Auto-generated method stub
//x5核心初始化完成的回撥，為true表示x5核心載入成功，否則表示x5核心載入失敗，會自動切換到系統核心。
}
@Override
public void onCoreInitFinished() {
// TODO Auto-generated method stub
}
};
//x5核心初始化介面
QbSdk.initX5Environment(getApplicationContext(), cb);
}
}
4.建立佈局檔案.XML
<com.tencent.smtt.sdk.WebView
android:id="@+id/web"
android:layout_width="match_parent"
android:layout_height="match_parent"></com.tencent.smtt.sdk.WebView>
5.下載Three.js
下載地址：https://threejs.org/
或者去GitHub從我的專案中找今天程式碼都會放到GitHub上
<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>
6.編寫HTML檔案
在 assets 目錄下建立一個html檔案展示全景圖
引入Threejs
panorama:'https://gw.alicdn.com/tfs/TB1WSInRFXXXXXlXpXXXXXXXXXX-1200-600.jpg', 這行就是你的全景圖地址
你可以使用js互動將你的地址傳到HTML上
直接上程式碼了：
<!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>
7.Activity呼叫HTML
很簡單就是把系統的WebView換成Tencent_Webview其他類似
public class WebViewActivity extends AppCompatActivity {
private com.tencent.smtt.sdk.WebView tencent_webview;
private String url = "file:///android_asset/admin.html";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
initView();
}
@SuppressLint("SetJavaScriptEnabled")
private void initView() {
tencent_webview = (WebView) findViewById(R.id.web);
tencent_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;
}
});
}
}
最後附上外掛的可配置引數：
panorama：必填引數，全景圖的路徑。
container：必填引數，放置全景圖的div元素。
autoload：可選，預設值為true，true為自動呼叫全景圖，false為在後面載入全景圖（通過.load()方法）。
usexmpdata：可選，預設值為true，如果Photo Sphere Viewer必須讀入XMP資料則為true。
default_position：可選，預設值為{}，定義預設的位置，及使用者看見的第一個點，例如：{long: Math.PI, lat: Math.PI/2}。
min_fov：可選，預設值為30，觀察的最小區域，單位degrees，在1-179之間。
max_fov：可選，預設值為90，觀察的最大區域，單位degrees，在1-179之間。
allow_user_interactions：可選，預設值為true，設定為false則禁止使用者和全景圖互動（導航條不可用）。
tilt_up_max：可選，預設值為Math.PI/2，向上傾斜的最大角度，單位radians。
tilt_down_max：可選，預設值為Math.PI/2，向下傾斜的最大角度，單位radians。
zoom_level：可選，預設值為0，預設的縮放級別，值在0-100之間。
long_offset：可選，預設值為PI/360，mouse/touch移動時每畫素經過的經度值。
lat_offset：可選，預設值為PI/180，mouse/touch移動時每畫素經過的緯度值。
time_anim：可選，預設值為2000，全景圖在time_anim毫秒後會自動進行動畫。（設定為false禁用它）
theta_offset：過時的選項，可選，預設值為1440，自動動畫時水平方向的速度。
anim_speed：可選，預設值為2rpm，動畫的速度，每秒/分鐘多少radians/degrees/revolutions。
navbar：可選值，預設為false。顯示導航條。
navbar_style：可選值，預設為{}。導航條的自定義樣式。下面是可用的樣式列表：
backgroundColor：導航條的背景顏色，預設值為rgba(61, 61, 61, 0.5)。
buttonsColor：按鈕的前景顏色，預設值為transparent。
activeButtonsBackgroundColor：按鈕啟用狀態的背景顏色，預設值為rgba(255, 255, 255, 0.1)。
buttonsHeight：按鈕的高度，單位畫素，預設值為20。
autorotateThickness：autorotate圖示的厚度，單位畫素，預設值為1。
zoomRangeWidth：縮放的範圍，單位顯示，預設值50。
zoomRangeThickness：縮放的範圍的厚度，單位畫素，預設值1。
zoomRangeDisk：縮放範圍的圓盤直徑，單位畫素，預設值為7。
fullscreenRatio：全屏圖示的比例，預設值為3/4。
fullscreenThickness：全屏圖示的厚度，單位畫素，預設值為2。
loading_msg：可選，預設值為Loading…，圖片載入時的提示文字。
loading_img：可選，預設值為null，在載入時顯示的圖片的路徑。
size：可選，預設值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。
onready：可選值，預設值為null。當全景圖準備就緒並且第一張圖片顯示時的回撥函式。
總結
三種方式都實現完了，不用擔心今天所有程式碼都會放在GitHub上。
三種方式具體你使用哪種我還是沒有推薦的
這裡只是一張圖，你可以多張圖實現來完成簡單的全景街景功能！點選圖片某個區域，跳轉到下一個街景的圖，包括百度地圖裡面也是一張張全景圖拼接而成。
第一種我會在後續繼續完善加入更多的可選引數，你們有興趣也可以自己優化。
第二種是谷歌VR模組的沒什麼好說的，畢竟官方倆字就夠了。
第三種跨平臺最好的，畢竟是個網頁。而我們第三種使用了騰訊X5核心來玩，但是還可以在優化，消耗不小，我建議你單獨給WebView分配一個程式和你的業務分離。
專案原始碼下載地址：
https://github.com/CN-ZPH/
覺得不錯請點一個star蛤！
作者：張鵬輝_道長
連結：https://www.jianshu.com/p/adfab8201660
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
相關文章
- 玩轉 Ceph 的正確姿勢
- 帶你玩轉RabbitMQ的五種佇列MQ佇列
- EasyNLP帶你玩轉CLIP圖文檢索
- 帶你重新“玩轉”FlutterFlutter
- 三步帶你玩轉前端裝飾器前端
- HTML5Canvas實現360度全景圖HTMLCanvas
- 建立 React 元件三種“姿勢”React元件
- 小司機帶你學習單例模式的六種姿勢！單例模式
- CryptAssist-帶你玩轉幣圈
- Guava Cache使用的三種姿勢Guava
- Android Sunflower 帶您玩轉 JetpackAndroidJetpack
- 360度全景看房-基於ThinkPHPPHP
- 手摸手帶你玩轉Xcode ExtensionsXCode
- 手把手帶你玩轉LinuxLinux
- 滿足你各種姿勢的最美Android開源日曆Android
- 老司機帶你玩轉Radare2
- 架構師帶你玩轉分散式鎖架構分散式
- 純乾貨：21天帶你玩轉容器
- 實戰小技巧19:List轉Map List的幾種姿勢
- canvas 影象旋轉與翻轉姿勢解鎖Canvas
- 帶你玩轉css3的3D！CSSS33D
- 看完這篇，你也可以實現一個360度全景外掛
- PS4將支援360度全景照片和影片 你Get了麼
- Orbit 360拍全景圖不用自己跟著轉 這款小玩意值得關注ORB
- 帶你漲姿勢的認識一下 KafkaKafka
- 不可以錯過的Android學習！帶你看Android Jetpack 最佳開發姿勢！AndroidJetpack
- 帶你7天玩轉視覺化建站平臺視覺化
- 【12月11日】真香現場，帶你玩轉 EKS！
- 程式設計師大殺器？帶你玩轉ChatGPT程式設計師ChatGPT
- 【HMS Core】一張圖片帶你玩轉機器學習服務機器學習
- 帶你玩轉七牛雲端儲存——高階篇
- 帶你玩轉 JavaScript ES6 (六) – Map 對映JavaScript
- 玩轉Windows桌面圖示 (轉)Windows
- Android中的Gradle之玩轉自定義功能AndroidGradle
- 淺談OC物件初始化的三種姿勢物件
- 玩轉Redis-老闆帶你深入理解分散式鎖Redis分散式
- 大牛帶你玩轉 CSS3 3D 技術CSSS33D
- 帶你玩轉OpenHarmony AI：打造智慧語音子系統AI