vuejs-vr
Vue VR
A Wrapper of Panolens for building VR applications with Vue
based on threejs
Demos
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
Dependencies
Dependencies
@vue/cli-plugin-babel: ^4.5.8@vue/cli-plugin-eslint: ^4.5.8@vue/cli-plugin-unit-mocha: ^4.5.8@vue/cli-service: ^4.5.8@vue/eslint-config-airbnb: ^5.1.0@vue/test-utils: ^1.1.1babel-eslint: ^10.1.0autoprefixer: ^6.7.2babel-core: ^6.26.3babel-loader: ^6.4.1babel-plugin-transform-runtime: ^6.22.0babel-preset-env: ^1.7.0babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0copy-webpack-plugin: ^4.0.1cross-env: ^5.0.0css-loader: ^0.28.0eslint: ^7.12.1eslint-config-airbnb: ^18.2.0eslint-loader: 4.0.2eslint-plugin-import: ^2.22.1eslint-plugin-prettier: ^3.1.4eslint-plugin-vue: ^7.1.0eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0file-loader: ^0.11.1friendly-errors-webpack-plugin: ^1.1.3highlight.js: ^9.11.0html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.19.1less: ^3.9.0less-loader: ^4.1.0opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.2.0rimraf: ^2.6.0semver: ^5.3.0shelljs: ^0.7.6url-loader: ^1.1.2vue-eslint-parser: ^2.0.3vue-loader: ^11.3.4vue-router: ^2.5.3vue-style-loader: ^2.0.5vue-template-compiler: ^2.2.6webpack: ^2.3.3webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.18.0webpack-merge: ^4.1.0