Javascript执行乱序

时间:2015-02-04 11:52:23

标签: javascript loading raytracing

我在javascript中制作一个路径追踪器,我有一个非常奇怪的错误。这是我的代码的相关部分(它下面有更多的代码,但我不认为它会导致任何结果。如果我对它进行全面评论,会出现相同的结果):

<html>
<head>
    <script src="lib/sah.js"></script>
    <script src="lib/BIH.js"></script>
    <script src="lib/Three.js"></script>
    <script src="lib/three.min.js"></script>
    <script src="lib/loaders/OBJMTLLoader.js"></script>
    <script src="lib/loaders/MTLLoader.js"></script>
    <script src="lib/loaders/XHRLoader.js"></script>
    <script src="lib/loaders/Cache.js"></script>

    <script type="text/javascript">
        function Vec(x, y, z) { return new V(x, y, z); }
        function V(x, y, z) { this.x = x; this.y = y; this.z = z; }
        V.add = function (a, b) { return Vec(a.x + b.x, a.y + b.y, a.z + b.z); }   // overriding operators is not possible in JS
        V.sub = function (a, b) { return Vec(a.x - b.x, a.y - b.y, a.z - b.z); }
        V.mud = function (a, b) { return Vec(a.x * b, a.y * b, a.z * b); }
        V.prototype.mult = function (b) { return Vec(this.x * b.x, this.y * b.y, this.z * b.z); }
        V.prototype.norm = function () { var t = this; var il = 1 / Math.sqrt(t.x * t.x + t.y * t.y + t.z * t.z); t.x *= il; t.y *= il; t.z *= il; return t; }
        V.prototype.dot = function (b) { return this.x * b.x + this.y * b.y + this.z * b.z; }
        V.crs = function (a, b) { return Vec(a.y * b.z - a.z * b.y, a.z * b.x - a.x * b.z, a.x * b.y - a.y * b.x); }


        function Element(aabb,material) {
            this.aabb = aabb;
            this.material = material;
        }
        var meshlist = [];

        var elements = [];
        var loader = new THREE.OBJMTLLoader();
        loader.load("lib/CornellBox-Sphere.obj", "lib/CornellBox-Sphere.mtl", meshlist);
        for (k = 0; k < this.meshlist.length; k++) {
            for (l = 0; l < this.meshlist[k].geometry.aabb.length; l++) {
                elements.push(new Element(this.meshlist[k].geometry.aabb[l],meshlist[k].material));
            }
        }

        var bih = new BIH();

我正在请求加载程序加载我的cornell box数据但由于某种原因它直到所有其他代码执行完毕后才完成加载。当我使用调试器逐步执行它时,加载器将解析文件位置,然后,而不是实际将数据加载到我的“meshlist”数组中,它将直接跳转到我的for循环,将meshlist数据放入我的元素数组中。由于没有任何内容被加载到网格列表中,这显然不会有太大成效。只有在执行了所有其他代码之后,加载程序才会从中断处继续拾取并完成加载到网表列表中。什么可能导致这个?我不知道。感谢您的投入!

1 个答案:

答案 0 :(得分:2)

由于loader.load的异步性质,您正面临这个问题。它发出http请求,当你的资源从服务器传输到客户端时,其余的代码都在执行。正如您在documentation中看到的那样,您需要将callback函数传递给load方法,该方法将在您的资源加载完成后调用

loader.load("lib/CornellBox-Sphere.obj", "lib/CornellBox-Sphere.mtl", function (obj) {
    // do your resources dependant stuff here
});