@c-frame/aframe-physics-system
Version:
Physics system for A-Frame VR, built on Cannon.js & Ammo.js
59 lines (56 loc) • 3.04 kB
HTML
<html>
<head>
<title>Examples • Sandbox CANNON Worker</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="../../dist/aframe-physics-system.js"></script>
<link rel="stylesheet" href="../styles.css">
<script>
AFRAME.registerComponent('bounce', {
init: function() {
this.direction = 1;
this.position = new THREE.Vector3();
this.position.copy(this.el.object3D.position);
setTimeout(() => {
this.ready = true;
}, 3000);
},
tick: function() {
if (!this.ready) return;
var position = this.el.object3D.position.y;
if (position <= 0) {
this.direction = 1;
} else if (position >= 5) {
this.direction = -1;
}
this.el.object3D.position.set(this.position.x, position + 0.05 * this.direction, this.position.z);
}
});
</script>
</head>
<body>
<div class="text-overlay">
<p>Demonstration of many Cannon driver features in a single example. USes Worker Driver.</p>
<p>The cone is a kinematic object, and the purple box has a constraint attaching it to the cone (this constraint appears to not be working correctly with the Worker Driver).</p>
</div>
<a class="code-link"
target="_blank"
href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/cannon-worker/sandbox.html">
view code
</a>
<a-scene physics="driver: worker; debug: true; gravity: -9.8;">
<a-camera near=0.001></a-camera>
<a-box position="-1 5 -5" rotation="0 45 0" color="#4CC3D9" shadow body="shape: box;"></a-box>
<a-box id="target" position="1 3.75 -4" rotation="0 45 0" color="purple" shadow body="shape: box;"></a-box>
<a-sphere position="0 10 -10" radius="1.25" color="#EF2D5E" shadow body="shape: sphere;"></a-sphere>
<a-cone position="-1 3.75 -4" radius-bottom="1.25" color="green" shadow bounce body="type: static; shape: cone" constraint="target: #target;"></a-cone>
<a-torus position="-1 3.75 -7" radius="1.25" scale="0.5 0.5 0.5" color="red" shadow body="shape: capsule; cylinderAxis: z;"></a-torus>
<a-torus-knot position="0 3.75 -5" radius="1.25" scale="0.5 0.5 0.5" color="blue" shadow body></a-torus-knot>
<a-cylinder segments-height="1" segments-radial="10" position="1 4.0 -5" radius="0.5" height="1.5" color="#FFC65D" shadow body="shape: cylinder"></a-cylinder>
<a-plane position="0 2 -4" rotation="90 0 0" width="1" height="1" color="#7BC8A4" shadow body="type: static; mass: 0; shape: box;"></a-plane>
<a-torus-knot position="0 0 -7" radius="1.25" scale="5 0.1 5" rotation="0 90 0" color="#7BC8A4" shadow body="type: static; mass: 0; shape: box;"></a-torus-knot>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>