javascript - 在 THREE.js 中使用网络 worker

Question

我有一个更大的模型可以卡住我的场景。因为我从一开始就不需要这个模型，所以在后台加载这个模型会很酷。网络 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();

Answer 1

JavaScript 是单线程的，并对其事件使用“协作”调度，这意味着如果您有一个具有长循环且不放弃其执行的函数，则在此期间将无法执行任何其他操作。

加载器中的方法本质上是一个单一的方法，它将在允许其他 JavaScript 代码运行之前运行其计算直至完成。因此，与其使用 worker，您可能能够通过使其更受事件驱动并以这种方式改善体验来将其拆分一点，如下所示:

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 时间，解决卡住的唯一方法是将该计算卸载给工作人员。您需要传递数据，在 worker 上计算它，然后让主要代码将它添加到场景中(worker 无权访问 WebGL 上下文)。然而，该解决方案的复杂性可能不值得付出努力。