Physijs Integration

I’m working on a FPS game, and using physijs for my physics engine. However, I wish to integrate modern threejs into phyijs, which stopped updating its version of threejs 5 years ago. I was wondering if there were any modern ports of physijs that I could use.

I have no issues, that I can remember, with physijs and the latest threejs.

I run it in the webworker mode and maintain a 60 fps on threejs and physijs webworker.

A small note of caution, in my game items come and go, I did not really consider removing any added collision callbacks for removed items, the performance lagged over time.

Also note the the two update in different timeframe worlds. Due to this pay special care with how you may remove items. I gather physijs objects for removal and do so in my physics updater callback prior to the next simulate. Ensuring they are removed in an organized way.

The issue I encounter is that physijs subclasses the THREE.js classes in an ES5 manner, which throws an error when integrated with modern day ES6. Some meshes used by Physijs also aren’t compatible with modern day THREE.js. How do you successfully load modern three.js and Physijs and use them together successfully? Maybe I could copy your installation and setup mechanism.
Thanks for the help!

Soooo I have never had a incompatibility mixing current threejs and physijs, please expand as I may have missed problems. I am at threejs 122. I am currently converting between object/classes/modules and in a unholy transition :joy: I have a physijs class that I ‘new’ during startup. I dont think I did any special THREE* modifications. Note I use THREE in this example. I did get a modified/faster ammo.js from github/WhitestormJS.

class PhysijsEventSupport {
    static physicsscene = undefined; //HAWK: remove static access in the future
    static reference = undefined; 

    constructor() { 
        this.gravity = new THREE.Vector3(0, -30, 0); 
        this.timeStamp = 1 / 60;
        this.actualFPS = 0;
        this.container = undefined;
        this.userData = {}; 
        PhysijsEventSupport.reference = this;
        Overview.registerInitilizer(function () { //insure initialization during restart

    initialize(document) { //HAWK: is document need??
        if (Physijs.scripts.worker === undefined) {  //load dependent files
            Physijs.scripts.worker = "Physics/physijs_worker.js";
            Physijs.scripts.ammo = "../Libraries/ammo.js";
        if (PhysijsEventSupport.physijsEventSupportReference().getPhysicsScene() === undefined) { //create scene if undefined 
            PhysijsEventSupport.physicsscene = new Physijs.Scene({
                reportsize: 25, fixedTimeStep: PhysijsEventSupport.timeStamp
            const loader = new THREE.CubeTextureLoader();
            const textureCube = loader.load([ //HAWK: hard coded skybox for testing
            textureCube.format = THREE.RGBFormat;
            textureCube.mapping = THREE.CubeReflectionMapping;
            textureCube.encoding = THREE.sRGBEncoding;
            PhysijsEventSupport.physicsscene.background = textureCube;


            PhysijsEventSupport.physicsscene.addEventListener("update", function () {  
                PhysijsEventSupport.physicsscene.simulate(undefined, 2);

Thank you for the code example! I actually switched to enable3d.js because that’s in active development - I appreciate the help though.

1 Like