javascript games ThreeJS and Box2D conflicts?

Question

I've been trying to experiment with box2d and threejs.

So box2d has a series of js iterations, I've been successful at using them so far in projects as well as threejs in others, but I'm finding when including the latest instance of threejs and box2dweb, threejs seems to be mis-performing when just close to box2dweb but maybe I'm missing something really simple, like a better way to load them in together, or section them off from one another?

I've tried a few iterations of the box2d js code now and I always seemed to run into the same problem with later versions of threejs and box2d together! - currently version 91 threejs.

The problem I'm seeing is very weird.

I'm really hoping someone from either the box2d camp or threejs camp can help me out with this one, please?

Below is a very simple example where I don't initialize anything to do with box2d, but just by having the library included theres problems and you can test by removing that resource, then it behaves like it should.

The below demo uses threejs 91 and box2dweb. It is supposed to every couple of seconds create a box or a simple sphere each with a random colour. Very simple demo, you will see the mesh type never changes and the colour seems to propagate across all mesh instances. However if you remove the box2dweb resource from the left tab then it functions absolutely fine, very odd :/

jsfiddle link here

                class Main {
                constructor(){
                    this._container = null;
                    this._scene = null;
                    this._camera = null;
                    this._renderer = null;

                    console.log('| Main |');

                    this.init();
                }

                init(){

                    this.initScene();

                    this.addBox(0, 0, 0);

                    this.animate();
                }

                initScene() {
                    this._container = document.getElementById('viewport');

                    this._scene = new THREE.Scene();
                    this._camera = new THREE.PerspectiveCamera(75, 600 / 400, 0.1, 1000);
                    this._camera.position.z = 15;
                    this._camera.position.y = -100;
                    this._camera.lookAt(new THREE.Vector3());

                    this._renderer = new THREE.WebGLRenderer({antialias:true});
                    this._renderer.setPixelRatio( 1 );
                    this._renderer.setSize( 600, 400 );
                    this._renderer.setClearColor( 0x000000, 1 );
                    this._container.appendChild( this._renderer.domElement );
                }

                addBox(x,y,z) {
                    var boxGeom = new THREE.BoxGeometry(5,5,5);
                    var sphereGeom = new THREE.SphereGeometry(2, 5, 5);
                    var colour = parseInt(Math.random()*999999);
                    var boxMat = new THREE.MeshBasicMaterial({color:colour});
                    var rand = parseInt(Math.random()*2);
                    var mesh = null;
                    if(rand == 1) {
                        mesh = new THREE.Mesh(boxGeom, boxMat);
                    }
                    else {
                        mesh = new THREE.Mesh(sphereGeom, boxMat);
                    }
                    this._scene.add(mesh);
                    mesh.position.x = x;
                    mesh.position.y = y;
                    mesh.position.z = z;
                }

                animate() {
                    requestAnimationFrame( this.animate.bind(this) );
                    this._renderer.render( this._scene, this._camera );
                }
            }

            var main = new Main();

            window.onload = main.init;

            //add either a box or a sphere with a random colour every now and again
            setInterval(function() {
                main.addBox(((Math.random()*100)-50), ((Math.random()*100)-50), ((Math.random()*100)-50));
            }.bind(this), 4000);

so the way im including the library locally is just a simple...

<script src="js/vendor/box2dweb.js"></script>

So just by including the box2d library threejs starts to act weird, I have tested this across multiple computers too and multiple version of both box2d (mainly box2dweb) and threejs.

So with later versions of threejs it seems to have some comflicts with box2d.

I found from research that most of the box2d conversions to js are sort of marked as not safe for thread conflicts.

Im not sure if this could be the cause.

I also found examples where people have successfully used box2d with threejs but the threejs is always quite an old version, however you can see exactly the same problems occurring in my example, when I update them.

So below is a demo I found and I wish I could credit the author, but here is a copy of the fiddle using threejs 49

jsfiddle here

.....and then below just swapping the resource of threejs from 49 to 91

jsfiddle here

its quite an odd one and maybe the two libraries just don't play together anymore but would be great if someone can help or has a working example of them working together on latest threejs version.

I have tried a lot of different box2d versions but always found the same problem, could this be a problem with conflicting libraries or unsafe threads?

but also tried linking to the resource include in the fiddles provided.

Any help really appreciated!!