Vue/A-Frame Demo

A basic demo using Vue and A-Frame

by bejnar

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://aframe.io/releases/0.4.0/aframe.js"></script>
<div  id="vue-app" >

<a-scene embedded renderer="antialias: true; ">
  <a-sky color="#000"></a-sky>
  <a-entity camera look-controls wasd-controls position="0 1 3" rotation="-15 0 0"></a-entity>
  <a-box v-bind:color="color" opacity="0.75" visible="true"></a-box>
</a-scene>
<p>Click a button to change the color of the box</p>
<div>
  <button @click="setBoxColor('red')">Red</button>
  <button @click="setBoxColor('blue')">Blue</button>
  <button @click="setBoxColor('green')">Green</button>
  <button @click="setVisibility('true')">True</button>
  <button @click="setVisibility('false')">Flase</button>
</div>
</div>

CSS

body {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

a-scene {
  height: 50vh;
  width: 50vw;
}

JavaScript

Vue.config.ignoredElements = ['a-scene', 'a-sky'];

var colorButtons = new Vue({
  el: '#vue-app',
  data: {
    color:"magenta"
  },
  methods: {
    setBoxColor: function(color) {
      document.querySelector('a-box').setAttribute('color', color)
    },
   	setVisibility: function(isVisible) {
      document.querySelector('a-box').setAttribute('visible', isVisible)
    }
  }
})