A framework for building VR applications with Vue

Overview

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/[email protected]/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


<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


<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


<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

Comments
  • WebGL: INVALID_VALUE: texImage2D: no video

    WebGL: INVALID_VALUE: texImage2D: no video

    Hi mudin,

    Thank you for this library, I'm loving it. Just one issue I'm getting and I can figure out what it is. When I use a 360 video with a .mp4 filename, I get this error:

    WebGL: INVALID_VALUE: texImage2D: no video

    [.WebGL-00000272E2E6A130]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?

    Thank you.

    Environment Vue version 2.6.12 Browser & Version: Google Chrome Version 87.0.4280.66 OS & Version: Windows 10 1909

    opened by mrclaytorres 5
  • Console errors

    Console errors

    After installing using NPM I'm getting the following console error when attempting to compile. Any ideas what could be causing this?

    Screen Shot 2019-07-23 at 5 03 06 PM

    The formatted .min file places the error on this line. Screen Shot 2019-07-23 at 5 13 04 PM

    Thanks!

    opened by jondavey 4
  • Can i use multiple <Pano> with OwlCarousel?

    Can i use multiple with OwlCarousel?

    I trying to implement a carousel with multiple vr images. Is that possible? I try this:

    opened by samirortiz 3
  • Doesnt work on usage according to documentation

    Doesnt work on usage according to documentation

    Hi , I have done an npm install and used the component as explained. But the images dont render in pano or cube pano or any other. Its just blank. I have no errors also. Do i need to install any dependencies??

    I also cloned the repository and tried. There is a memory crash because of the rendering of the connection scenes. Can you please help me making this work.

    opened by suprithwork 3
  • image not load until resize window

    image not load until resize window

    Hello

    i faced issue in one of my component that have dynamic height so in that if i resize my window size then only 360 image is load until it's shows me black window and if i use this component in model popup then also image is not load.

    i am using old vue material design

    https://vue-material-old.netlify.com/#/

    using below two component https://vue-material-old.netlify.com/#/components/tabs https://vue-material-old.netlify.com/#/components/dialog

    opened by lochawala 2
  • document is not defined

    document is not defined

    I am trying to implement this nuxtjs, but it is not working.

    Here are the steps I have taken so far.

    • install the package.
     <client-only>
            <Pano type="video" :source="src"></Pano>
     </client-only>
    
    • import the library as described on the docs.

    Any ideas or suggestions on how to solve this will be appreciated.

    opened by damisparks 1
  • getting error when using it in carousel

    getting error when using it in carousel

    Hello

    i have implement this in custom made carousel and it's work fine but after some time i got error of can not read property position of null

    you can check here URL

    please check below screen shot for batter idea error

    opened by lochawala 1
  • (Question) Hotspots and multiple scenes ETA

    (Question) Hotspots and multiple scenes ETA

    Hi there!

    First things first, thank you for creating this library. It took me less than a minute to get it up and running.

    I can see in the roadmap that you're planning on adding hotspot support and multiple scenes. Do you have any idea of when you're planning to implement those?

    I'm evaluating other panorama engines such as https://github.com/pchen66/panolens.js but since my project is built with vue.js, your library makes more sense :)

    opened by siamkreative 1
  • Vue3 + Vite Clicking on canvas makes image immediately disappears

    Vue3 + Vite Clicking on canvas makes image immediately disappears

    Installed the vue3 package globally using example. Pass image path and when I click on image on screen it immediately disappears with no errors in console.
    image

    image

    image

    opened by masterofshapes 0
  • additional settings for the viewer to add more customisation with the…

    additional settings for the viewer to add more customisation with the…

    Added some of the customisation tags from panolense viewer as variables for the Vue components to allow user a bit more customisation when adding a panorama.

    Links to issue: https://github.com/mudin/vue-vr/issues/23

    opened by Reddevildragg 0
  • Additional setting/options for the panos

    Additional setting/options for the panos

    The ability to add additional settings into the pano componet to go though into the creation.

    Looking at the panolens.js script it appears there are a lot more settings, however only container and fov are being passed though.

    In my use case i want to be able to turn off the full screen and settings buttons, but does not appear to be a build in way to do so (by the panolense.js script has this as an option)

    opened by Reddevildragg 0
  • local image load error

    local image load error

    Problem

    I use a simple local img '../assets/pano.png', it load nothing but black screen, and in devtools it send a XHR request, not a image request But if I use img from online resource, it work

    This is my vue file.

    <template>
      <div class="vr-container">
        <Pano
          :source="url"
          class="pano"
        ></Pano>
        <!-- <img src="../assets/pano.png" alt="pano" /> -->
      </div>
    </template>
    <script>
    import { Pano } from "vuejs-vr";
    export default {
      components: { Pano },
      data() {
        return {
          url: "../assets/pano.png",
        //   url: "https://t4.ftcdn.net/jpg/02/09/58/11/360_F_209581186_UIHxT8WvyXZbTbHnNeEu4SFRQ3TdqBHA.jpg",
        };
      },
    };
    </script>
    
    <style scoped>
    body {
      height: 1080px;
    }
    .vr-container {
        height: 100vh;
        width: 100vw;
    }
    .pano {
        height: 80%;
        width: 80%;
    }
    </style>
    

    Please give me some suggestions, thanks! image

    opened by birdmanmandbir 5
  • Dynamic Source

    Dynamic Source

    Is there a way to load the source dynamically? i.e via api or computed attributes, such as :source='comp_image', this doesn't seem to work currently, as the images are stored on S3 AWS, not on local machines and retrieved dynamically as well via API calls.

    opened by kabaltech 2
  • Multi touch on mobile

    Multi touch on mobile

    Hi @mudin great lib btw. But i have question, It's working when on web, with mouse i can swipe it and zoom in/out with scroll mouse. And then on mobile I can swipe normally, but not for pinch zoom in/out. How to enable that? So i can use multi touch on this vr. Thanks 🙏🏻

    enhancement 
    opened by ariefsn 0
