title: JSON.Stringify error "Cannot Read Property [uuid] of Undefined" on THREE.js Object3D
body: <p>I just refactored one of the top-level object types in my THREE.js app to be an Object3D() so that I can make full use of the parent/child relationships available. </p>
  
  <p>The problem I'm running into is that now, when I attempt to save files, I'm getting this error at <code>JSON.stringify()</code>:</p>
  
  <pre><code>three.min.js:486 Uncaught TypeError: Cannot read property 'AA3E2259-803A-4F50-8567-9D8DA246ABC7' of undefined
      at b (three.min.js:486)
      at B.toJSON (three.min.js:487)
      at JSON.stringify (&lt;anonymous&gt;)
      at saveFile (fileHandlingUtils.js:150)
      at HTMLInputElement.&lt;anonymous&gt; (app.js:34)
  </code></pre>
  
  <p>The offending uuid is not that of the Object3D but of it's material. My thought is that for some reason <code>JSON.Stringify()</code> thinks the uuid is the key and not the value in the key/value pair. Not sure why this would be.</p>
  
  <p>Also strange that it's saying something is 'undefined.' I'm not sure what's coming in undefined, and I'm not sure where to look. Prior to calling <code>JSON.Stringify()</code> the data being called in as the first parameter of <code>JSON.Stringify()</code> appears to be there fine.</p>
  
  <p>Here's the relevant code:</p>
  
  <pre><code>var circularRefs = [        /* Toplevel File Admin Paramas */
                              'fullpath',
                              'data',
                              'cognition',
                              /* GraphElement Params */
                              'nodes',
                              'edges',
                              /* Edge Params */
                              'sourceNode',
                              'targetNode',
                              /* Shared GraphElement Params */
                              'ID',
                              'name',
                              'color',
                              'text',
                              'r', 
                              'g', 
                              'b', 
                              'position',
                              'x',
                              'y',
                              'z', 
                              'opacity', 
                              'label', 
                              'labelColor', 
                              'labelOpacity',
                              'labelFontSize',
                              'castShadow',
                              'receiveShadows', 
                              /* Group Params */ 
                              'groups', 
                          /*  'edges',    --- Causes circular ref error */
                              /* Node Params */ 
                              'radius', 
                              'shape' 
                      ];
  
  var saveFile = function( filename, content, url ){
  
      var httpRequest = new XMLHttpRequest();
  
      var body = {};
      var jBody;
  
      if ( url ){
          body.fullpath = url + '/' + filename;       // filename includes ext        
      }           
      else if ( !url || url === "" ){
          body.fullpath = filename; 
      }
  
      body.data = content;
  
      jBody = JSON.stringify( body, circularRefs );
  
      // Send the request
      httpRequest.open("POST", '/save', true);
      httpRequest.setRequestHeader( "Content-Type", "application/json;charset=UTF-8" );
      httpRequest.send( jBody );  
  
      console.log( httpRequest );
  }; 
  </code></pre>
  
  <p>The <code>savefile</code> function is called when the user clicks the "Save As" button, which is an HTML-based button. <code>cognition</code> is an object that contains arrays of 'Nodes" and "Edges." The problem reported here started when I changed Nodes from being their own object type:</p>
  
  <p><code>Node = function( params ){ .... }...
   var n = new Node...</code></p>
  
  <p>to being THREE.Object3D()s...</p>
  
  <pre><code>function addNode( params ){
        var node = new THREE.Object3D();
        node.name = ... 
  
        ... scene.add( node );
  }
  </code></pre>
  
  <p>Here's the code on calling the <code>saveFile()</code> function:</p>
  
  <pre><code>document.getElementById('saveAsBtn').addEventListener( 'click', function(){ 
                                                                          saveFile( ( fileNameFromInput() + ".json" ) , cognition, "./userfiles" );
                                                                                      toggleSaveAsBoxOff(); } );
  </code></pre>
  
  <p>Thanks for the help.</p>
  
  <hr>
  
  <p>UPDATE: Following suggestion from pailhead below I swapped three.js (non-minified) in for three.min.js. I'm running r91 of the non-minified version, and was running r85 of the minified version.</p>
  
  <p>Now with r91 of both minified and non-minified versions, I am no longer getting the error. But...</p>
  
  <p>With the old version of the app, where the Node is its own object-type, things are saving as they were previously (that's good and consistent). With the new version, where the Node is an Object3D(), when I go to save the file, the file is saved with the nodes as empty objects.</p>
  
  <p>Save from old file version (own object type):</p>
  
  <pre><code>{
    "nodes": [
      {
        "ID": "n000",
        "name": "n000",
        "color": {
          "r": 128,
          "g": 128,
          "b": 255
        },
        "position": {
          "x": 4.280913954264392,
          "y": 13.520686329165372,
          "z": 10.4285750679757
        },
        "opacity": 0.75, ...
  </code></pre>
  
  <p>... that's good.</p>
  
  <p>Save from new version (Object3D):</p>
  
  <pre><code>{
    "nodes": [
      {},
      {},
      {},
      {},
      {},
      {}, ...
  </code></pre>
  
  <p>That's bad. What's interesting is that the correct number of nodes is being captured, so I suspect that it may have something to do with the way things are being excluded. But I have no idea where to start and Googling hasn't turned up much. </p>
  
  <p>Thanks again...</p>