title: Importing Blender obj file with mtl to ThreeJS
body: <p>I am trying to import an object file that I created in Blender to ThreeJS. My Blender project looks like this:
  <a href="https://i.stack.imgur.com/aYydr.jpg" rel="nofollow noreferrer">image</a></p>
  
  <p>I exported it into a waveform, for importing into ThreeJS I used MTLLoader and OBJLoader, here is my code:</p>
  
  <pre><code>&lt;script&gt;
              var container;
              var camera, controls, scene, renderer, dragControls;
              var lighting, ambient, keyLight, fillLight, backLight;
              var windowHalfX = window.innerWidth / 2;
              var windowHalfY = window.innerHeight / 2;
  
              var keyboard = {};
              var floor;
  
              var objects = [];
              var meshes = [];
  
              var cameraParams = {speed: 0.1, turnSpeed: Math.PI * 0.5};
  
              var raycaster = new THREE.Raycaster();
              var mouse = new THREE.Vector2(1, 1), INTERSECTED;
  
              init();
              animate();
  
              function init() {
                  container = document.createElement('div');
                  document.body.appendChild(container);
  
                  camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
                  camera.position.set(0, 7, 25);
  
                  scene = new THREE.Scene();
                  ambient = new THREE.AmbientLight(0xffffff, 1.0);
                  scene.add(ambient);
  
                  keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
                  keyLight.position.set(-100, 0, 100);
  
                  fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
                  fillLight.position.set(100, 0, 100);
  
                  backLight = new THREE.DirectionalLight(0xffffff, 1.0);
                  backLight.position.set(100, 0, -100).normalize();
  
                  scene.add(keyLight);
                  scene.add(fillLight);
                  scene.add(backLight);
  
                  // load model
  
                  loadMesh('road', function(obj){
                      obj.position.y = 0;
                      obj.scale.x = 1;
                      obj.scale.y = 1;
                      obj.scale.z = 1;
                      addMesh(obj);
                  });
  
                  renderer = new THREE.WebGLRenderer();
                  renderer.setPixelRatio(window.devicePixelRatio);
                  renderer.setSize(window.innerWidth, window.innerHeight);
                  renderer.setClearColor(new THREE.Color('hsl(0, 0%, 10%)'));
  
                  container.appendChild(renderer.domElement);
  
  
                  controls = new THREE.OrbitControls(camera, renderer.domElement);
                  controls.enableDamping = true;
                  controls.dampingFactor = 0.25;
                  controls.enableZoom = false;
  
                  dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
                  dragControls.addEventListener('dragstart', function (event) {
                      event.object.material.emissive.set(0xaaaaaa);
                      controls.enabled = false;
                  });
  
                  dragControls.addEventListener('dragend', function (event) {
                      event.object.material.emissive.set(0x000000);
                      controls.enabled = true;
                  });
  
                  window.addEventListener('resize', onWindowResize, false);
                  window.addEventListener('keydown', keyDownEvent, false);
                  window.addEventListener('keyup', keyUpEvent, false);
                  window.addEventListener('mousemove', onMouseMove, false);
              }
  
              function addMesh(mesh) {
                  meshes.push(mesh);
                  scene.add(mesh);
              }
  
              function loadMesh(name, callback) {
                  var objLoader = new THREE.OBJLoader();
                  var matLoader = new THREE.MTLLoader();
                  matLoader.setPath('assets/');
                  matLoader.load('ROAD2.mtl', function(materials) {
                      materials.preload();
                      objLoader.setMaterials(materials);
                      objLoader.setPath('assets/');
                      objLoader.load('ROAD2.obj', function (obj) {
                          callback(obj);
                      });
                  });
              }
  
              function onWindowResize() {
                  camera.aspect = window.innerWidth/window.innerHeight;
                  camera.updateProjectionMatrix();
  
                  renderer.setSize(window.innerWidth, window.innerHeight);
              }
  
              function keyDownEvent(event) {
                  keyboard[event.keyCode] = true;
              }
  
              function keyUpEvent(event) {
                  keyboard[event.keyCode] = false;
              }
  
              function onMouseMove(event) {
                  event.preventDefault();
  
                  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
              }
  
              function animate() {
                  requestAnimationFrame(animate);
  
                  if (keyboard[37]) { // left arrow key
                      camera.rotation.y += cameraParams.turnSpeed;
                  }
  
                  if (keyboard[39]) { // right arrow key
                      camera.rotation.y -= cameraParams.turnSpeed;
                  }
  
                  controls.update();
                  render();
              }
  
              function render() {
                  renderer.render(scene, camera);
              }
  
          &lt;/script&gt;
  </code></pre>
  
  <p>My Blender scene rarely loads in my browser, when it does, it is without any textures. Most of the time my tab crashes before anything is able to load in because is eats up all my RAM (using Firefox and http-server to load the html). I am out of ideas about what the problem is, haven't been able to find anything on Google, most of the examples were of one object with materials and textures. 
  My file hierarchy looks like this in case it is important:</p>
  
  <pre><code>index.html
  js/
     DragControls1.js
     MTLLoader.js
     OBJLoader.js
     OrbitControls.js
     three.js
  assets/
     ROAD2.mtl
     ROAD2.obj
     cottage_textures.png
     road_texture.png
  </code></pre>
  
  <p>Any help would be appreciated. </p>