title: Three JS - Uncaught TypeError: Cannot read property 'length' of undefined at THREE.JSONLoader.parse
body: <p>I'm trying to just render a blender exported json(exported to use in three js). I'm doing that as follows.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Three.js JSON Loader Demo&lt;/title&gt;
      &lt;script type="text/javascript" src="three.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      var renderer;  // A three.js WebGL or Canvas renderer.
      var scene;     // The 3D scene that will be rendered, containing the model.
      var camera;    // The camera that takes the picture of the scene.
      var light;     // A light shining from the direction of the camera.
  
      var model; // The three.js object that represents the model.
  
      var rotateX = 0;   // rotation of model about the x-axis
      var rotateY = 0;  // rotation of model about the y-axis
  
      function modelLoadedCallback(geometry, materials) {
  
          var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
  
          /* Determine the ranges of x, y, and z in the vertices of the geometry. */
  
          var xmin = Infinity;
          var xmax = -Infinity;
          var ymin = Infinity;
          var ymax = -Infinity;
          var zmin = Infinity;
          var zmax = -Infinity;
  
          for (var i = 0; i &lt; geometry.vertices.length; i++) {
              var v = geometry.vertices[i];
              if (v.x &lt; xmin)
                  xmin = v.x;
              else if (v.x &gt; xmax)
                  xmax = v.x;
              if (v.y &lt; ymin)
                  ymin = v.y;
              else if (v.y &gt; ymax)
                  ymax = v.y;
              if (v.z &lt; zmin)
                  zmin = v.z;
              else if (v.z &gt; zmax)
                  zmax = v.z;
          }
  
          /* translate the center of the object to the origin */
          var centerX = (xmin+xmax)/2;
          var centerY = (ymin+ymax)/2; 
          var centerZ = (zmin+zmax)/2;
          var max = Math.max(centerX - xmin, xmax - centerX);
          max = Math.max(max, Math.max(centerY - ymin, ymax - centerY) );
          max = Math.max(max, Math.max(centerZ - zmin, zmax - centerZ) );
          var scale = 10/max;
          object.position.set( -centerX, -centerY, -centerZ );
          console.log("Loading finished, scaling object by " + scale);
          console.log("Center at ( " + centerX + ", " + centerY + ", " + centerZ + " )");
  
          /* Create the wrapper, model, to scale and rotate the object. */
  
          model = new THREE.Object3D();
          model.add(object);
          model.scale.set(scale,scale,scale);
          rotateX = rotateY = 0;
          scene.add(model);
          render();
  
      }
  
      function render() {
          renderer.render(scene, camera);
      }
  
  
      function init() {
          try {
              var theCanvas = document.getElementById("cnvs");
  
              scene = new THREE.Scene();
              camera = new THREE.PerspectiveCamera(50, theCanvas.width/theCanvas.height, 0.1, 100);
              camera.position.z = 30;
  
              light = new THREE.DirectionalLight();
              light.position.set(0,0,1);
              renderer = new THREE.WebGLRenderer( { 
                      canvas: theCanvas, 
                      antialias: true
                      } );
  
              scene.add(light);
              render();
  
              var loader = new THREE.JSONLoader();
              loader.load("DummyBox.js", modelLoadedCallback);
  
          }
          catch (e) {
              document.getElementById("message").innerHTML = "Sorry, an error occurred: " + e;
          }
      }
  
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="init()" bgcolor="#CCC"&gt;
  
      &lt;noscript&gt;
      &lt;p style="color: #A00; font-weight: bold"&gt;Sorry, but this page requires JavaScript!&lt;/p&gt;
      &lt;/noscript&gt;
  
      &lt;div style="float:left"&gt;
      &lt;canvas width=350 height=400 id="cnvs" style="background-color:black"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>The Contents of <strong>DummyBox.js</strong> is </p>
  
  <pre><code>{
      "metadata":{
          "generator":"io_three",
          "type":"BufferGeometry",
          "normal":36,
          "version":3,
          "position":36
      },
      "data":{
          "index":{
              "type":"Uint16Array",
              "itemSize":1,
              "array":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]
          },
          "attributes":{
              "position":{
                  "type":"Float32Array",
                  "itemSize":3,
                  "array":[1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,0.999999,1,1,1,1,-1,1,1,-1,1,-1,1,1,-1,-1,0.999999,1,1,-1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,0.999999,1,1,1,1,-1,0.999999,1,1,1,-1,1,0.999999,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,1,-1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1]
              },
              "normal":{
                  "type":"Float32Array",
                  "itemSize":3,
                  "array":[-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1]
              }
          }
      }
  }
  </code></pre>
  
  <p>I'm new to Three js and not able to figure out what is the problem. Is there any website i can go through.. Is there any problem in Exported JSON file.</p>