Skip to content

Instantly share code, notes, and snippets.

@lgarest

lgarest/vr.html

Created October 17, 2017 07:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lgarest/ff8bd4e0934896bcac3f5073c2e3d8b6 to your computer and use it in GitHub Desktop.
Save lgarest/ff8bd4e0934896bcac3f5073c2e3d8b6 to your computer and use it in GitHub Desktop.
Download ZIP
Straightforward VR with aframe demo
Raw
vr.html
<!DOCTYPE html>
<html>
<head>
<title>WebVR with A-Frame demo</title>
<meta name="description" content="WebVR with A-Frame demo">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<!-- This is the whole scene -->
<a-scene>
<!-- This is the first entity wrapping the box -->
<a-entity position="0 0.5 -4">
<a-animation attribute="rotation" dur="3000" easing="linear" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
<a-box rotation="0 45 0" color="#4CC3D9" shadow></a-box>
</a-entity>
<!-- This is the second entity wrapping the sphere -->
<a-entity position="0 0 -4">
<a-animation attribute="rotation" dur="3000" easing="linear" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
<a-sphere position="0 1.25 -2" radius="0.5" color="#EF2D5E" shadow></a-sphere>
</a-entity>
<!-- This is the cylinder -->
<a-cylinder position="0 1.5 -4" radius="0.05" height="1.5" color="#FFC65D" shadow></a-cylinder>
<!-- This is the plane -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<!-- This is the background or sky -->
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment