https://github.com/mudin/vue-vr

A framework for building VR applications with Vue
https://github.com/mudin/vue-vr

360-photo 360-video demos panolens panorama shaders threejs video360 vr vr-applications vr-tour vr-viewer vue vue-vr vuejs webgl

Last synced: 12 days ago
JSON representation

A framework for building VR applications with Vue

• Host: GitHub
• URL: https://github.com/mudin/vue-vr
• Owner: mudin
• License: mit
• Created: 2018-03-19T06:28:25.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-11-29T03:30:43.000Z (almost 3 years ago)
• Last Synced: 2024-06-24T04:55:09.623Z (5 months ago)
• Topics: 360-photo, 360-video, demos, panolens, panorama, shaders, threejs, video360, vr, vr-applications, vr-tour, vr-viewer, vue, vue-vr, vuejs, webgl
• Language: JavaScript
• Homepage:
• Size: 25.4 MB
• Stars: 470
• Watchers: 12
• Forks: 73
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  

    

  

  

    

  

  

    

  



# Vue VR

A Wrapper of [Panolens](https://pchen66.github.io/Panolens/) for building VR applications with Vue

based on [threejs](https://threejs.org/)

## Demos

[Image Pano](https://mudin.github.io/vue-vr/#/demo-pano)

[Cube Pano](https://mudin.github.io/vue-vr/#/demo-cube-pano)

[Video Pano](https://mudin.github.io/vue-vr/#/demo-video-pano)

![360 Video Demo](https://mudin.github.io/vue-vr/assets/360video.gif?raw=true)

[VR Tour](https://mudin.github.io/vue-vr/#/demo-tour)

![VR Tour](https://mudin.github.io/vue-vr/assets/vrtour.gif?raw=true)

## Getting started

using npm

```

npm install vuejs-vr --save

```

Or using script tag for global use

```html

```

Or Download vue-vr.min.js and include it in your html

## Installing & Running Locally

Clone the repository using git:

```

git clone https://github.com/mudin/vue-vr.git 

```

Installing all dependencies:

```

npm install 

```

Build by webpack:

```

npm run-script build 

```

Run locally:

```

npm start 

```

This will start development server on localhost:8080

## Usage

####For simple panorama:

Panorama by equirectangular image

```vue

    

    import { Pano } from 'vuejs-vr'

    export default {

        components: { Pano }

    }

```

Or

```vue

    

    


        

    

    

    

    

        new Vue({

            el: '#app'

        })

    


```

####For cube faces:

Panorama with a six-face cubemap

```vue

    

    import { Pano } from 'vuejs-vr'

    export default {

        components: { Pano }

    }

```

Note: `%s` replaced by `'l'|'f'|'r'|'b'|'u'|'d'`

Or

```vue

    

    


        

    

    

    

    

        new Vue({

            el: '#app'

        })

    


```

####360 video:

Panorama with 360 video

```vue

    

    import { Pano } from 'vuejs-vr'

    export default {

        components: { Pano }

    }

```

Or

```vue

    

    


        

    

    

    

    

        new Vue({

            el: '#app'

        })

    


```

## TODO List

* Hotspots

* Multi touch on touchsceen devices

* 3D objects

* HlS, Live Streaming video Support

## Contributing

If you would like to contribute code you can do so through GitHub by forking the repository and sending a pull request.

## LICENSE

MIT