aframe-motion-capture-components
Version:
A-Frame motion capture components
76 lines (69 loc) • 3.89 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Motion Capture Components - Query Parameters</title>
<meta name="description" content="A-Frame Motion Capture Components - Query Parameters">
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="js/build.js"></script>
<script src="js/components/aabb-collider.js"></script>
<script src="js/components/grab.js"></script>
<script src="js/components/ground.js"></script>
<script src="js/shaders/skyGradient.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<h1>Query Parameters</h1>
<p>
Select from different recordings without having to change the HTML by using query parameters.
Append <i>?avatar-recording=recordings/grabLeft.json</i> or <i>`?avatar-recording=recordings/grabRight.json</i>.
This is useful for having multiple recordings available to a single scene.
Even host the recording on a CDN and pass it right in.
</p>
</div>
<a-scene fog="color: #bc483e; near: 0; far: 65;" avatar-replayer embedded>
<a-assets>
<a-mixin id="cube"
geometry="primitive: box; height: 0.30; width: 0.30; depth: 0.30"
material="color: #EF2D5E;"></a-mixin>
<a-mixin id="cube-collided"
material="color: #F2E646;"></a-mixin>
<a-mixin id="cube-grabbed"
material="color: #F2E646;"></a-mixin>
</a-assets>
<!-- Hands -->
<a-entity id="left" hand-controls="left" aabb-collider="objects: .cube;" grab></a-entity>
<a-entity id="right" hand-controls="right" aabb-collider="objects: .cube;" grab></a-entity>
<!-- A-Frame cubes -->
<a-entity position="0 0 -0.5">
<a-entity class="cube" mixin="cube" position="0.30 1.65 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0 1.95 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.30 1.65 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0.60 1.35 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0.60 1.05 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0.60 0.75 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0.60 0.45 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0.60 0.15 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0.30 0.75 0"></a-entity>
<a-entity class="cube" mixin="cube" position="0 0.75 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.30 0.75 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.60 1.35 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.60 1.05 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.60 0.75 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.60 0.45 0"></a-entity>
<a-entity class="cube" mixin="cube" position="-0.60 0.15 0"></a-entity>
<!-- Environment -->
<a-entity id="sky"
geometry="primitive: sphere; radius: 65;"
material="shader: skyGradient; colorTop: #353449; colorBottom: #BC483E; side: back"></a-entity>
<a-entity ground></a-entity>
<a-entity light="type: point; color: #f4f4f4; intensity: 0.2; distance: 0" position="8 10 18"></a-entity>
<a-entity light="type: point; color: #f4f4f4; intensity: 0.6; distance: 0" position="-8 10 -18"></a-entity>
<a-entity light="type: ambient; color: #f4f4f4; intensity: 0.4;" position="-8 10 -18"></a-entity>
</a-entity>
</a-scene>
</div>
</body>
</html>