super-hands
Version:
All-in-one natural hand controller interaction component for A-Frame.
38 lines (36 loc) • 2.32 kB
HTML
<html>
<head>
<script src="build.js"></script>
</head>
<body>
<a-scene avatar-recorder="spectatorPlay: true; spectatorPosition: 0 1.6 2">
<a-assets>
<!-- <img id="grid" src="grid.png"/> -->
<a-mixin id="controller" super-hands
sphere-collider="objects: .cube"></a-mixin>
<a-mixin id="cube" geometry="primitive: box; width: 0.5; height: 0.5; depth: 0.5"
hoverable grabbable stretchable draggable
droppable="acceptEvent: drag-drop-accepted; rejectEvent: drag-drop-rejected"
event-set__accept="_event: drag-drop-accepted; geometry.radius: 0.25; geometry.primitive: sphere;"
event-set__reject="_event: drag-drop-rejected; geometry.radius: 0.25; geometry.primitive: tetrahedron;"
event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
event-set__dragon="_event: dragover-start; wireframe: true"
event-set__dragoff="_event: dragover-end; wireframe: false"></a-mixin>
<a-mixin id="red" material="color: red" droppable="accepts: [mixin~='red']"></a-mixin>
<a-mixin id="green" material="color: green" droppable="accepts: [mixin~='green']"></a-mixin>
<a-mixin id="blue" material="color: blue" droppable="accepts: [mixin~='blue']"></a-mixin>
</a-assets>
<a-entity id="lhand" hand-controls="left" mixin="controller"></a-entity>
<a-entity id="rhand" hand-controls="right" mixin="controller"></a-entity>
<a-entity id="redLow" class="cube" mixin="cube red" position="0 1 -1"></a-entity>
<a-entity id="redHigh" class="cube" mixin="cube red" position="0 1.6 -1"></a-entity>
<a-entity id="blueLow" class="cube" mixin="cube blue" position="-1 1 -1"></a-entity>
<a-entity id="blueHigh" class="cube" mixin="cube blue" position="-1 1.6 -1"></a-entity>
<a-entity id="greenLow" class="cube" mixin="cube green" position="1 1 -1"></a-entity>
<a-entity id="greenHigh" class="cube" mixin="cube green" position="1 1.6 -1"></a-entity>
<a-plane rotation="-90 0 0" color="#888"
width="50" height="50"></a-plane>
</a-scene>
</body>
</html>