title: How to add line in scene in three.js?
body: <p>I try to add a line in three.js. But when call the addline function in my code it doesn't appear in the scene. I try to use MVC design pattern. I don't know where i made mistake. Thanks for your help.<br>
  My code is below:  </p>
  
  <pre><code>function View(viewArea) {
      var viewport = document.getElementById(viewArea);
      var viewportHeight = document.getElementById(viewArea).offsetHeight;
      var viewportWidth = document.getElementById(viewArea).offsetWidth;
  
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( viewportWidth, viewportHeight );
      viewport.appendChild(renderer.domElement);
  
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, viewportWidth / viewportHeight, 0.1, 1000 );
      camera.position.set(100,70,3000);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
  
      var light = new THREE.PointLight(0xffffff);
      light.position.set(100,100,100);
      scene.add(light);
  
      this.scene = scene;
      this.camera = camera;
      this.light = light;
      this.renderer = renderer;
  }
  
  View.prototype.addLine = function (geometry) {
      var material = new THREE.LineBasicMaterial({ color: 0x000000 });
      var line = new THREE.Line( geometry, material );
      this.scene.add( line );
  };
  
  View.prototype.render = function () {
      this.renderer.render(this.scene, this.camera);
  };
  
  function Controller(viewArea) {
      var view = new View(viewArea);
  
      var geometry = new THREE.Geometry();
      geometry.vertices.push( new THREE.Vector3( 0, 0, 0) );
      for(var i=0;i&lt;100;i+=10){
          geometry.vertices.push(
              new THREE.Vector3(i,i+10,i+20)
          );
          view.addLine(geometry);
      }
      view.render();
  }
  </code></pre>
  
  <p>My HTML code is:</p>
  
  <pre><code>&lt;body&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="leftMenu"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"&gt;
                      &lt;div class="row" id="viewport"&gt;
                      &lt;/div&gt;
                      &lt;div class="row" id="informationMenu"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" id="rightMenu"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
               var controller = new Controller('viewport');
          });   
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>