javascript - 使用 indexedDB 存储一个 three.js 网格对象

Question

利用 this tutorial我正在尝试查看是否可以通过使用 indexedDB 缓存大型网格来节省带宽。

所以在我正在做的加载器回调函数中...

object = new THREE.Mesh( geometry, material );

webkitIndexedDB.open("MyNewDB").onsuccess = function(event) {
  window.db = event.srcElement.result;

  window.db.setVersion("1.0").onsuccess = function(event) {
    var objectStore = window.db.createObjectStore("meshes", { keyPath: "item_id" });

    objectStore.add({item_id: 0, mesh: object});  //  <= this is the crucial line

  };
};

然而，将包含 object 的对象添加到数据库的最后一行会导致以下错误。

Uncaught Error :DATA_CLONE_ERR:DOM 异常 25

我不确定这到底意味着什么，但一定有解决办法，不是吗？

Answer 1

这意味着您的 THREE.Mesh object 格式不正确，但并未违反索引、唯一性或类似内容。当我尝试将具有未执行函数的对象存储为成员时，我看到了这个错误。

技术定义来自the spec是:

The data being stored could not be cloned by the internal structured cloning algorithm.

如果您正在尝试存储您正在处理的命名空间的对象状态。如果您要存储纯数据，我会尝试对 THREE.Mesh() 对象进行深度复制，检查 typeof 是否有“功能”。

编辑:我进一步调查了这一点。 IndexedDB 使用 HTML5 将对象复制到对象存储中 structured clone algorithm .根据the spec , Error 和 Function 对象不能被克隆并抛出一个 DATA_CLONE_ERR。这就是您所看到的。