Question

Utilising this tutorial I’m trying to see if I can save bandwidth with a large mesh by caching it with indexedDB.

So inside the loader callback function I’m doing…

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

  };
};

however the last line where an object containing object is added to the database causes the following error.

Uncaught Error: DATA_CLONE_ERR: DOM Exception 25

I’m not sure what this really means but there must be a way around it no?

Answer 1

It means your THREE.Mesh object is malformed, but not in a way that’s violating indexes, uniqueness, or anything like that. I see this error when I try to store objects that have un-executed functions as members.

The technical definition from the spec is:

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

If you’re trying to store object state of a namespace you’re hosed. If you’re storing plain data I would try doing a deep copy of the THREE.Mesh() object checking typeof for ‘function.’

EDIT: I looked into this further. IndexedDB copies objects into the object store using the HTML5 structured clone algorithm. According to the spec, Error and Function objects cannot be cloned and throw a DATA_CLONE_ERR. That’s what you’re seeing.