title: jquery load function issue
body: <p>I'm trying to use the jquery load function to load a 3D model converted to a .DAE file into a target div when a button is pressed. However, when the button is pressed loads of numbers appear on the screen relating to the file, rather than the model...</p>
  
  <p><a href="http://i.stack.imgur.com/sAIAJ.png" rel="nofollow">Here is a screen shot of the problem</a></p>
  
  <p>If it isnt possible to do this, I was also wondering if it is possible to use the jquery load function to simply replace the model shown in the centre of the page when the buttons are clicked, as show in the screenshot?</p>
  
  <p>Any help is greately apperiated. The code i have can be seen below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
  $('#LBC').click(function() {
      $('#target').load('bloodexternalcontent.DAE');
  });
  
  
  
  });
  &lt;/script&gt;
  
  &lt;title&gt;Visualising Cells&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;script src="three.js"&gt;&lt;/script&gt;
  &lt;script src="ColladaLoader.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script src="js/controls/OrbitControls.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  var controls = new THREE.OrbitControls( camera );
  controls.addEventListener( 'change', render );
  &lt;/script&gt;
  
  &lt;script&gt;
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  
  var scene = new THREE.Scene();
  
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.01, 500 );
  camera.position.z = 0.16;
  camera.position.x = 0;
  camera.position.y = 0;
  scene.add(camera);
  
  
  var renderer=new THREE.WebGLRenderer();
  renderer.setSize(width,height); 
  document.body.appendChild(renderer.domElement);
  renderer.render(scene,camera);
  renderer.setClearColor("rgb(181,181,181)");
  
  light = new THREE.DirectionalLight(0xffffff);
          light.position.set(1, 1, 1);
          scene.add(light);
  
  light = new THREE.DirectionalLight(0xffffff);
          light.position.set(0, 0, 0.14);
          scene.add(light);
  
  
  
  var loader = new THREE.ColladaLoader();
          loader.load('egg2.DAE', function (collada) {
  
              object = collada.scene;
              object.position.x = 0;
              object.position.y = 0;
              object.position.z = 0;
              object.updateMatrix();
              scene.add(object);
              }
              );
  
  
  
  document.addEventListener('keydown', function(event) {
  console.log("Up Arrow Pressed");
  console.log(camera.position.z);
  if (event.keyCode == 38) {
  
      if (camera.position.z &gt;= 0.1) {
  
          camera.position.z = camera.position.z - 0.01;
  
      }
  
  }
  
  else if (event.keyCode == 40) {
  
      console.log("Down Arrow Pressed")
  
      if (camera.position.z &lt; 0.2) {
  
          camera.position.z = camera.position.z + 0.01;
      }
  
      }
  }, true);
  
  render = function () {
          requestAnimationFrame(render);
  
  object.rotation.x += 0.0;
  object.rotation.y += 0.0;
  
  
  renderer.render(scene, camera);
  controls.update();
          };
          render();
  
  &lt;/script&gt;
  
  
  &lt;div class="float-btn"&gt;
  &lt;button type="button" id="LBC"&gt;Load Red Blood Cell&lt;/button&gt;
  &lt;button type="button" id="LEC"&gt;Load Egg Cell&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="float-txt"&gt;
  &lt;div style="color:#000000"&gt;
  &lt;div style="font-family: Arial"&gt;
  &lt;div style="font-size: 18px"&gt;
  &lt;div style="text-decoration: underline"&gt;
  &lt;h1&gt;Visualising Microscopic Cells&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="instructions"&gt;
  &lt;div style="color:#000000"&gt;
  &lt;div style="font-family: Arial"&gt;
  &lt;div style="font-size: 16px"&gt;
  &lt;div style="text-decoration: underline"&gt;
  &lt;h2&gt;Instructions&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div class="instruction-txt"&gt;
  &lt;div style="color:#000000"&gt;
  &lt;div style="font-family: Arial"&gt;
  &lt;div style="font-size: 14px"&gt;
  &lt;p&gt;&lt;u&gt;Zoom In:&lt;/u&gt; &lt;strong&gt;Up Arrow&lt;/strong&gt; &lt;br&gt;&lt;u&gt;Zoom Out:&lt;/u&gt; &lt;strong&gt;Down Arrow&lt;/strong&gt;&lt;/br&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="Model-Location" id="target"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>