<template>
<Tour
@on-load="onLoad"
:scenes='scenes'>
</Tour>
<div
class="demo-loading"
v-show="loading"></div>
</template>
<script>
import { Tour } from 'vue-vr'
export default {
components: {
Tour
},
data(){
return {
scenes: [{
key: 'M4wOy2s',
panorama: {
source: 'assets/equirectangular.jpg',
type: 'image'
},
x: 0,
y: 0,
z: 0,
rx: 0,
rz: 0,
ry: 90,
connections: [
'eIm7la',
'eId9l0',
'fK2dL7l'
]
},
{
key: 'eIm7la',
panorama: {
source: 'assets/faces/pano_%s.jpg',
type: 'cube'
},
x: 100,
y: 0,
z: 200,
rx: 0,
rz: 0,
ry: 0,
connections: [
'M4wOy2s'
]
},
{
key: 'eId9l0',
panorama: {
source: 'assets/faces/pano_%s.jpg',
type: 'cube'
},
x: 150,
y: 0,
z: -300,
rx: 0,
rz: 0,
ry: 0,
connections: [
'M4wOy2s'
]
},
{
key: 'fK2dL7l',
panorama: {
source: 'assets/faces/pano_%s.jpg',
type: 'cube'
},
x: -150,
y: 0,
z: -300,
rx: 0,
rz: 0,
ry: 0,
connections: [
'M4wOy2s'
]
}]
}
}
}
</script>
<body>
<div id="app">
<Tour
@on-load="onLoad"
:scenes='scenes'>
</Tour>
<div
class="demo-loading"
v-show="loading"></div>
</div>
<script src="vue.js"></script>
<script src="vue-vr.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>