Android三种姿势带你玩转360度全景图功能

暨外类的乐比,我重新爱听轻音乐,没有歌词,只有缓缓的韵律流淌,让人沉浸在尽的美的分享着。它的空灵让人口发生相同种植舒适感。

简介

每天晚上,从图书馆回宿舍,总好安静地放着音乐,一个人数穿林科大桥,慢慢的走回宿舍,在乐之陪同下,洗去同天的疲态。“独乐乐不设众乐乐”,因此自拿我当生好听的乐推荐给你们,也希望你们能够喜欢。

世家吓自己是张鹏辉(道长)人而该誉为,我是天桥上算命的,转发这长达博文,接下一个月份会时有发生竟的惊喜发生。
不久前微博及之全景图火了,所以决定实现转。
工中图片资源来源网络,如发侵权请联系我,马上去
本实现之法子多依照OpenCV、u3d等。
此地提供三种植方式贯彻:

图表源于网络

  1. OpenGL ES
  2. GoogleCardboard(Google
    VR)上面的一个合模块,我们唯有使用其中展示全景图部分模块
  3. Three.js(利用前端姿势)WebView混合开发
    其三种植姿势孰高孰弱,根据需求你们自己看清!我会以结尾给有部分建议,多说无益开撸

1.《风居住之街道》

先期看下三栽实现之意义:

《风居住之大街》是我杀爱的一样首轻音乐,以至于我许多社交软件还用其当昵称。它还转了自己本着二胡的视角,第一次被自己以为二胡可以这么之动听。以前二胡的认识只是停留于大街上之算命先生一头拉在刺耳二胡一边吃别人算命,所以当场觉得二胡很不便听。

1.OpenGL ES

图片 1

实现后底效益故宫全景

2.Google VR(全景图模块)

图片 2

第二种Google VR

3.Three.js(利用前端姿势)WebView混合开发

图片 3

Three.js(利用前端姿势)WebView混合开发

《风居住的大街》是2003年矶村是因为纪子与日本老牌二胡演奏家坂下正夫合作的经典曲目,二胡同钢琴之反衬对话,令人耳目一新,整体上吧,二胡的比例过钢琴,或者说是感染力超越了钢琴,二胡的忧愁在此间胜了了钢琴的肉麻,钢琴与二胡夹在一道,相互倾诉,相互爱慕,但永远不会见重合,仿佛两只永远都无可知当一块儿的情侣。

第一种 OpenGL ES


首先栽办法采用OpenGL来落实(上面gif图截取因为博客限制及传图片的轻重,我抽了,看起有点卡其实很通畅的)
足见见支持旋转手机查、或者拖动图查看、可以视右边中心片有只指示器会趁机角度变化而变更又点击可以过来起始位置。

整首曲子,动以及冷静,温婉及低沉,交相错出,就比如星星只朋友,相互爱慕,相互惦记,却是一个江南,一个塞北。山水万重,烟雨千声,只能隔在时间之风尘,遥遥地对视。几许情好,几许惆怅,不思,自难忘。

一.使用

发出把小伙伴懒得看规律,直接就是想拿来为此用自己事先说集成方式吧!

图片来自网络

Step 1

以build.gradle 文件被补充加库依赖:

allprojects {
        repositories {

            maven { url 'https://jitpack.io' }
        }
    }

2.《乱红》

Step 2.Add the dependency

于 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')
}

《乱红》的演奏者陈悦,出生为浙江省杭州市,毕业被中国音乐学院,是中华显赫一时青年笛箫演奏家。记得第一差任《乱红》时,是于高校的民族音乐鉴赏的课堂上,真的给它优美之音频与散发的冷漠忧伤伤所感染。

Step 3.创建布局文件.XML

<com.zph.glpanorama.GLPanorama
    android:id="@+id/mGLPanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></com.zph.glpanorama.GLPanorama>

《乱红》以中国山水画般的清悠淡远演绎着现代人的真情实意、梦想跟盼。专辑中,陈悦细腻而感性的推理是风的、古典的,更是现代的、时尚的,将现代东方女性的含有的美、娴静之美、雅致的美,展示给世界。专辑封面上的陈悦淡定凝重,一管竹箫在掌,正给丁想起“玉人何处教吹箫”的趣味。专辑的各级首乐曲都流溢着女性特有的精灵与温柔,令人惊叹的才情则用传统的东面乐器演绎得各具特色,让听众耳目一新。

Step 4.传唱你的全景图

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

