1

我一直在尝试使用 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);

所以我在本地包括图书馆的方式只是一个简单的......

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

因此，仅仅通过包含 box2d 库，threejs 就开始表现得很奇怪，我也在多台计算机上测试了这个，并且 box2d（主要是 box2dweb）和threejs 的多个版本。

因此，对于threejs 的更高版本，它似乎与box2d 有一些冲突。

我从研究中发现，大多数 box2d 到 js 的转换都被标记为对于线程冲突不安全。

我不确定这是否是原因。

我还找到了人们成功使用 box2d 和threejs 的示例，但threejs 始终是相当旧的版本，但是当我更新它们时，您可以在我的示例中看到完全相同的问题。

所以下面是我找到的一个演示，我希望我能相信作者，但这里是使用threejs 49的小提琴的副本 在此处输入图像描述

jsfiddle在这里

.....然后下面只是将threejs的资源从49交换到91

在此处输入图像描述

jsfiddle在这里

这是一个很奇怪的库，也许这两个库不再一起玩了，但是如果有人可以提供帮助或有一个他们在最新的threejs版本上一起工作的工作示例，那就太好了。

我尝试了很多不同的 box2d 版本，但总是发现同样的问题，这可能是库冲突或线程不安全的问题吗？

但也尝试链接到提供的小提琴中包含的资源。

任何帮助真的很感激！

4

0 回答 0