CodePen

HTML

            
              <!-- My scene -->
	<canvas id="scene"></canvas>

<!--
  I created a collection of small examples in Three.js to understand very quickly the purpose of some functions.
  You can visit the 'website' of the entire collection of pens here : http://mamboleoo.be/learnThree/

  You can also see the collection in CodePen
  http://codepen.io/collection/DrxLEd/

  Do not hesitate to comment if there is something wrong (I'm still learning)

  Thanks !
-->
            
          
!

CSS

            
              body,html{width:100%;height:100%;padding:0;margin:0;overflow: hidden;}
            
          
!

JS

            
              /*
  http://codepen.io/Mamboleoo/pen/PqjGdN
  http://mamboleoo.be/learnThree/
*/

var renderer, scene, camera, banana;

var ww = window.innerWidth,
	wh = window.innerHeight;

function init(){

	renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
	renderer.setSize(ww,wh);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
	camera.position.set(0,0,10);
	scene.add(camera);

	//Add a light in the scene
	directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
	directionalLight.position.set( 0, 0, 350 );
	directionalLight.lookAt(new THREE.Vector3(0,0,0));
	scene.add( directionalLight );

	//Load the obj file
	loadOBJ();
}

var loadOBJ = function(){

	//Manager from ThreeJs to track a loader and its status
	var manager = new THREE.LoadingManager();
	//Loader for Obj from Three.js
	var loader = new THREE.OBJLoader( manager );
	//Launch loading of the obj file, addBananaInScene is the callback when it's ready 
	loader.load( 'http://crossorigin.me/http://collabedit.com/download?id=7dmu4', addBananaInScene);

};

var addBananaInScene = function(object){
	banana = object;
	//Move the banana in the scene
	///banana.rotation.x = Math.PI;
	//banana.position.y = -0;
	//banana.position.z = 50;
  
	//Go through all children of the loaded object and search for a Mesh
	object.traverse( function ( child ) {
		//This allow us to check if the children is an instance of the Mesh constructor
		if(child instanceof THREE.Mesh){
			child.material.color = new THREE.Color(0X00FF00);
			//Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
			child.geometry.computeVertexNormals();
      
      //http://stackoverflow.com/questions/10889583/three-js-plane-visible-only-half-the-time
      child.material.side = THREE.DoubleSide;
  
		}
	});
  
	//Add the 3D object in the scene
	scene.add(banana);
	render();
};


var render = function () {
	requestAnimationFrame(render);

  var counter = (new Date()).getTime();
  counter /= 1000;
  var posX = Math.cos(counter) * 5;
  var posY = Math.sin(counter) * 5;
  //console.log(posY);
  
	//Turn the banana
	//banana.rotation.x += .02;
  //*
	camera.position.x = posX;
	camera.position.y = posY;
  ///*/
  camera.lookAt(banana.position);

	renderer.render(scene, camera);
};

init();
            
          
!
999px
Loading ..................