• Ionic
  • VR -- Ionic3 VR定制 正式开启

    移动书包 5个月前 156次点击 来自 Ionic

    一、 VR是什么?

    VR(Virtual Reality)即虚拟现实技术,它是利用计算机为用户提供一个交互式的可沉浸的身临其境的虚拟三维空间。它的特征主要有多感知性、交互性、沉浸性。

    多感知性指VR除了具有视觉感知,还有触觉、运动知觉甚至味觉、嗅觉等的感知。

    交互性,即用户在使用VR技术的时候,可以与之产生互动,获得如同在现实生活中如拆卸机器、更换设备等同样的感受。

    沉浸性是指VR为用户提供一个逼真的环境,让用户仿佛置身于现实中。

    二、VR应用的行业领域

    医学 娱乐 军事航天

    室内设计 房产开发 工业仿真

    应急推演 文物古迹 游戏

    Web3D 道路桥梁 地理

    教育中 水文地质 维修

    培训实训 船舶制造 汽车仿真

    轨道交通 能源领域 生物力学

    康复训练 数字地球 虚拟现实

    三、如何使用Ionic 实现VR技术

    slide1.png

    slide2.png

    slide3.png

    iOS platform

    To correctly install and run this plugin for iOS platform you need to install Cocoapods (https://cocoapods.org) on your Mac. To install Cocoapods you have to run the command:

    $ sudo gem install cocoapods
    

    Refer to the Cocoapods site for the complete installation instruction. After the plugin installation to run the iOS Xcode project you need to open the .xcworkspace instead of the .xcodeproj in your platform/ios folder.

    Finally, before installing the plugin from your project root run:

    npm install xml2js

    Installation
    To install the plugin just run the usual command:

    ionic plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view
    

    or

    ionic cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view
    

    or

    cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view

    If during the installation process you get a conflict error, remove the plugin from the project and re-run the instruction above adding “–force” flag:

    cordova plugin remove cordova-plugin-vr-view
    cordova plugin add PATH_TO_PLUGIN/cordova-plugin-vr-view --force
    

    API

    Play Video

    window.VrView.playVideo(videoUrl, options);
    

    videoUrl parameter must be a valid URL. On Android, it can also be a URI pointing to a local file, example: file:///sdcard/my_video.mp4
    options is an array that can contains the following keys:

    inputType
    inputFormat
    startDisplayMode
    

    inputType values:

    "TYPE_MONO" (default)
    "TYPE_STEREO_OVER_UNDER"
    

    inputFormat values:

    "FORMAT_DEFAULT" (default)
    "FORMAT_HLS"
    "FORMAT_DASH"
    

    startDisplayMode values:

    "DISPLAY_MODE_FULLSCREEN" (default)
    "DISPLAY_MODE_VR"
    

    Examples

    window.VrView.playVideo("https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4");
    
    window.VrView.playVideo(
        "https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4",
        {
            inputType: "TYPE_MONO",
            inputFormat: "FORMAT_DEFAULT",
            startDisplayMode: "DISPLAY_MODE_FULLSCREEN"
        }
    );
    

    Play Video From App Folder

    window.VrView.playVideoFromAppFolder(videoPath, options);
    
    • videoPath parameter must be relative to the www folder of your app.
    • options parameter is in the same format as in the playVideo method.

    Examples

    window.VrView.playVideoFromAppFolder("media/videos/sample_360_video.mp4");
    

    Show Photo

    window.VrView.showPhoto(photoUrl, options);
    

    photoUrl parameter must be a valid URL. On Android, it can also be a URI pointing to a local file, example: file:///sdcard/my_photo.jpg

    options is an array that can contains the following keys:

    inputType
    startDisplayMode
    

    inputType values:

    "TYPE_MONO" (default)
    "TYPE_STEREO_OVER_UNDER"
    

    startDisplayMode values:

    "DISPLAY_MODE_FULLSCREEN" (default)
    "DISPLAY_MODE_VR"
    

    Examples

    window.VrView.showPhoto("https://storage.googleapis.com/vrview/examples/coral.jpg");
    
    window.VrView.showPhoto(
        "https://storage.googleapis.com/vrview/examples/coral.jpg",
        {
            inputType: "TYPE_STEREO_OVER_UNDER",
            startDisplayMode: "DISPLAY_MODE_FULLSCREEN"
        }
    );
    

    Show Photo From App Folder

    window.VrView.showPhotoFromAppFolder(photoPath, options);
    
    • photoPath parameter must be relative to the www folder of your app.
    • options parameter is in the same format as in the showPhoto method.

    Examples

     window.VrView.showPhotoFromAppFolder("media/photos/sample_360_photo.jpg");
    

    Is Device Supported

     window.VrView.isDeviceSupported(callback);
    

    The callback function will receive as a parameter:

    • 0 if the device is not supported (Android version < 4.4 KITKAT)
    • 1 if the device is supported
    • 2 if the device is partially supported (device without gyroscope)

    Examples

    window.VrView.isDeviceSupported(function(isSupported) {
        if(isSupported == 1) {
            // VrView is supported
        }
    });
    

    TypeScript support

    If you are using TypeScript, to avoid compilation errors just replace:

    window.VrView
    

    with

    window['VrView']
    

    Supported platforms

    • Android 4.4 or greater
    • iOS 8.0 or greater

    Migrating from plugin version 1

    Migrating your existing code from version 1 to version 2 is very easy. Here’s some examples:

    Plugin version 1:

    window.VrView.playVideo("https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4", "TYPE_MONO", "FORMAT_DEFAULT");
    

    Plugin version 2:

    window.VrView.playVideo(
        "https://d2v9y0dukr6mq2.cloudfront.net/video/preview/GTYSdDW/360-video-of-beach-and-pier_H5e_Jtfa__WM.mp4",
        {
            inputType: "TYPE_MONO",
            inputFormat: "FORMAT_DEFAULT"
        }
    );
    

    Plugin version 1:

    window.VrView.showPhoto("https://storage.googleapis.com/vrview/examples/coral.jpg", "TYPE_STEREO_OVER_UNDER");
    

    Plugin version 2:

    window.VrView.showPhoto(
        "https://storage.googleapis.com/vrview/examples/coral.jpg",
        {
            inputType: "TYPE_STEREO_OVER_UNDER"
        }
    );
    

    后续会出ionic3 VR实例,敬请关注!
    若您有相关的需求或者想法沟通,欢迎回复我!

    目前暂无回复
    关于 广告投放
    ©2016 - 2018 V4.1.6 Powered by 北京雏森科技有限公司