title: Three.js in a div
body: <p>I want to put a THREE.WebGLRenderer in a div. 
  For doing some stuff, mouseevents should work.
  What i found so far is this: <a href="http://jsfiddle.net/fek9ddg5/1/" rel="nofollow">http://jsfiddle.net/fek9ddg5/1/</a></p>
  
  <p>I tried to implement this code as follows. 
  My problem: It seems that the mouse hits the geometry (console shows "hit") but the geometry is not shown.
  What is my fault?</p>
  
  <p>html:</p>
  
  <p>`
          tester
          
          </p>
  
  <pre><code>    &lt;title&gt;Jumbotron Template for Bootstrap&lt;/title&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="../bootstrap-3.3.7-dist/css/portfolio-item.css" rel="stylesheet"&gt;
      &lt;style&gt;
          .container-main {
              margin-top: 75px;
          }
  
          .container-canvas {
              margin: 0 auto;
              width: 200px;
          }
  
          canvas {
              border: 1px solid #333;
              background-color: #000;
          }
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="../build/three.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/libs/dat.gui.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;        
      &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
                  &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
                  &lt;div class="nav-collapse collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container container-main"&gt;
          &lt;div class="container-canvas"&gt;
              &lt;canvas id="mycanvas" width="200" height="200"&gt;
                  This is my fallback content.
              &lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-lg-12"&gt;
                  &lt;h3 class="page-header"&gt;Related Projects&lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-3 col-xs-6"&gt;
                  &lt;a href="#"&gt;
                      &lt;img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-3 col-xs-6"&gt;
                  &lt;a href="#"&gt;
                      &lt;img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-3 col-xs-6"&gt;
                  &lt;a href="#"&gt;
                      &lt;img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-sm-3 col-xs-6"&gt;
                  &lt;a href="#"&gt;
                      &lt;img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt=""&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;`
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code> &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var container, camera, scene, renderer, mesh,
  
              mouse = { x: 0, y: 0 },
              objects = [],
  
              count = 0,
  
              CANVAS_WIDTH = 200,
              CANVAS_HEIGHT = 200;
  
          canvas = document.getElementById( 'mycanvas' );
  
          renderer = new THREE.WebGLRenderer();
          renderer.domElement = canvas;
          renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
  
          scene = new THREE.Scene();
  
          camera = new THREE.PerspectiveCamera( 50, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
          camera.position.y = 150;
          camera.position.z = 2000;
          camera.lookAt( scene.position );
  
          mesh = new THREE.Mesh( 
              new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ), 
              new THREE.MeshBasicMaterial( { color : 0xff0000, wireframe: true } 
          ) );
          scene.add( mesh );
          objects.push( mesh );
  
  
          // find intersections
          var vector = new THREE.Vector3();
          var raycaster = new THREE.Raycaster();
  
          // mouse listener
          document.addEventListener( 'mousedown', function( event ) {
  
              // For the following method to work correctly, set the canvas position *static*; margin &gt; 0 and padding &gt; 0 are OK
              mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
              mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
  
              // For this alternate method, set the canvas position *fixed*; set top &gt; 0, set left &gt; 0; padding must be 0; margin &gt; 0 is OK
              //mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
              //mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;
  
              vector.set( mouse.x, mouse.y, 0.5 );
              vector.unproject( camera );
  
              raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
  
              intersects = raycaster.intersectObjects( objects );
  
              if ( intersects.length &gt; 0 ) {
  
                  console.log("hit");
                  console.log(renderer);
              }
  
          }, false );
  
          function render() {
  
              mesh.rotation.y += 0.01;
  
              renderer.render( scene, camera );
  
          }
  
          (function animate() {
  
              requestAnimationFrame( animate );
  
              render();
  
          })();
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks a lot for your help!</p>