aframe-motion-capture-components
Version:
A-Frame motion capture components
71 lines (64 loc) • 3.75 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Motion Capture Components Replay</title>
<meta name="description" content="Motion Capture Components Replay – A-Frame">
<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>Replay</h1>
<p>This is an example of replaying a recording session. The position and rotation of the head and hands were recorded together with the events emitted by the controllers. The interactions of the user with the cubes are preserved.
</div>
<a-scene fog="color: #bc483e; near: 0; far: 65;" avatar-replayer="src: assets/tracked-recording.json; spectatorMode: true" 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>