Owner
Mudin Ibrahim
Let's talk in JS 💻
Mudin Ibrahim
HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

HolusVue is a library of accessible components for creating web applications, developed with the Vue.js framework.

Evandro C. Severgnini 0 Aug 10, 2021
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 150 Sep 24, 2022
Toolbox for building full-stack Vue.js apps

Basys Basys is a toolbox for building Vue.js full-stack apps with a focus on great developer experience. An easy way to create full-stack Express-base

Basys 116 Jun 7, 2022
🎨 A Toolset for Building Extensible Page Builders with Vue.js

V-Craft V-Craft (inspired by Craft.js) is a toolset for building extensible page builders with Vue.js. Instead of a complete page builder with a user

Yong-Yuan Chen 217 Oct 4, 2022
A UI component for building complex queries with nested conditionals.

Vue Query Builder A UI component for building complex queries with nested conditionals. Vue Query Builder is a user interface that makes it easy for y

Daniel Abernathy 612 Oct 3, 2022
This is my project in building a simple tool to extract text from an image.

Extract Text About this is my project in building a simple tool to extract text from an image. I am implementing a Tesseract JS library in my project.

BAGUS BUDI SATOTO 2 Aug 30, 2022
Survey builder for vue.js applications

vue-survey-builder This is a survey builder component for vue.js applications. How to install You can install the component using npm i -S vue-survey-

null 104 Aug 10, 2022
Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Smoothly implements keyboard shortcuts (hotkeys) in Vue applications.

Rogério Taques 10 Sep 19, 2022
Lexical components and composables for Vue applications.

lexical-vue Note: Lexical is currently in early development and APIs and packages are likely to change quite often. Lexical components and composables

Robert Soriano 97 Oct 6, 2022
Wowerlay is a popover library for Vue 3 applications.

Wowerlay is a popover library for Vue 3 applications. It isn't an alternative for Popper. Demos/Examples You can see all examples Here. Intallation Fo

Wope 6 Apr 29, 2022
Handling Google sign-in and sign-out for Vue.js applications

vue-google-oauth2 Handling Google sign-in and sign-out for Vue.js applications. This package is updated to support detection of disabled cookies. This

JunGroupProductions 0 Jan 11, 2021
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

null 647 Oct 4, 2022
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Imperva 11 Mar 22, 2022
Handling Google sign-in and sign-out for Vue3 applications.

vue3-google-oauth2 Handling Google sign-in and sign-out for Vue3 applications. Please refer to here for Vue2 applications. Front-end Demo Installation

Jeongwoo Ahn 44 Sep 28, 2022
A fullscreen components for vue2, supports single page applications

Quick start @hyhello/vue-fullscreen The @hyhello/vue-fullscreen component for vue2, supports single page applications.

Hyhello 2 Mar 28, 2022
Vue Modern Resume is basically a simple (yet easy to setup) resume template based on Vue.js framework and Vuetify UI toolkit.

Vue Modern Resume is basically a simple (yet easy to setup) resume template based on Vue.js framework and Vuetify UI toolkit.

Gabrielle Louis Valencia 1 Sep 5, 2022
:gem: Frontend access control framework based Vue

English | 中文 vue-access-control ?? Frontend access control framework based Vue Introduction Vue-Access-Control is a solution of front-end user rights

refined-x 1.1k Aug 15, 2022
一款自带工作流引擎的Node.js全栈框架。A Node.js full-stack framework with workflow engine, based on koa + egg + vue + framework7

简体中文 | English CabloyJS 一款自带工作流引擎的Node.js全栈框架, 基于koa + egg + vue + framework7 目标、历史、信念 关于CabloyJS 特性 - 第一部分: 基础功能 Bean & AOP 几乎所有事物都是Bean Bean支持AOP AO

zhennann 660 Sep 24, 2022
This project aims to rewrite all Garry's Mod Menu to modern framework (Vue.js v2).

Garry's Menu Remake This project aims to rewrite all Garry's Mod Menu to modern framework (Vue.js v2). This mod is an early stage of developement, not

Влад Кот 6 May 6, 2022