title: Three.js + OrbitControls - Uncaught TypeError: Cannot read property 'render' of undefined
body: <p>I am writing a class for rotating cube, but every time i rotate it or zoom, i get an error "Cannot read property 'render' of undefined". What am i doing wrong? I guess something is wrong with the scopes. Here is my class:</p>
  
  <pre><code>myclass = function() {
      this.camera = null;
      this.scene = null;
      this.renderer = null;
      this.product = null;
  
      this.init = function (container) {
          this.scene = new THREE.Scene();
          this.camera = createCamera();
          this.product = createProduct();
          this.scene.add(this.product);
          this.createRenderer();
          this.setControls();
          container.appendChild(this.renderer.domElement);
          this.animate();
  
      };
  
      function createCamera() {
          var camera = new THREE.PerspectiveCamera(20, 300 / 400, 1, 10000);
          camera.position.z = 1800;
          return camera;
      }
  
      function createProduct() {
          var geometry = new THREE.BoxGeometry(300, 200, 200);
          var materials = ...;
  
      var product = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
      return product;
      }
      this.createRenderer = function () {
      this.renderer = new THREE.WebGLRenderer({antialias: true});
      this.renderer.setClearColor(0xffffff);
      this.renderer.setSize(this.sceneWidth, this.sceneHeight);
       };
  
      this.setControls = function () {
      this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
      this.controls.addEventListener('change', this.render);
      };
  
      this.animate = function () {
          requestAnimationFrame(this.animate.bind(this));
          this.render();
      };
  
      this.render = function () {
      this.renderer.render(this.scene, this.camera);
      };
   };
  </code></pre>
  
  <p>Tnanks.</p>