title: Three.js "Uncaught TypeError: Cannot read property 'render' of undefined" error with object literal
body: <p>I'm trying to convert my codes to object literal style. I can create the scene but I got problems with animation.</p>
  
  <p>In this line I'm getting the "Uncaught TypeError: Cannot read property 'render' of undefined" error.</p>
  
  <pre><code>this.renderer.render(this.scene, this.camera);
  </code></pre>
  
  <p>This is my object:</p>
  
  <pre><code>var three = {
      objects: function() {
          /*objects*/
      },
      createScene: function() {
          this.container = document.getElementById("container");
  
          this.scene = new THREE.Scene();
  
          this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, (26 * 10));
          this.camera.position.set(26, (26 / 2), 26);
  
          window.addEventListener("resize", function() {
              this.camera.aspect = window.innerWidth / window.innerHeight;
              this.camera.updateProjectionMatrix();
              this.renderer.setSize(window.innerWidth, window.innerHeight);
          });
  
          this.objects();
  
          this.renderer = new THREE.WebGLRenderer();
          this.renderer.setPixelRatio(window.devicePixelRatio);
          this.renderer.setSize(window.innerWidth, window.innerHeight);
          this.container.appendChild(this.renderer.domElement);
  
          this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
      },
      animate: function() {
          this.renderer.render(this.scene, this.camera);
          requestAnimationFrame(this.animate);
      },
      render: function() {
          this.createScene();
          this.animate();
      }
  };
  
  three.render();
  </code></pre>