@c-frame/aframe-physics-system
Version:
Physics system for A-Frame VR, built on Cannon.js & Ammo.js
50 lines (48 loc) • 1.94 kB
HTML
<html>
<head>
<title>Examples • TTL AMMO</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/MozillaReality/ammo.js@8bbc0ea/builds/ammo.wasm.js"></script>
<script src="../../dist/aframe-physics-system.js"></script>
<link rel="stylesheet" href="../styles.css">
<script>
AFRAME.registerComponent('ttl', {
schema: {
time: {type: 'number', default: 100}
},
init: function(){
this.ticks = 0;
this.lifetime = this.data.time;
},
tick: function(){
this.lifetime--;
if(this.lifetime === 0){
// TTL has expired remove the entity
this.el.sceneEl.removeChild(this.el);
}
}
});
</script>
</head>
<body>
<div class="text-overlay">
<p>The box disappears after 100 frames.</p>
</div>
<a class="code-link"
target="_blank"
href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo/ttl.html">
view code
</a>
<a-scene physics="driver: ammo; debug: true">
<!-- Equivalent cannon example uses a mxin. ammo-body / ammmo-shape don't currently work with mixins-->
<a-box position="-1 3.5 -3" rotation="0 45 0" color="#4CC3D9" shadow ammo-body ammo-shape ttl></a-box>
<a-sphere position="0 3.75 -5" radius="1.25" color="#EF2D5E" shadow ammo-body ammo-shape></a-sphere>
<a-cylinder position="1 4.0 -3" radius="0.5" height="1.5" color="#FFC65D" shadow ammo-body ammo-shape></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow
ammo-body="type: static" ammo-shape></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>