图来源于网络

OK现在您得测试玩玩了(别用模拟器玩咔咔报错就来索我)。

3.《绿野仙踪》

二.分析

第一我们得了解全景图是呀事物,全景图是平种植广角图。通过全景播放器可以为观看者身临其境地进去及全景图所记录的观被失去,通常标准的全景图是相同布置2:1底图像,其偷的精神就是是当去圆柱投影。等去圆柱投影是同一栽将球上的顺序点投影到圆柱体的侧及之一律种影子方式,投影完以后更将她进行就是同等摆2:1之长方形的图像。比较大的虽是使在地形图及之影。

图片 4

引用慕课的一模一样摆设介绍图

获得全景图后那么我们就是用出示了,看到沿地球了也?

怎亮也简单来说就是将全景图片整个贴到一个球上。
好了掌握原理那咱们就算该考虑当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的方向所夹角

图片 5

tim_shadow大佬的示意图

我们可以依据这个方程组,通过操纵∠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);
    }

4.《天空之都》

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

图片 6

指示器img

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

**

  1. 《想い出は远くの日々》**

一.使用

马上首轻音乐是初海诚《秒速5厘米》里面的同等首轻音乐。

Step 1.Add the dependency

现阶段GitHub上流行版本号为1.8.0,我这里吧为此时髦的了。
最低支持到 minSdkVersion 19 吧便是Android 4.4.0
在 build.gradle 文件被补充加库依赖:

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

动画片以一个妙龄也故事轴心而展开连续3单独立故事的动画片短篇,时代背景是于1990年代到现代之日本,通过少年的人生展现东京和另地面的变更。

Step 2.创立布局文件.XML

      <com.google.vr.sdk.widgets.pano.VrPanoramaView
            android:id="@+id/mVrPanoramaView"
            android:layout_width="match_parent"
            android:layout_height="250dip"/>

便单纯是少数微小心愿,想如果展现相同给而已,要于世界如此对待。就是那么同样客微小而实际的思念,却难明白转达。跨越风雪,等正在好的凡如果盖不见不散的不行人。

Step 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>

图表源于网络

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

6.《潮鸣》

其次种至这里都得以显得玩玩了,也从来不什么可分析的,都是官方提供的sdk,会调用相关的方式就是好了,具体都生那些方法接口,最好的文档永远都是官方提供的,上面都深受有了链接,最好和谐把GitHub上之法定提供的demo拿下来跑同任何,我就算未多介绍了。

《潮鸣り》是由日本作曲家折戸伸治创作的钢琴曲,并于日本游玩品牌Key社所批发的老三慢恋爱冒险游戏《CLANNAD》。《潮鸣》是同篇悲伤的曲,配以《CLANNAD》感人的剧情,每当冈崎朋也难过,或是剧情至伤感催泪处时,插曲播放烘托剧中感伤的气氛,让人在听见它的同时不禁潸然泪下。

老三种植 Three.js(利用前端姿势)WebView混合开发


Three.js是JavaScript编写的WebGL第三方库。提供了老多的3D显示力量。
Android下相信广大人数都有点做了前端开发,现在无数应用程序都是冲前端H5/RN/小程序等来玩的。
本来我们全景图也可放置前端来贯彻,套个WebView利用JavaScript与Android交互来落实有效。

设想到于余机型兼容性,还有原生WebView的有些坑,我这边用腾讯的X5内核的WebView。

放任着就首潮声,仿佛看见翻腾的海浪,早晨微暗的宁静,转为苍蓝,又变蔚蓝,潮水毫不停歇地冲击着海岸,发出清脆的嚷鸣响。

一.使用

此潮又为心潮,鼓动不止,有啊,不断敲击着脆弱的心房,过去颁布后,如此不可知冷静,

Step 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')

    }

他们还最过坚强,用笑容掩盖了整整悲哀,所以到最终才会如此悲痛而溃不成军,

Step 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" />

花去的那些日子,只是当连修建起那些多米诺骨,在最后一冲击下翻乱要潮,连绵不绝。

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

}

图片源于网络

Step 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>

上述对歌曲内容具体的牵线,来源百度。

Step 5.下载Three.js

下载地址:https://threejs.org/
要去GitHub从自之花色被找寻今天代码都见面安放GitHub上

   <script src="js/three.min.js"></script>
   <script src="js/photo-sphere-viewer.min.js"></script>

Step 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>

Step 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蛤!
来题目下留言评论,我看到会卷土重来。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图