我想在多线程中使用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 objectStore = db.transaction(["drcfinal"]).objectStore("drcfinal");
objectStore.get(e.data).onsuccess = function(event) {
console.log(event.target.result);
};
}
}, false);
worker.postMessage(somedata);
我可以将正确的几何图形传输到主线程吗?还是使用其他工具代替IndexedDB?还是使用其他多线程工具而不是webworker?
最佳答案
在IndexedDB中存储数据时,使用一种称为Structured Cloning的机制。同样适用于通过postMessage
向WebWorkers发送消息和从WebWorkers发送消息。这种方法不可能复制功能。因此,您不能传送完整的对象,包括它们的方法。简而言之,这是一种更好的JSON.stringify/parse
方法,因为结构化克隆可以例如处理循环依赖性。
AFAIK所有Web浏览器可用的多线程机制(例如WebWorker,SharedWorker和ServiceWorker)都使用这种基于actor的消息发送方法。
但是,您可以使用Transferable对象使用Worker.postMessage将数据从WebWorker传输到主线程。这样,您可以将THREE.Geometry
的顶点数组作为Transferable
发送。例如。在WebWorker中使用THREE.BufferGeometry
时。
const myVertexData = bufferGeometry.getAttribute('position').array.buffer;
self.postMessage({myVertices: myVertexData}, [myVertexData]);
由于不复制数据,而仅更改其所有权,因此速度非常快。
关于javascript - 将Webworker和IndexedDB用于三个js的加载器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48575106/