Compatibility with A-Frame 1.4.0

[diarmidmackenzie]

Upgrading examples to A-Frame 1.4.0 has created a few new problems with physics examples.

Cannon

• compound shape only respects one component, rather than both. Hits error:

aframe-physics-system.js:17493 Uncaught TypeError: Cannot read properties of undefined (reading 'DEG2RAD')
at n.initShape (aframe-physics-system.js:17493:43)
at v.emit (a-node.js:287:10)
at a-node.js:145:12

• constraints: hits error:

aframe-teleport-controls.min.js:1 Uncaught (in promise) TypeError: (intermediate value).setDynamic is not a function
at new i (aframe-teleport-controls.min.js:1:10042)
at n (aframe-teleport-controls.min.js:1:282)
at n.update (aframe-teleport-controls.min.js:1:4282)
at n.initComponent (component.js:333:10)
at n.updateProperties (component.js:305:12)
at e.exports.Component (component.js:81:8)
at new n (component.js:665:15)
at d.initComponent (a-entity.js:319:17)
at d.updateComponent (a-entity.js:471:10)
at d.updateComponents (a-entity.js:442:12)

• perf - balls are large & white instead of small & yellow. No console error.

Ammo

• multiple examples: debug drawer not rendered, hits error:

aframe-physics-system.js:522 Uncaught (in promise) TypeError: (intermediate value).setDynamic is not a function
at new THREE.AmmoDebugDrawer (aframe-physics-system.js:522:81)
at AmmoDriver.getDebugDrawer (aframe-physics-system.js:17885:24)
at i.setDebug (aframe-physics-system.js:18897:40)
at i.init (aframe-physics-system.js:18677:12)

• perf - balls are large & white instead of small & yellow (same as Cannon). No console error.

• constraints: hits same error as Cannon.

** Cannon Worker **

Motsly the same problems as Cannon + various pre-existing problems. Just one change that seems specific to Cannon Worker...

ttl: Hits new error. This example also works better than it did in 1.3.0 - shapes don't fall through floor. Also hits pre-existing (i.e. also with 1.3.0) "Unimplemented shape" error

11:57:20.209 aframe-physics-system.js:19146 Uncaught TypeError: Cannot read properties of undefined (reading 'position')
at module.exports.deserializeInterpBodyUpdate (aframe-physics-system.js:19146:8)
at WorkerDriver.step (aframe-physics-system.js:18262:16)
at i.tick (aframe-physics-system.js:18813:17)
at v.tick (a-scene.js:703:36)
at v.render (a-scene.js:743:32)
at bind.js:12:17
at three.module.js:28350:35
at r (three.module.js:12556:3)

[vincentfretin]

You can update the example to use blink-controls instead of teleport-controls.
DEG2RAD comes from MathUtils now.

[diarmidmackenzie]

Big white balls instead of small yellow ones seems to be due to an A-Frame regression:
aframevr/aframe#5203

For now, I can work around by specifying geometry & material rather than radius & color.

[diarmidmackenzie]

Further issue spotted in Cannon example. When clicking to apply an impulse in the compund example. Seems to be specific to this example...

aframe-physics-system.js:18053 Uncaught RangeError: Maximum call stack size exceeded
at LocalDriver.applyBodyMethod (aframe-physics-system.js:18053:3)
at body.applyImpulse [as __applyImpulse] (aframe-physics-system.js:18916:16)
at LocalDriver.applyBodyMethod (aframe-physics-system.js:18053:27)
at body.applyImpulse [as __applyImpulse] (aframe-physics-system.js:18916:16)
at LocalDriver.applyBodyMethod (aframe-physics-system.js:18053:27)
at body.applyImpulse [as __applyImpulse] (aframe-physics-system.js:18916:16)
at LocalDriver.applyBodyMethod (aframe-physics-system.js:18053:27)
at body.applyImpulse [as __applyImpulse] (aframe-physics-system.js:18916:16)
at LocalDriver.applyBodyMethod (aframe-physics-system.js:18053:27)
at body.applyImpulse [as __applyImpulse] (aframe-physics-system.js:18916:16)

[diarmidmackenzie]

#26 solves most of these. #24 & #25 created for the issues it doesn't solve.