相关疑难解决方法(0)

当将大纹理图像应用到网格上一段明显的时间时，Three.js 会锁定浏览器的主线程。让我们考虑以下示例：

var texLoader = new THREE.TextureLoader();

texLoader.load('someLargeTexture.jpg', function(texture) {
    var geometry = new THREE.SphereGeometry(10, 32, 32);
    var material = new THREE.MeshBasicMaterial({map: texture});
    var sphere = new THREE.Mesh(geometry, material);

    // adding the object to the scene will lock up the browser's main thread
    scene.add(sphere);
});

我还注意到以下几点：

• 如果新对象没有添加到场景中，则不会发生线程锁定
• 改变对象的几何形状不会导致锁定
• 如果使用从现有对象（已存在于场景中）借用的材质创建新对象将不会导致锁定
• 将新材质分配给现有对象（已存在于场景中）将导致锁定

我的结论是，Three.js 在材质添加到场景时对其进行了一些处理。结果被缓存并稍后重新使用。

问题是这项工作是否可以以某种方式卸载给 Web Worker，这样主线程就不会被锁定？

工人可能看起来像这样：

var texLoader = new THREE.TextureLoader();

texLoader.load('someLargeTexture.jpg', function(texture) {
    var material = new THREE.MeshBasicMaterial({map: texture});

    // ... long-running work goes …

我想在多线程中使用threeJS的dracoLoader,然后我选择了Webworker和IndexedDB.我在webworker中获得了正确的Geometry,但是,当我使用IndexedDB将数据传递给主线程时,几何体将更改为普通的JS对象而不是ThreeJS Geometry.几何失去了它的功能和一些信息.

webworker.js

self.saveDrcToIndexedDB = function (drcfinal) {

  var db;
  var request = indexedDB.open("drcDB");

  drcfinal.indexName = self.randomStr();

  request.onupgradeneeded = function(event) {

    console.log('successfully upgraded db');  

    db = event.target.result;
    var objectStore = db.createObjectStore("drcfinal", { keyPath: "indexName"});
  };

  request.onsuccess = function(event) {

    console.log('successfully opened db');

    db = event.target.result;
    var transaction = db.transaction(["drcfinal"], "readwrite");

    var objectStore = transaction.objectStore("drcfinal");
    objectStore.add(drcfinal).onsuccess = function(event) {
      self.postMessage(drcfinal.indexName);
    };
  } 
}

main.js

var worker = new Worker('webworker.js');

worker.addEventListener('message', function(e) {

  indexedDB.open("drcDB").onsuccess = function(event) {

    let db = event.target.result;   
    let …