aframe-physics-extras
Version:
Cannon API interface components the A-Frame Physics System.
95 lines (89 loc) • 4.72 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="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
<script src="../build.js"></script>
<script>
window.onload = function (e) {
document.querySelector('#leftHand').addEventListener('pointingstart', function (e2) {
e2.target.setAttribute('collision-filter', {collisionForces: true})
})
document.querySelector('#rightHand').addEventListener('pointingstart', function (e2) {
e2.target.setAttribute('collision-filter', {collisionForces: true})
})
document.querySelector('#leftHand').addEventListener('pointingend', function (e2) {
e2.target.setAttribute('collision-filter', {collisionForces: false})
})
document.querySelector('#rightHand').addEventListener('pointingend', function (e2) {
e2.target.setAttribute('collision-filter', {collisionForces: false})
})
}
</script>
<link rel="stylesheet" type="text/css" href="../assets/examples.css">
</head>
<body>
<body>
<button id="replayer-button" type="button" onclick="playDemoRecording(false)">
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"
super-hands="colliderEvent: collisions;
colliderEventProperty: els;
colliderEndEvent: collisions;
colliderEndEventProperty: clearedEls;
grabStartButtons: gripdown, pointdown, triggerdown;
grabEndButtons: gripup, pointup, triggerup"
static-body="shape: sphere; sphereRadius: 0.11"
physics-collider
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
hoverable grabbable></a-mixin>
<a-mixin id="cube-hovered" material="opacity: 0.7; transparent: true"></a-mixin>
</a-assets>
<a-entity id="rightHand" hand-controls="right" mixin="controller">
</a-entity>
<a-entity id="leftHand" hand-controls="left" mixin="controller">
</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>