摘要：注冊陀螺儀傳感器首先注冊陀螺儀傳感器根據(jù)具體需要自己設(shè)置靈敏度，當(dāng)然越靈敏，越耗電。注冊陀螺儀傳感器，并設(shè)定傳感器向應(yīng)用中輸出的時(shí)間間隔類型是微秒微秒最快。

簡介

大家好我是張鵬輝（道長）人如其名，我是天橋上算命的，轉(zhuǎn)發(fā)這條博文，接下來一個(gè)月會(huì)有意想不到的驚喜發(fā)生。
最近微博上的全景圖火了，所以決定實(shí)現(xiàn)一下。

工程里面圖片資源來自網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系我，馬上刪除
當(dāng)然實(shí)現(xiàn)的方式很多比如OpenCV、u3d等。
這里提供三種方式實(shí)現(xiàn)：

OpenGL ES

GoogleCardboard（Google VR）上面的一個(gè)集成模塊，我們只使用里面展示全景圖部分模塊

Three.js（利用前端姿勢）WebView混合開發(fā)
三種姿勢孰強(qiáng)孰弱，根據(jù)需求你們自己判斷！我會(huì)在結(jié)尾給出一些建議，多說無益開擼

先看下三種實(shí)現(xiàn)的效果：

1.OpenGL ES

2.Google VR（全景圖模塊）

3.Three.js（利用前端姿勢）WebView混合開發(fā)

第一種方式使用OpenGL來實(shí)現(xiàn)（上面gif圖截取因?yàn)椴┛拖拗粕蟼鲌D片的大小，我壓縮了，看起來有些卡其實(shí)很流暢的）
可以看到支持旋轉(zhuǎn)手機(jī)查看、或者拖動(dòng)圖片查看、可以看到右邊中心部分有個(gè)指示器會(huì)隨著角度變化而變化并且點(diǎn)擊可以還原起始位置。

有些小伙伴懶得看原理，直接就想拿來用所以我先說集成方式吧！

在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")
}

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

首先我們需要了解全景圖是什么東西，全景圖是一種廣角圖。通過全景播放器可以讓觀看者身臨其境地進(jìn)入到全景圖所記錄的場景中去，通常標(biāo)準(zhǔn)的全景圖是一張2：1的圖像，其背后的實(shí)質(zhì)就是等距圓柱投影。等距圓柱投影是一種將球體上的各個(gè)點(diǎn)投影到圓柱體的側(cè)面上的一種投影方式，投影完之后再將它展開就是一張2：1的長方形的圖像。比較常見的就是應(yīng)用在地圖上的投影。

得到全景圖后那我們就需要展示了，看到旁邊地球了嗎？

怎么展示呢簡單來說就是把全景圖片整個(gè)貼到一個(gè)球體上。
好了知道原理那我們就該考慮在android上怎么實(shí)現(xiàn)了，在android中繪制3d圖形可以使用OpenGL （就不說OpenGL 基礎(chǔ)了想看的自己百度一大堆資料）。

引用tim_shadow大佬的關(guān)于全景圖一篇文章介紹

在OpenGL ES中基本上所有的立體圖像都是通過一個(gè)個(gè)的小三角形拼接而成我們知道球面上面的每一個(gè)點(diǎn)（P(x,y,z)）都會(huì)滿足方程組（球的極坐標(biāo)方程）：
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的正方向所夾角

我們可以根據(jù)這個(gè)方程組，通過控制∠a和∠b的變化，從上到下，逆時(shí)針的取得我們需要用來組合稱三角形的點(diǎn)，然后我們需要將全景圖片上的點(diǎn)與我們在球上面選取的點(diǎn)一一對應(yīng)起來（注意：球的坐標(biāo)是3維坐標(biāo)，圖片的坐標(biāo)是2維坐標(biāo)）
球上面的點(diǎn)與圖片上面的點(diǎn)一一對應(yīng)起來。

紋理和圖片綁定繪制到屏幕上

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

