Three.js - How to deserialize geometry.toJSON()? (where is geometry.fromJSON?)

Question

I'm trying to offload some Geometry loading and processing into a web worker. To send it back to the main thread, the Geometry instance needs to be serialized, and it seems that Geometry.prototype.toJSON() was meant for exactly this type of thing.

But I can't figure out how to turn that object back into a Geometry instance in the main thread. How is the toJSON() output supposed to be used?

PS: I've seen this related question, but it seems dated. toJSON() wasn't in the API yet. The accepted answer is a bit convoluted, and requires me to still do some raw work in the main thread.

Answer 1

If I understand correctly the issue is:

• You have a file which you want to load as a geometry (obj, stl, etc.).
• You want to load this file in a WebWorker.
• You then want to send the geometry back to the main script.
• So you're thinking about sending the file back to the main thread as JSON, since sending objects is not supported.
• Then you would convert the json to a geometry on the main thread.

The problem with this is that converting from a JSON string to a geometry is another loading operation (which is why there's JSONLoader), so at that point you may as well have just done the loading on the main thread.

The approach I've used is to load the file into flat arrays of vertices and normals, then I send those back to the main thread to add to a BufferGeometry. You can also use transferable objects to gain some more speed.

// worker.js

var vertices = new Float32Array( faces * 3 * 3 );
var normals = new Float32Array( faces * 3 * 3 );   

// Load your file into the arrays somehow.

var message = {
    status:'complete',
    vertices: vertices,
    normals: normals
};

postMessage(message, [message.vertices.buffer, message.normals.buffer]);

---

// app.js

onmessage = function (event) {

    var vertices = event.data.vertices;
    var normals = event.data.normals;

    var geometry = new THREE.BufferGeometry();
    geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
    geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );

    var material = new THREE.MeshPhongMaterial();

    var mesh = new THREE.Mesh( geometry, material );

    // Do something with it.

};

Answer 2

You can use JSONLoader unserialize geometry like so:

var geometry = new THREE.Geometry();
var serializedGeometry = geometry.toJSON();
var jsonLoader = new THREE.JSONLoader();

var result = jsonLoader.parse(serializedGeometry.data);

var unserializedGeometry = result.geometry;

Answer 3

Why don't you just use the JSONLoader?

myloader = new THREE.JSONLoader()
myloader.load("path/to/json", function(geometry,material){
    mesh = new THREE.Mesh(geometry,material)
    scene.add(mesh)
})

or loading a JSON file the same way