<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
  <script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
  <script>
    AFRAME.registerComponent('sitecore-demo', {
      init:function(){
        console.log('Sitecore demo running');
      }
    });
  </script>

</head>

<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  <!-- Add your site or application content here -->
  
<!-- Scene -->
<a-scene id="sitecore-demo" background="color: #AAB" fog="type: linear; color: #AAB; far: 30; near: 0">

    <!-- Demo assets -->
    <a-assets>
        <a-asset-item id="sitecore-gltf" src="https://cdn.jsdelivr.net/gh/koav/SitecoreVRDemo/html/models/product.glb"></a-asset-item>
    </a-assets>


    <!-- Product -->
    <a-entity scale="0.6 0.6 0.6" rotation="0 0 0"
              geometry=""
              gltf-model="#sitecore-gltf"
              position="0 1.9 1"
              shadow="cast: true; receive: false"
              animation="property: rotation; to: 0 360 0; loop: true; dur: 30000">
    </a-entity>
  
  <a-entity vive-controls="hand: left"></a-entity>
<a-entity vive-controls="hand: right"></a-entity>

    <!-- Creates the ground -->
    <a-plane rotation="-90 0 0" width="500" height="500" color="#eee" shadow="cast: true; receive: true"></a-plane>

    <!-- Camera -->
    <a-entity camera="userHeight:1.8;" wasd-controls look-controls position="0 1.8 3" ></a-entity>

</a-scene>
  

</body>

</html>

body {
  background-color: #a3d5d3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.