Skip to content
A framework for building VR applications with Vue
Branch: master
Clone or download
Latest commit 9fc937c Mar 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
build panorama.dispose added on destroyed, cleaning, refactoring some parts Nov 30, 2018
config new demos Mar 19, 2018
demos
dist dist is removed from gitignore Mar 21, 2019
src Pano with dynamic source Mar 20, 2019
.babelrc Threejs and panolens integration with vuejs, simple examples for pano… Mar 19, 2018
.editorconfig
.eslintignore Eslinting, video panorama Mar 20, 2018
.eslintrc.js
.gitignore
.npmignore
.postcssrc.js
LICENSE package.json is prepared to publish Mar 19, 2018
README.md
package-lock.json Pano with dynamic source Mar 20, 2019
package.json Pano with dynamic source Mar 20, 2019

README.md

License npm version HitCount size

Vue VR

A Wrapper of Panolens for building VR applications with Vue based on threejs

Demos

Image Pano

Cube Pano

Video Pano

360 Video Demo

VR Tour

VR Tour

Getting started

using npm

npm install vuejs-vr --save

Or using script tag for global use

<script src="https://unpkg.com/vuejs-vr@latest/dist/vue-vr.min.js"></script>

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

<template>
    <Pano source="pano.jpg"></Pano>
</template>
<script>
    import { Pano } from 'vuejs-vr'

    export default {
        components: { Pano }
    }
</script>

Or

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <Pano source="pano.jpg"></Pano>
    </div>
    <script src="vue.js"></script>
    <script src="vuejs-vr.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

####For cube faces: Panorama with a six-face cubemap

<template>
    <Pano type='cube' source="pano_%s.jpg"></Pano>
</template>
<script>
    import { Pano } from 'vuejs-vr'

    export default {
        components: { Pano }
    }
</script>

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <Pano type='cube' source="pano_%s.jpg"></Pano>
    </div>
    <script src="vue.js"></script>
    <script src="vuejs-vr.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

####360 video: Panorama with 360 video

<template>
    <Pano type='video' source="video.mp4"></Pano>
</template>
<script>
    import { Pano } from 'vuejs-vr'

    export default {
        components: { Pano }
    }
</script>

Or

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <Pano type='video' source="video.mp4"></Pano>
    </div>
    <script src="vue.js"></script>
    <script src="vuejs-vr.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

TODO List

  • Hotspots
  • 3D objects

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

You can’t perform that action at this time.