第一想到的就是重力感應(yīng)傳感器，可是只能獲得我們向那個(gè)位置偏移的方向，顯然不可能滿足我們旋轉(zhuǎn)的需求，使用陀螺儀傳感器。
陀螺儀就是內(nèi)部有一個(gè)陀螺，它的軸由于陀螺效應(yīng)始終與初始方向平行，這樣就可以通過與初始方向的偏差計(jì)算出實(shí)際方向。
陀螺儀對設(shè)備旋轉(zhuǎn)角度的檢測是瞬時(shí)的而且是非常精確的。

首先注冊陀螺儀傳感器根據(jù)具體需要自己設(shè)置靈敏度，當(dāng)然越靈敏，越耗電。

注冊陀螺儀傳感器，并設(shè)定傳感器向應(yīng)用中輸出的時(shí)間間隔類型是SensorManager.SENSOR_DELAY_GAME(20000微秒)
SensorManager.SENSOR_DELAY_FASTEST(0微秒)：最快。最低延遲，一般不是特別敏感的處理不推薦使用，該模式可能在成手機(jī)電力大量消耗，由于傳遞的為原始數(shù)據(jù)，算法不處理好會(huì)影響游戲邏輯和UI的性能
SensorManager.SENSOR_DELAY_GAME(20000微秒)：游戲。游戲延遲，一般絕大多數(shù)的實(shí)時(shí)性較高的游戲都是用該級別
SensorManager.SENSOR_DELAY_NORMAL(200000微秒):普通。標(biāo)準(zhǔn)延時(shí)，對于一般的益智類或EASY級別的游戲可以使用，但過低的采樣率可能對一些賽車類游戲有跳幀現(xiàn)象
SensorManager.SENSOR_DELAY_UI(60000微秒):用戶界面。一般對于屏幕方向自動(dòng)旋轉(zhuǎn)使用，相對節(jié)省電能和邏輯處理，一般游戲開發(fā)中不使用

我這里為了測試設(shè)置了SENSOR_DELAY_FASTEST，實(shí)際使用建議用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);
    }

當(dāng)傳感器的值發(fā)生變化時(shí)，例如磁阻傳感器方向改變時(shí)會(huì)調(diào)用OnSensorChanged(). 當(dāng)傳感器的精度發(fā)生變化時(shí)會(huì)調(diào)用OnAccuracyChanged()方法。

從 x、y、z 軸的正向位置觀看處于原始方位的設(shè)備，如果設(shè)備逆時(shí)針旋轉(zhuǎn)，將會(huì)收到正值；否則，為負(fù)值
得到兩次檢測到手機(jī)旋轉(zhuǎn)的時(shí)間差（納秒），并將其轉(zhuǎn)化為秒
將手機(jī)在各個(gè)軸上的旋轉(zhuǎn)角度相加，即可得到當(dāng)前位置相對于初始位置的旋轉(zhuǎn)弧度,將弧度轉(zhuǎn)化為角度

   @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;

        }
    }

每次獲得角度數(shù)據(jù)后只需要y，x的值計(jì)算位移的值

因?yàn)槿皥D上下旋轉(zhuǎn)會(huì)翻轉(zhuǎn)整個(gè)圖所以我這里設(shè)置了上下只能偏移50f，如果不限制你可以去掉

mBall.yAngle += dx 2.0f;這里2.0也就是陀螺儀傳過來的值乘以得出偏移的角度，數(shù)值越大，每次偏移更快！

   Sensordt info = (Sensordt) msg.obj;
                    float y = info.getSensorY();
                    float x = info.getSensorX();
                    float dy = y - mPreviousY;// 計(jì)算觸控筆Y位移
                    float dx = x - mPreviousX;// 計(jì)算觸控筆X位移
                    mBall.yAngle += dx * 2.0f;// 設(shè)置填充橢圓繞y軸旋轉(zhuǎn)的角度
                    mBall.xAngle += dy * 0.5f;// 設(shè)置填充橢圓繞x軸旋轉(zhuǎn)的角度
                    if (mBall.xAngle < -50f) {
                        mBall.xAngle = -50f;
                    } else if (mBall.xAngle > 50f) {
                        mBall.xAngle = 50f;
                    }
                    mPreviousY = y;
                    mPreviousX = x;

