JavaScript的游戏ThreeJS和Box2D的冲突？(javascript games Th

我一直在试图与Box2D的和threejs实验。

所以Box2D中有一系列的js迭代的，我已经成功地使用他们的项目以及threejs在别人到目前为止，但包括threejs和box2dweb的最新实例时，我发现，threejs似乎是错误执行在刚接近box2dweb但也许我失去了一些东西很简单，就像一个更好的方式来加载中它们放在一起，或者它们彼此节了吗？

现在我已经试过Box2D的js代码的几个迭代和我似乎总是与threejs的更高版本上运行同样的问题和Box2D的在一起！ - 当前版本91个threejs。

我看到的问题是很奇怪的。

我真的希望无论从Box2D的阵营或threejs营可以帮助我这一个人吗？

下面是一个很简单的例子，我不初始化任何与Box2D的，只是由具有库包括孤单的问题，你可以通过删除该资源测试，那么它的行为像它应该。

下面的演示使用threejs 91和box2dweb。 它应该每隔几秒钟创建一个盒子或一个简单的球每一个随机颜色。 非常简单的演示，您将看到网格类型永远不会改变，颜色似乎在所有网格实例进行传播。 不过，如果你从左侧选项卡中删除box2dweb资源，那么它的功能绝对没问题，非常奇怪：/

这里的jsfiddle链接

                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);

因此，IM，包括本地库的方式仅仅是一个简单的...

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

因此，仅仅通过包括threejs开始行事怪异的Box2D的图书馆，我已经在多台电脑也是一样，两者的Box2D（主要是box2dweb）和threejs的多个版本测试了这个。

因此，与threejs的后续版本，似乎有一些comflicts与Box2D的。

我从研究中发现，大多数的Box2D转换到JS们那种标记为不可用于线程冲突的安全。

林不知道这可能是原因。

我还发现例子，人们已经成功地使用的Box2D与threejs但threejs始终是一个很老的版本，但是你可以看到完全一样的问题，在我的例子发生，当我更新它们。

所以，下面是一个演示中，我发现，我希望我能贷的作者，但这里是使用threejs 49小提琴副本

这里的jsfiddle

.....下面再只是交换threejs的资源从49到91

这里的jsfiddle

它很奇怪的一个，也许是两个库只是不玩了起来，但将是巨大的，如果有人能帮助或有他们对最新版本threejs一起工作的工作示例。

我已经尝试了很多不同的Box2D的版本，但总是发现了同样的问题，这会是相互冲突的库或不安全线程的问题吗？

但也试图链接到资源包括提供的小提琴。

任何帮助，非常感谢！

文章来源: javascript games ThreeJS and Box2D conflicts?