使用 indexedDB 存储 Three.js 网格对象

Question

利用本教程我试图看看是否可以通过大网格来节省带宽使用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 的对象添加到数据库的最后一行会导致以下错误。

未捕获错误：DATA_CLONE_ERR：DOM 异常 25

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

Answer 1

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

规范中的技术定义是：

内部结构无法克隆正在存储的数据
克隆算法。

如果您尝试存储名称空间的对象状态，那么您就完蛋了。如果您存储纯数据，我会尝试对 THREE.Mesh() 对象进行深层复制，检查 typeof 是否为“function”。

编辑：我进一步研究了这一点。 IndexedDB 使用 HTML5 结构化克隆算法将对象复制到对象存储中。根据规范，Error 和 Function 对象无法克隆并抛出 DATA_CLONE_ERR< /代码>。这就是你所看到的。