在 THREE.js 中使用 webworkers答案

【问题标题】：Using webworkers in THREE.js在 THREE.js 中使用 webworkers
【发布时间】：2016-02-14 06:22:24
【问题描述】：

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

谁能指导我如何完成它，或者有可能吗？

谢谢。

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

【问题讨论】：

标签： javascript json three.js web-worker

【解决方案1】：

Workers 不适合需要 DOM 操作的解决方案

【讨论】：

这是stackoverflow.com/questions/33679713 的副本，它还没有答案，因此不能这样标记。
document.body.appendChild 是一个 DOM 操作，但是 DOM 不能在 Workers 中使用

【解决方案2】：

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

加载器中的方法本质上是一个方法，它会在允许其他 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 上下文）。然而，该解决方案的复杂性可能不值得付出努力。

【讨论】：