<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<style>
body{
font-family:arial;
font-size:16px;
}
nav, #debug{
position:absolute;top:10px;left:10px;
}
#debug{left:auto;right:10px;}
</style>
<script>
function rotateTo(deg){
var domCamera = document.querySelector('[camera]');
var domDebug = document.querySelector('#debug');
domCamera.setAttribute('look-controls','enabled',false);
domDebug.innerHTML="controls disabled";
domCamera.setAttribute('rotation', {x:0,y:deg,z:0})
setTimeout(function(){
domCamera.setAttribute('look-controls','enabled',true);
domDebug.innerHTML="controls enabled";
},1000)
}
</script>
</head>
<body>
<a-scene>
<a-box position="0 1.0 9" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.5 -9" radius="0.75" color="#EF2D5E"></a-sphere>
<a-cylinder position="10 1.0 0" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 0" rotation="-90 0 0" width="20" height="20" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity camera="userHeight:1.6" look-controls position="0 0 0" rotation="0 90 0"></a-entity>
</a-scene>
<nav>
<button onmousedown="rotateTo(270)">Cylinder</button>
<button onmousedown="rotateTo(180)">Box</button>
<button onmousedown="rotateTo(0)">Sphere</button>
</nav>
<div id="debug"></div>
</body>
</html>
// Code goes here
/* Styles go here */