在THREE.js中使用webworkers

时间:2015-11-12 19:30:45

标签: javascript json three.js web-worker

我有一个更大的模型可以冻结我的场景。 由于我从一开始就不需要这个模型,所以在后台加载这个模型会很酷。网络工作者是解决这个问题的方法吗?

任何人都可以指导我如何完成它,或者它是否可能完成?

感谢。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.JSONLoader();
loader.load("models.js", function (smooth) {
    smooth.mergeVertices();
    smooth.computeFaceNormals();
    smooth.computeVertexNormals();
    var modifier = new THREE.SubdivisionModifier(1);
    modifier.modify(smooth);
    var mesh = new THREE.Mesh(smoothnew THREE.MeshBasicMaterial({
        color: 0x00ff00
    }));
    scene.add(mesh);
});

var render = function () {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};

render();

2 个答案:

答案 0 :(得分:2)

JavaScript是单线程的,并且对其事件使用“协作”调度,这意味着如果你有一个不会放弃执行的长循环函数,那么其他任何东西都无法在此期间执行。 / p>

您在加载器中的方法本质上是一种方法,它在允许其他JavaScript代码运行之前运行其计算完成。因此,不是使用工作者,而是可能能够通过使其更加事件驱动并通过这种方式改善体验来分割它,如下所示:

loader.load("models.js", function (smooth) {
    smooth.mergeVertices();
    smooth.computeFaceNormals();
    smooth.computeVertexNormals();
    window.setTimeout( function() {
        var modifier = new THREE.SubdivisionModifier(1);
        modifier.modify(smooth);
        window.setTimeout( function() {
            var mesh = new THREE.Mesh(smoothnew THREE.MeshBasicMaterial({
                color: 0x00ff00
            }));
            scene.add(mesh);
        }, 100 );
    }, 100 );
});

(我添加setTimeout()的点完全是任意的,因为如果没有jsfiddle来运行代码+数据,我无法知道最大的延迟在哪里。

只有当这些方法调用本身都不占用大部分时间时,这才会真正起作用。如果是mergeVertices()本身占用了大部分CPU时间,解决冻结的唯一方法是将计算卸载到工作者。您需要传递数据,在工作器上计算它,并让主代码将其添加到场景中(工作者无权访问WebGL上下文)。然而,该解决方案的复杂性可能无法使这些努力付出代价。

答案 1 :(得分:-2)

工作人员不适合需要DOM操作的解决方案