加入手勢這里沒什么好說的了，就是重寫onTouchEvent()方法。
這里唯一要注意的就是，當(dāng)手指點(diǎn)擊屏幕的時(shí)候要關(guān)閉陀螺儀傳感器的監(jiān)聽不然會(huì)引起沖突。當(dāng)手指離開屏幕，重新監(jiān)聽陀螺儀傳感器。
和上面也一樣只是這里換成獲取手指偏移角度，而不是傳感器的數(shù)值，直接看代碼。

  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;// 計(jì)算觸控筆Y位移
                float dx = x - mPreviousXs;// 計(jì)算觸控筆X位移

                mBall.yAngle += dx * 0.3f;// 設(shè)置填充橢圓繞y軸旋轉(zhuǎn)的角度
                mBall.xAngle += dy * 0.3f;// 設(shè)置填充橢圓繞x軸旋轉(zhuǎn)的角度
                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;
    }

指示器這里弄了一個(gè)角標(biāo)指示當(dāng)前在全景圖的角度，并且點(diǎn)擊還原起始角度。
可以想象同樣是獲取角度，我們直接放在全景圖改變的地方，讓指示器一起改變，而我們改變的地方只有2個(gè)陀螺儀和拖動(dòng)屏幕。
我這里指示器放了一張圖也就是一個(gè) ImageView 控件

1.為指示器加入動(dòng)畫跟隨全景圖一起轉(zhuǎn)

  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;//記錄這一次的起始角度作為下次旋轉(zhuǎn)的初始角度
    }

2.點(diǎn)擊指示器還原起始位置

當(dāng)點(diǎn)擊還原的時(shí)候,我一開始是直接恢復(fù)起始位置可是太生硬了，通過獲取當(dāng)前旋轉(zhuǎn)的角度，逆向旋轉(zhuǎn)，慢慢還原，讓其有個(gè)過渡的效果。

Y軸=旋轉(zhuǎn)的角度-90f（起始角度）/10f(每次偏移多少，經(jīng)過我多次嘗試10f在我的手機(jī)上剛剛好)；
得到我們總共偏移幾次可以復(fù)位；
X軸同理，因?yàn)槲疑厦嫦拗屏薠軸的最大偏移，這里就不就算X軸了，不過在完成的同時(shí)直接復(fù)位X軸。（只是沒有過渡的效果），你可以加上。
我設(shè)置的起始角度是90f和0f，也就是X，Y軸的起始點(diǎn)
mHandlers.postDelayed(this, 16);
這行代碼就是多少毫秒復(fù)位一次。

看代碼：

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

第二種也就是谷歌官方為移動(dòng)平臺(tái)下VR解決方案，有興趣的可以點(diǎn)開下面鏈接玩玩，我們只使用其中全景圖模塊。

Google VR主頁:https://developers.google.com...
Google VR for Android github地址：https://github.com/googlevr/g...

目前GitHub上最新版本號(hào)為1.8.0，我這里也用最新的了。
最低支持到 minSdkVersion 19 也就是Android 4.4.0
在 build.gradle 文件中添加庫依賴：

    dependencies {
           compile "com.google.vr:sdk-panowidget:1.80.0"
    }

 
    
    
    //因?yàn)槿皥D較大，所以在application下申請更多空間，但是作為一個(gè)有節(jié)操的碼農(nóng)建議你不要這么干。
 

//初始化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); //設(shè)置隱藏最左邊信息的按鈕
        mVrPanoramaView.setStereoModeButtonEnabled(false); //設(shè)置隱藏立體模型的按鈕
        mVrPanoramaView.setEventListener(new ActivityEventListener()); //設(shè)置監(jiān)聽
        //加載本地的圖片源
        mVrPanoramaView.loadImageFromBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.andes), paNormalOptions);
        //設(shè)置網(wǎng)絡(luò)圖片源
