How can i store decals in Three.js and load them? - three.js

Question

I have a model that when i click on the faces - it's adds decals (points or marks on the face) , i wonder how can i store the selection and load it later on.
I've followed the example Here and this is then function that stores the decal in array
function shoot() {
position.copy( intersection.point );
orientation.copy( mouseHelper.rotation );
if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
size.set( scale, scale, scale );
var material = decalMaterial.clone();
material.color.setHex( 0xffffff );
var m = new THREE.Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
decals.push( m );
scene.add( m );
}
So i've tried to store the decals array and when the scene is loading - add them to the scene
scene.add( decals ); // just an idea
I also run in to this example - but still - i couldn't figure out how to do so.

Answer 1

Since decals are just meshes, you can serialize them with Object3D.toJSON() and restore them via ObjectLoader. I've update your fiddle to demonstrate this approach. The relevant code is:
const jsonString = JSON.stringify( scene.toJSON() );
scene = new THREE.ObjectLoader().parse( JSON.parse( jsonString ) );
When the scene object is restored, the decals should still be there. The only thing that disappears is the axes helper (since helpers can't be serialized/deserialized yet).