Serialize Object 3D for memory storage

Questions
1

Hi,

I was wondering if a THREE Object 3D (THREE Meshes, etc…) Can be serialized in some way?

I did some research and found GLTF can be used. But I want to serialize the data and store it in cookie memory in javascript instead of exporting to GLTF.

My goal is to serialize a complete class containing an array with THREE Objects inside. The serializing for the class structure works. (See below) But with THREE Objects I loose the mesh data.

I tested JSON stringify and parse options and also the BSON library to make the data binary. But can’t seem to find a good serialize option to work with Three js.

I tried the BufferGeometry but my end goal will have custom loaded geometry. I found this but couldn’t get it to work.
https://stackoverflow.com/questions/70788993/serializing-and-deserializing-geometry-in-three-js-using-tojson-and-buffergeomet

I also red somewhere that a typed language such as Typescript can serialize all data. Not sure if that is true and I want to keep things simple without using compile and nmp, … Want to be able to tweak code directly on server if needed :wink:

This is a test with JSON (But the result doesn’t have the mesh geometry data)

let object_data = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshStandardMaterial({color:0xff0000}));

let serialized_data = JSON.stringify(object_data);
let deserialized_data = JSON.parse(serialized_data);

let mesh_data = Object.assign(new THREE.Mesh, deserialized_data);
scene.add(mesh_data);

This is a test with BSON https://www.npmjs.com/package/bson

import { BSON, EJSON, ObjectId } from './bson.mjs';
        let object_data = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshStandardMaterial({color:0xff0000}));

        const bytes = BSON.serialize(object_data);
        const data = BSON.deserialize(bytes);

        //TESTING TO RECONSRUCT THE OBJECT WITHOUT LUCK
        const data_json = EJSON.stringify(data);
        let object_data_back = Object.assign(new THREE.Mesh, data_json);

Javascript class with array serialize test (works and returns true for the test)

class Greet
{
    greet;

    constructor()
    {
        this.greet = [];
    }

    add_greet(new_greet)
    {
        this.greet.push(new_greet);
    }

    get_greet_random()
    {
        if(this.greet.length != 0)
            return this.greet[Math.floor(Math.random(0, this.greet.length))];
        else
            return null;
    }
}

class CheckGreet extends Greet
{
    constructor()
    {
        super();

        this.has_say_greet = false;
    }

    check_if_has_greetings()
    {
        console.log("in check");
        if(this.get_greet_random() != null)
            this.has_say_greet = true;

        return this.has_say_greet;
    }
}


let checkGreet = new CheckGreet();
checkGreet.add_greet("Hello World");

let serialized_data = JSON.stringify(checkGreet);
let deserialized_data = JSON.parse(serialized_data);

let checkGreet_from_deserialized = Object.assign(new CheckGreet(), deserialized_data);
console.log(checkGreet_from_deserialized.check_if_has_greetings());`

Also found this post (Also did some tests with this without good results)
https://oooops.dev/2022/09/30/serializing-and-de-serializing-es6-class-instances-recursively/

I’m stuck on this topic for a while and was hoping to gain some insights from the community.
Regards,

2

In general instances of classes cannot be serialized to JSON by the JavaScript language itself. Serialization must be implemented for each object, with some particular representation in mind.

three.js provides one such serialization method, the .toJSON() method: Object3D.toJSON(). To reconstruct three.js objects from JSON created in this way (and only JSON created in this way) use THREE.ObjectLoader.

Also note that cookies are typically limited to 4kb. Very few 3D models will fit within that limit, considering textures and mesh geometry. The web’s LocalStorage and IndexedDB APIs have higher limits.

1 Like
3

I see,

I’ll find another way to store the data. By keeping a ledger of actions probably.

Thanks for the info.