aframe-physics-extras
Version:
Cannon API interface components the A-Frame Physics System.
76 lines (70 loc) • 3.63 kB
HTML
<html>
<head>
<title>A-Frame Physics Extras Example</title>
<script src="https://aframe.io/releases/0.7.0/aframe.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-physics-system/v2.1.0/dist/aframe-physics-system.min.js"></script>
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script>
<script src="../build.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/examples.css">
</head>
<body>
<body>
<button id="replayer-button" type="button" onclick="playDemoRecording()">
Don't have a Vive or Rift handy? Click here for a preview.
</button>
<a-scene physics="gravity: 0" environment="preset: forest">
<a-assets>
<img id="red" src="../assets/textures/red.png">
<img id="blue" src="../assets/textures/blue.png">
<img id="green" src="../assets/textures/green.png">
<a-mixin id = "controller"
physics-collider
super-hands="colliderEvent: collisions;
colliderEventProperty: els;
colliderEndEvent: collisions;
colliderEndEventProperty: clearedEls"
collision-filter = "collidesWith: default, red, green, blue;
collisionForces: false">
</a-mixin>
<a-mixin id="cube" geometry="width: 0.5; height: 0.5; depth: 0.5" dynamic-body
grabbable hoverable></a-mixin>
<a-mixin id="cube-hovered" material="opacity: 0.7; transparent: true"></a-mixin>
</a-assets>
<!-- Player -->
<a-entity progressive-controls>
<a-entity id="rightHand" class="right-controller" mixin="controller"></a-entity>
<a-entity id="leftHand" class="left-controller" mixin="controller"></a-entity>
</a-entity>
<a-box mixin="cube" sleepy position="0 1 -1" src="#red"
collision-filter="group: red; collidesWith: default, red, blue">
</a-box>
<a-box mixin="cube" sleepy position="0 1.6 -1" src="#red"
collision-filter="group: red; collidesWith: default, red, blue">
</a-box>
<a-box mixin="cube" position="-1 1 -1" src="#green"
collision-filter="group: green; collidesWith: default, green">
</a-box>
<a-box mixin="cube" position="-1 1.6 -1" src="#green"
collision-filter="group: green; collidesWith: default, green">
</a-box>
<a-box mixin="cube" position="1 1 -1" src="#blue"
sleepy="angularDamping: 0; speedLimit: 1"
collision-filter="group: blue; collidesWith: default, red">
</a-box>
<a-box mixin="cube" position="1 1.6 -1" src="#blue"
sleepy="angularDamping: 0; speedLimit: 1"
collision-filter="group: blue; collidesWith: default, red">
</a-box>
<!-- Terrain -->
<a-grid static-body
collision-filter="group: default; collidesWith: red, green, blue">
</a-grid>
<!-- Lighting -->
<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-scene>
</body>
</html>