//        panoWidgetView.loadImageFromByteArray();
    }

    private class ActivityEventListener extends VrPanoramaEventListener {
        @Override
        public void onLoadSuccess() {//圖片加載成功
        }


        @Override
        public void onLoadError(String errorMessage) {//圖片加載失敗
        }

        @Override
        public void onClick() {//當(dāng)我們點(diǎn)擊了VrPanoramaView 時(shí)候觸發(fā)            super.onClick();
        }

        @Override
        public void onDisplayModeChanged(int newDisplayMode) {
            super.onDisplayModeChanged(newDisplayMode);
        }
    }

Three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
Android下相信很多人都多少做過前端開發(fā)，現(xiàn)在很多應(yīng)用程序都是基于前端H5/RN/小程序等來玩的。
當(dāng)然我們?nèi)皥D也可以放到前端來實(shí)現(xiàn)，套個(gè)WebView利用JavaScript與Android交互來實(shí)現(xiàn)一部分功能。

考慮到在多種機(jī)型兼容性，還有原生WebView的一些坑，我這里使用騰訊的X5內(nèi)核的WebView。

到x5官網(wǎng)下載最新的sdk得到一個(gè)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")

    }

public class APPAplication extends Application {

    @Override
    public void onCreate() {
        // TODO Auto-generated method stub
        super.onCreate();
        //搜集本地tbs內(nèi)核信息并上報(bào)服務(wù)器，服務(wù)器返回結(jié)果決定使用哪個(gè)內(nèi)核。
        
        QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
            
            @Override
            public void onViewInitFinished(boolean arg0) {
                // TODO Auto-generated method stub
                //x5內(nèi)核初始化完成的回調(diào)，為true表示x5內(nèi)核加載成功，否則表示x5內(nèi)核加載失敗，會(huì)自動(dòng)切換到系統(tǒng)內(nèi)核。
            }
            
            @Override
            public void onCoreInitFinished() {
                // TODO Auto-generated method stub
            }
        };
        //x5內(nèi)核初始化接口
        QbSdk.initX5Environment(getApplicationContext(),  cb);
    }

}

下載地址：https://threejs.org/ 
或者去GitHub從我的項(xiàng)目中找今天代碼都會(huì)放到GitHub上

在 assets 目錄下創(chuàng)建一個(gè)html文件展示全景圖
引入Threejs
panorama:"https://gw.alicdn.com/tfs/TB1...", 這行就是你的全景圖地址

你可以使用js交互將你的地址傳到HTML上

直接上代碼了：

很簡單就是把系統(tǒng)的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;
            }
        });
    }

}

最后附上插件的可配置參數(shù)：

