❤
npm
Sign UpSign In

vuejs-vr

1.2.2 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i vuejs-vr

Repository

github.com/mudin/vue-vr

Homepage

github.com/mudin/vue-vr#readme

Weekly Downloads

208

Version

1.2.2

License

MIT

Unpacked Size

2.58 MB

Total Files

46

Last publish

Collaborators

  • imudin07
Try on RunKit
Report malware