I started making a game using Aframe 1.2.0 and Ammo.js because CANNON.js support may be deprecated in the future.
I have a very simple starting point - a static box - a dynamic sphere - click the sphere to fire - it should be bouncing off the box, but it just goes right through it. I've tried putting the shoot function into a component, but the same thing happens.
Glitch here -> https://descriptive-truthful-sneezeweed.glitch.me
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="theme-color" name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene id="mainScene" vr-mode-ui="enabled: false" physics=" driver: ammo; debug: true; debugDrawMode: 1;"
device-orientation-permission-ui="enabled: false"
renderer='antialias: true; colorManagement: true; sortObjects: false; precision: high; logarithmicDepthBuffer: false; physicallyCorrectLights: false;'
raycaster="objects: .clickable"
cursor="fuse: false; rayOrigin: mouse">
<a-box id="backboard" position="0 2 -5" width="1" height="1" depth="0.2" ammo-body="type: static; emitCollisionEvents: true;" ammo-shape="type: box" material="color: tomato;"></a-box>
<a-sphere id="ball" position="0 0 -2" radius="0.15" ammo-shape="type: sphere; fit: manual; sphereRadius: 0.15;" material="color: cyan;"></a-sphere>
</a-scene>
<script>
$("#ball").addClass("clickable");
ball.addEventListener("click", shoot);
backboard.addEventListener("collidestart", function() {
console.log("HIT");
});
function shoot() {
ball.setAttribute("ammo-body","type: dynamic;");
const force = new Ammo.btVector3(0, 7, -3);
const pos = new Ammo.btVector3(ball.object3D.position.x, ball.object3D.position.y, ball.object3D.position.z);
ball.body.applyImpulse(force, pos);
Ammo.destroy(force);
Ammo.destroy(pos);
}
</script>
</body>
</html>
It seems the error is caused by the sphere having only the ammo-shape component, without the body. If both are attached on click, then it's working as expected:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-physics-system.min.js"></script>
<script>
AFRAME.registerComponent("foo", {
init: function() {
// when clicked attach the body and the shape, and apply the impulse
this.el.addEventListener("click", evt => {
this.el.setAttribute("ammo-body", {
type: "dynamic"
});
this.el.setAttribute("ammo-shape", {
type: "sphere",
fit: "manual",
sphereRadius: 0.15
});
const force = new Ammo.btVector3(0, 7, -3);
const pos = new Ammo.btVector3(this.el.object3D.position.x, ball.object3D.position.y, ball.object3D.position.z);
ball.body.applyImpulse(force, pos);
Ammo.destroy(force);
Ammo.destroy(pos);
})
// check if the events are working by changing a the boxes color
document.querySelector("#backboard").addEventListener("collidestart", evt => {
document.querySelector("#backboard").setAttribute("color", "green");
})
}
})
// the rest is like in the scene from the question
</script>
<a-scene id="mainScene" vr-mode-ui="enabled: false"
physics=" driver: ammo; debug: true; debugDrawMode: 1;"
device-orientation-permission-ui="enabled: false"
renderer='antialias: true; colorManagement: true; sortObjects: false; precision: high; logarithmicDepthBuffer: false; physicallyCorrectLights: false;'
raycaster="objects: .clickable"
cursor="rayOrigin: mouse">
<a-box id="backboard" position="0 2 -5" width="1" height="1" depth="0.2"
ammo-body="type: static; emitCollisionEvents: true;" ammo-shape="type: box"
material="color: tomato;"></a-box>
<a-sphere id="ball" class="clickable" position="0 0 -2" radius="0.15"
material="color: cyan;" foo></a-sphere>
</a-scene>