Skip to content
This repository has been archived by the owner on Sep 22, 2024. It is now read-only.
/ vue-vr Public archive

A framework for building VR applications with Vue

License

Notifications You must be signed in to change notification settings

mudin/vue-vr

Repository files navigation

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
  • 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