aframe-motion-capture-components
Version:
A-Frame motion capture components
37 lines (36 loc) • 2.32 kB
HTML
<html>
<head>
<title>A-Frame Motion Capture Components Animation</title>
<meta name="description" content="Motion Capture Components Animation – A-Frame">
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="js/build.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #030404">
<div class="container">
<div class="sidebar">
<h1>Animation Tool</h1>
<p>You need an HTC Vive to try this example. Enter VR mode, and press and hold the trigger to start recording your hand motion. Upon release the animation will be applied to one of the characters. Each hand animates one character</p>
</div>
<a-scene embedded>
<a-assets>
<img id="floor" src="https://cdn.aframe.io/a-painter/images/floor.jpg" crossOrigin="anonymous"/>
<img id="skymap" src="https://cdn.aframe.io/a-painter/images/sky.jpg" crossOrigin="anonymous"/>
<a-asset-item id="pacmanobj" src="assets/pacman.obj"></a-asset-item>
<a-asset-item id="pacmanmtl" src="assets/pacman.mtl"></a-asset-item>
<a-asset-item id="ghostobj" src="assets/ghost.obj"></a-asset-item>
<a-asset-item id="ghostmtl" src="assets/ghost.mtl"></a-asset-item>
</a-assets>
<a-entity id="ghost" motion-capture-replayer="recorderEl: #left; loop: true" position="0 1 0" obj-model="obj: #ghostobj; mtl: #ghostmtl" material="shader: flat;"></a-entity>
<a-entity id="pacman" motion-capture-replayer="recorderEl: #right; loop: true" position="1 1 0" obj-model="obj: #pacmanobj; mtl: #pacmanmtl" material="shader: flat;"></a-entity>
<a-entity id="right" motion-capture-recorder="hand: right; recordingControls: true"></a-entity>
<a-entity id="left" motion-capture-recorder="hand: left; recordingControls: true"></a-entity>
<a-entity id="ground"
geometry="primitive: box; width: 12; height: 0.1; depth: 12"
material="shader: flat; src: #floor"></a-entity>
<a-entity id="sky"
geometry="primitive:sphere; radius:30; phiLength:360; phiStart:0; thetaLength:90" material="shader:flat; side:back; height:2048; src:#skymap; width:2048"></a-entity>
</a-scene>
</div>
</body>
</html>