title: Picking selected mesh from an OBJ file
body: <p>I'm using the OBJLoader to load a large 3D model (described in a .obj file) but it loads the whole file as a single Object3D object. Using scene.add(object) it adds the whole object to the scene.</p>
  
  <p>I need to pick the selected mesh and change some of its properties, but when I add mouse function and use Ray.intersectObjects try to get the selected mesh it never works. I can not find where I made mistakes. </p>
  
  <p>Would love some help with trying to get this working. Thanks!</p>
  
  <p>It confused me for couples of days. The following is all my code：</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;three.js webgl - loaders - OBJ loader&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
          &lt;style&gt;
              body {
                  font-family: Monospace;
                  background-color: #000;
                  color: #fff;
                  margin: 0px;
                  overflow: hidden;
              }
              #info {
                  color: #fff;
                  position: absolute;
                  top: 10px;
                  width: 100%;
                  text-align: center;
                  z-index: 100;
                  display:block;
              }
              #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="info"&gt;
          &lt;a href="http://github.com/mrdoob/three.js" target="_blank"&gt;three.js&lt;/a&gt; - OBJLoader test
          &lt;/div&gt;
  
          &lt;script src="../build/Three.js"&gt;&lt;/script&gt;
          &lt;script src="js/loaders/OBJLoader.js"&gt;&lt;/script&gt;
  
          &lt;script src="js/Detector.js"&gt;&lt;/script&gt;
          &lt;script src="js/Stats.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
  
              var container, stats;
  
              var camera, scene, renderer;
  
              var mouseX = 0, mouseY = 0;
  
              var windowHalfX = window.innerWidth / 2;
              var windowHalfY = window.innerHeight / 2;
  
              var _mouse = { x: 0, y: 0 },
                  objects = [],
                  _projector = new THREE.Projector();
  
  
              init();
              animate();
  
  
              function init() {
  
                  container = document.createElement( 'div' );
                  document.body.appendChild( container );
  
                  scene = new THREE.Scene();
  
                  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                  camera.position.z = 100;
                  scene.add( camera );
  
                  var ambient = new THREE.AmbientLight( 0x101030 );
                  scene.add( ambient );
  
                  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                  directionalLight.position.set( 0, 0, 1 ).normalize();
                  scene.add( directionalLight );
  
                  var texture = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
  
                  var loader = new THREE.OBJLoader();
                  loader.load( "obj/male02/male02.obj", function ( object ) {
  
                      for ( var i = 0, l = object.children.length; i &lt; l; i ++ ) {
  
                          object.children[ i ].material.map = texture;
  
                      }
  
                      object.position.y = - 80;
                      object.position.z = - 160;
                      scene.add( object );
                      objects.push( object );
  
                  } );
  
                  // RENDERER
  
                  renderer = new THREE.WebGLRenderer();
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  container.appendChild( renderer.domElement );
  
                  document.addEventListener( 'mousedown', onDocumentMouseDown, false );
  
              }
  
              function onDocumentMouseDown( event ) {
  
                  event.preventDefault();
  
                  // find intersections
                  _mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                  _mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  
                  var vector = new THREE.Vector3( _mouse.x, _mouse.y, 1 );
  
                  var ray = _projector.pickingRay( vector, camera );
  
                  var intersects = ray.intersectObjects( scene.children );
  
                  if ( intersects.length &gt; 0 ) {
                          alert("selected!");
                          _SELECTED_DOWN = true;
                  }   
              }
  
              function animate() {
  
                  requestAnimationFrame( animate );
                  render();
  
              }
  
              function render() {
  
                  renderer.render( scene, camera );
  
              }
  
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>