1

I'm using Three.js to save and load objects in a database. I'm inserting my objects as JSON.

The problem is that JSON.stringify or toJSON() transform the image url (textures) in base64, and I wanted to keep the http url.

This is the originial JSON:

{
    "metadata": {
        [...]
    },
    "geometries": [
        {
            [...]
        }],
    "materials": [
        {
            [...]
        }],
    "textures": [
        {
            [...]
        }],
    "images": [
        {
            "uuid": "4ED9CE3E-7C8A-4EB7-8CF8-D90B3527DF5F",
            "url": "data:image/png;base64,iVBORw0KGgoATyuRZGZVREd0FAERRRBAEBEFwAYEyKqP/Rfozx+5fDYjvpeT/akv+n/J+/7eMjX9Ke8uojP4JVAYAyuj/Ld3Por7fPQ9i8d7vvr8LKNzLg/dn1u1hvQf3q/v92vRX0X/ [...]"
        }],
    "object": {
        [...]
    }
}

And the desired kind of JSON would be this :

{
    "metadata": {
        [...]
    },
    "geometries": [
        {
            [...]
        }],
    "materials": [
        {
            [...]
        }],
    "textures": [
        {
            [...]
        }],
    "images": [
        {
            "uuid": "4ED9CE3E-7C8A-4EB7-8CF8-D90B3527DF5F",
            "url": "http://www.domain.com/picture/path.png"
        }],
    "object": {
        [...]
    }
}

Is there a solution to do this ?

2
  • How do you use stringify function?
    – Bfcm
    Nov 23, 2015 at 8:54
  • var objectJson = SELECTED.toJSON(); objectJson = JSON.stringify( objectJson, null, '\t' ); objectJson = objectJson.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
    – sRcBh
    Nov 23, 2015 at 9:07

2 Answers 2

1

I came across the same problem and solved it by overwriting Source.toJSON() as follows:

Source.prototype.toJSON = function ( meta ) {

    const isRootObject = ( meta === undefined || typeof meta === 'string' );

    if ( !isRootObject && meta.images[ this.uuid ] !== undefined ) {
        return meta.images[ this.uuid ];
    }

    const output = {
        uuid: this.uuid,
        url: this.data.src
    };

    if ( !isRootObject ) {
        meta.images[ this.uuid ] = output;
    }

    return output;
}

Alternatively, you can store the relative URL of the image by using this.data.getAttribute('src').

0

After studying the JSON file and getting my texture path, I did the following:

var objectParsed = SELECTED.toJSON(); //transform the selected object in JSON
textureBase64 = objectParsed.images[0].url; //get the value of the base64 encoded image
objectParsed.images[0].url = texMap; // replace the base64 encoded image with the http texture path

objectParsed = JSON.stringify( objectParsed, null, '\t' );
objectParsed = objectParsed.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' ); // make the JSON readable

And now it did the trick ! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.