title: How can I Import my object with it's inherent textures from Blender to ThreeJS?
body: <p>I have used the STL Loader for threejs to import my object from Blender into threejs but for some reason, the textures don't appear. I assume it has to do with the object's MeshBasicMaterial. I tried changing it to Phong but the object turns black instead. </p>
  
  <p>Then I realized, instead of changing the material from basic to phong, why can't I kept the inherent features/textures from Blender when I load the object from STL loader to threejs? Is there a way to keep the texture? Is there a tutorial I can follow? </p>
  
  <p>THanks!  </p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>Here's a snippet of my code where I exported my Blender object with textures to a threejs .js file. The object loads in my viewer but it's black with no textures. I'm not sure how to fix this. I followed another example that used an inn for texture (hence the name. Didn't change the name yet). </p>
  
  <pre><code>var Viewport = function ( signals ) {
  
  var container = new UI.Panel( 'absolute' );
  container.setBackgroundColor( '#aaa' );
  
  var clock = new THREE.Clock();
  
  // settings
  var enableHelpersFog = true;
  
  // helpers
  
  var objects = [];
  var INTERSECTED;
  
  var sceneHelpers = new THREE.Scene();
  
  //the grid that appears at the beginning. 
  var size = 500, step = 25;
  var geometry = new THREE.Geometry();
  var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
  var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0x888888 );
  
  for ( var i = - size; i &lt;= size; i += step ) {
  
      geometry.vertices.push( new THREE.Vector3( -size, 0, i ) );
      geometry.vertices.push( new THREE.Vector3(  size, 0, i ) );
  
      geometry.vertices.push( new THREE.Vector3( i, 0, -size ) );
      geometry.vertices.push( new THREE.Vector3( i, 0,  size ) );
  
      var color = i === 0 ? color1 : color2;
  
      geometry.colors.push( color, color, color, color );
  }
  var grid = new THREE.Line( geometry, material, THREE.LinePieces );
  sceneHelpers.add( grid );
  
  
  ///Objects stuff
  var objectshapes = [];
  
  //stl files
  group = new THREE.Object3D();
  
  
  
  
              var loader_slotted_disk = new THREE.STLLoader();
              loader_slotted_disk.addEventListener( 'load', function ( event ) {
                  var geometry = event.content;
                  console.log(geometry);
                  var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                  var mesh1 = new THREE.Mesh( geometry, material );
  
                  mesh1.name='slotted disk';
                  mesh1.castShadow = true;
                  mesh1.receiveShadow = true;
  
                  sceneHelpers.add( mesh1 );
                  objectshapes.push( mesh1 );
  
              } );    
              loader_slotted_disk.load( 'js/ui/assests/slotted_disk.stl' );
  
              var loader_left_bronchus = new THREE.STLLoader();
              loader_left_bronchus.addEventListener( 'load', function ( event ) {
  
                  var geometry = event.content;
                  console.log(geometry);
                  var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                  var mesh1 = new THREE.Mesh( geometry, material );
  
                  mesh1.name='left bronchus';
                  mesh1.castShadow = true;
                  mesh1.receiveShadow = true;
  
                  mesh1.position.x = Math.random() * 200 - 50;
                  mesh1.position.y = Math.random() * 200 - 50;
                  mesh1.position.z = Math.random() * 200 - 50;
  
                  sceneHelpers.add( mesh1 );
                  objectshapes.push( mesh1 );
  
              } );
              loader_left_bronchus.load( 'js/ui/assests/left_bronchus.stl' );
  
              var loader_parenchyma = new THREE.STLLoader();
              loader_parenchyma.addEventListener( 'load', function ( event ) {
  
                  var geometry = event.content;
                  console.log(geometry);
                  var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 });
                  var mesh2 = new THREE.Mesh( geometry, material );
  
                  mesh2.name='parenchyma';
                  mesh2.castShadow = true;
                  mesh2.receiveShadow = true;
  
                  sceneHelpers.add( mesh2 );
                  objectshapes.push( mesh2 );
  
              } );
              //loader_parenchyma.load( 'js/ui/assests/parenchyma.stl' );
  
              //group.rotation.x = Math.PI* 3/2
  
  
              ////////////
  // CUSTOM //
  ////////////
  
  
  
                          var inn_loader = new THREE.JSONLoader(); inn_loader.load("js/reducedandcoloredmodel[Conflict].js", function(geo, material) { var materials = new THREE.MeshFaceMaterial(material); inn = new THREE.Mesh(geo, materials); scene.add(inn); }); // 
  ///stl files added
  
              var geometry = new THREE.CubeGeometry( 50, 50, 50 );
              var geometry2 = new THREE.SphereGeometry( 50, 10, 10);
  
              var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
              object.name = "cube";
  
              object.position.x = Math.random() * 200 - 50;
              object.position.y = Math.random() * 200 - 50;
              object.position.z = Math.random() * 200 - 50;
  
  
              object.rotation.x = Math.random() * 2 * Math.PI;
              object.rotation.y = Math.random() * 2 * Math.PI;
              object.rotation.z = Math.random() * 2 * Math.PI;
  
              sceneHelpers.add( object );
              objectshapes.push( object );
  
              var object2 = new THREE.Mesh( geometry2, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
              object2.name = "sphere";
  
              object2.position.x = Math.random() * 200 - 50;
              object2.position.y = Math.random() * 200 - 50;
              object2.position.z = Math.random() * 200 - 50;
  
              object2.rotation.x = Math.random() * 2 * Math.PI;
              object2.rotation.y = Math.random() * 2 * Math.PI;
              object2.rotation.z = Math.random() * 2 * Math.PI;
  
              sceneHelpers.add( object2 );
              objectshapes.push( object2 );
              console.log(objectshapes);
  
  
  ///box around object
  var selectionBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true, fog: false } ) );
  selectionBox.matrixAutoUpdate = false;
  selectionBox.visible = false;
  sceneHelpers.add( selectionBox );
  
  ///axis
  var selectionAxis = new THREE.AxisHelper( 100 );
  selectionAxis.material.depthTest = false;
  selectionAxis.material.transparent = true;
  selectionAxis.matrixAutoUpdate = false;
  selectionAxis.visible = false;
  sceneHelpers.add( selectionAxis );
  
  // default dummy scene and camera
  
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );;
  
  // fog
  
  var oldFogType = "None";
  var oldFogColor = 0xaaaaaa;
  var oldFogNear = 1;
  var oldFogFar = 5000;
  var oldFogDensity = 0.00025;
  
  // object picking
  
  var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000, 8, 8 ) );
  intersectionPlane.visible = false;
  sceneHelpers.add( intersectionPlane );
  
  var ray = new THREE.Raycaster();
  var projector = new THREE.Projector();
  var offset = new THREE.Vector3();
  
  var cameraChanged = false;
  var helpersVisible = true;
  
  //by default the selected scene object is the camera.
  var picked = null;
  var selected = camera;
  </code></pre>