panorama：必填參數(shù)，全景圖的路徑。
container：必填參數(shù)，放置全景圖的div元素。
autoload：可選，默認(rèn)值為true，true為自動(dòng)調(diào)用全景圖，false為在后面加載全景圖（通過.load()方法）。
usexmpdata：可選，默認(rèn)值為true，如果Photo Sphere Viewer必須讀入XMP數(shù)據(jù)則為true。
default_position：可選，默認(rèn)值為{}，定義默認(rèn)的位置，及用戶看見的第一個(gè)點(diǎn)，例如：{long: Math.PI, lat: Math.PI/2}。
min_fov：可選，默認(rèn)值為30，觀察的最小區(qū)域，單位degrees，在1-179之間。
max_fov：可選，默認(rèn)值為90，觀察的最大區(qū)域，單位degrees，在1-179之間。
allow_user_interactions：可選，默認(rèn)值為true，設(shè)置為false則禁止用戶和全景圖交互（導(dǎo)航條不可用）。
tilt_up_max：可選，默認(rèn)值為Math.PI/2，向上傾斜的最大角度，單位radians。
tilt_down_max：可選，默認(rèn)值為Math.PI/2，向下傾斜的最大角度，單位radians。
zoom_level：可選，默認(rèn)值為0，默認(rèn)的縮放級別，值在0-100之間。
long_offset：可選，默認(rèn)值為PI/360，mouse/touch移動(dòng)時(shí)每像素經(jīng)過的經(jīng)度值。
lat_offset：可選，默認(rèn)值為PI/180，mouse/touch移動(dòng)時(shí)每像素經(jīng)過的緯度值。
time_anim：可選，默認(rèn)值為2000，全景圖在time_anim毫秒后會(huì)自動(dòng)進(jìn)行動(dòng)畫。（設(shè)置為false禁用它）
theta_offset：過時(shí)的選項(xiàng)，可選，默認(rèn)值為1440，自動(dòng)動(dòng)畫時(shí)水平方向的速度。
anim_speed：可選，默認(rèn)值為2rpm，動(dòng)畫的速度，每秒/分鐘多少radians/degrees/revolutions。
navbar：可選值，默認(rèn)為false。顯示導(dǎo)航條。
navbar_style：可選值，默認(rèn)為{}。導(dǎo)航條的自定義樣式。下面是可用的樣式列表：
backgroundColor：導(dǎo)航條的背景顏色，默認(rèn)值為rgba(61, 61, 61, 0.5)。
buttonsColor：按鈕的前景顏色，默認(rèn)值為transparent。
activeButtonsBackgroundColor：按鈕激活狀態(tài)的背景顏色，默認(rèn)值為rgba(255, 255, 255, 0.1)。
buttonsHeight：按鈕的高度，單位像素，默認(rèn)值為20。
autorotateThickness：autorotate圖標(biāo)的厚度，單位像素，默認(rèn)值為1。
zoomRangeWidth：縮放的范圍，單位顯示，默認(rèn)值50。
zoomRangeThickness：縮放的范圍的厚度，單位像素，默認(rèn)值1。
zoomRangeDisk：縮放范圍的圓盤直徑，單位像素，默認(rèn)值為7。
fullscreenRatio：全屏圖標(biāo)的比例，默認(rèn)值為3/4。
fullscreenThickness：全屏圖標(biāo)的厚度，單位像素，默認(rèn)值為2。
loading_msg：可選，默認(rèn)值為Loading…，圖片加載時(shí)的提示文字。
loading_img：可選，默認(rèn)值為null，在加載時(shí)顯示的圖片的路徑。
size：可選，默認(rèn)值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。
onready：可選值，默認(rèn)值為null。當(dāng)全景圖準(zhǔn)備就緒并且第一張圖片顯示時(shí)的回調(diào)函數(shù)。

三種方式都實(shí)現(xiàn)完了，不用擔(dān)心今天所有代碼都會(huì)放在GitHub上。
三種方式具體你使用哪種我還是沒有推薦的
這里只是一張圖，你可以多張圖實(shí)現(xiàn)來完成簡單的全景街景功能！點(diǎn)擊圖片某個(gè)區(qū)域，跳轉(zhuǎn)到下一個(gè)街景的圖，包括百度地圖里面也是一張張全景圖拼接而成。

第一種我會(huì)在后續(xù)繼續(xù)完善加入更多的可選參數(shù)，你們有興趣也可以自己優(yōu)化。
第二種是谷歌VR模塊的沒什么好說的，畢竟官方倆字就夠了。
第三種跨平臺(tái)最好的，畢竟是個(gè)網(wǎng)頁。而我們第三種使用了騰訊X5內(nèi)核來玩，但是還可以在優(yōu)化，消耗不小，我建議你多帶帶給WebView分配一個(gè)進(jìn)程和你的業(yè)務(wù)分離。
拿著我的保溫杯，泡一杯枸杞，我們下篇文章再會(huì)

https://github.com/CN-ZPH/
覺得不錯(cuò)請點(diǎn)一個(gè)star蛤！
有問題下面留言評論，我看到會(huì)回復(fù)。