vue threejs
Vue VR (Vue VR)
A framework for building VR applications with Vue based on threejs and Panolens, inspired by react-vr.
受react-vr启发,使用基于threejs和Panolens的Vue构建VR应用程序的框架。
入门 (Getting started)
using npm
使用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
或下载vue-vr.min.js并将其包含在您的html中
在本地安装和运行 (Installing & Running Locally)
Clone the repository using git:
使用git克隆存储库:
git clone https://github.com/imudin/vue-vr.git
Installing all dependencies:
安装所有依赖项:
npm install
Build by webpack:
通过webpack构建:
npm run-script build
Run locally:
在本地运行:
npm start
This will start development server on localhost:8080
这将在本地主机上启动开发服务器: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 src="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
注意: %s
替换为'l'|'f'|'r'|'b'|'u'|'d'
或
<!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度影片: (360 video:)
Panorama with 360 video
具有360度视频的全景
<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
3D物件
vue threejs