mudin / Vue Vr
Licence: mit
A framework for building VR applications with Vue
Stars: ✭ 348
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Vr
Aframe Effects
A VR Ready Post processing framework for Three.js and/or A-Frame
Stars: ✭ 176 (-49.43%)
Mutual labels: webgl, threejs, shaders, vr
Aframe Vimeo Component
Stream Vimeo videos into WebVR.
Stars: ✭ 62 (-82.18%)
Mutual labels: webgl, threejs, vr
Solarsys
Realistic Solar System simulation with three.js
Stars: ✭ 49 (-85.92%)
Mutual labels: webgl, threejs, shaders
Patches
Patches is a visual programming editor for building WebVR and WebGL experiences.
Stars: ✭ 164 (-52.87%)
Mutual labels: webgl, threejs, vr
Webxr Handtracking
👐 WebXR hand tracking examples
Stars: ✭ 116 (-66.67%)
Mutual labels: webgl, threejs, vr
Worlds2
Building Virtual Reality Worlds using Three.js
Stars: ✭ 34 (-90.23%)
Mutual labels: webgl, threejs, vr
Threejs Sandbox
Set of experiments and extensions to THREE.js.
Stars: ✭ 163 (-53.16%)
Mutual labels: webgl, threejs, shaders
Three Globe
WebGL Globe Data Visualization as a ThreeJS reusable 3D object
Stars: ✭ 270 (-22.41%)
Mutual labels: webgl, threejs
Enable3d
🕹️ Standalone 3D Framework / Physics for three.js (using ammo.js) / 3D extension for Phaser 3
Stars: ✭ 271 (-22.13%)
Mutual labels: webgl, threejs
Dino3d
🦖 Google Chrome T-Rex Run! in 3D (WebGL experiment)
Stars: ✭ 263 (-24.43%)
Mutual labels: webgl, threejs
Webgl Fundamentals
WebGL lessons that start with the basics
Stars: ✭ 3,315 (+852.59%)
Mutual labels: webgl, shaders
Three.phenomenon
⭐️ A tiny wrapper around three.js built for high-performance WebGL experiences.
Stars: ✭ 338 (-2.87%)
Mutual labels: webgl, threejs
Pannellum
Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. It can be deployed easily as a single file, just 21kB gzipped, and then embedded into pages as an <iframe>. A configuration utility is included to generate the required code for embedding. An API is included for more advanced integrations.
Stars: ✭ 3,286 (+844.25%)
Mutual labels: webgl, panorama
Three Elements
Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
Stars: ✭ 331 (-4.89%)
Mutual labels: webgl, threejs
React Three Editable
👀 ✏️ Edit your react-three-fiber scene with a visual editor without giving up control over your code.
Stars: ✭ 261 (-25%)
Mutual labels: webgl, threejs
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/[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
<!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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].