title: three.js can't select the objects with Raycaster
body: <p>I am having the following function to get the selected object, so my function is here</p>
  
  <pre><code>function onMouseDown(event) {
      console.log(event);
      event.preventDefault();
  
      mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
      // find intersections
  
      var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
      projector.unprojectVector( vector, camera );
  
  
      var pLocal = new THREE.Vector3(0, 0, -1);
      var pWorld = pLocal.applyMatrix4(camera.matrixWorld);
      var ray = new THREE.Raycaster(pWorld, vector.sub(pWorld).normalize());
  
  
  
  
      ray.set( camera.position, vector.sub( camera.position ).normalize() );
      var intersects = ray.intersectObjects( scene.children );
      //console.log(intersects);
      console.log(scene.children);
      if ( intersects.length &gt; 0 ) {
  
      var clickedObject = intersects[0].object;
  
      console.log('objects '+intersects[ 0 ].object);
      console.log('objects id'+intersects[ 0 ].object.id);
      console.log('objects name'+intersects[ 0 ].object.name);
  
      if ( INTERSECTED != intersects[ 0 ].object ) {
  
      if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  
      INTERSECTED = intersects[ 0 ].object;
      console.log('INTERSECTED '+INTERSECTED);
      INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
      INTERSECTED.material.emissive.setHex( 0xff0000 );
  
      }
  
      } else {
  
      if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  
      INTERSECTED = null;
  
      }
  }
  </code></pre>
  
  <p>but am getting empty array on <code>intersects</code> , i tried my level best but i can't find any solution here, if i console the <code>scene.children</code> i can see all the attached objects of the scene
  on before this am adding the object into scene as like here </p>
  
  <pre><code>var   loader = new THREE.JSONLoader();      
  loader.load("uploads/accessories/3d/code/3dfile_"+file+".js",
        function(geometry, object_material) 
        {
  
            var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(object_material));
            model = new THREE.Object3D();
            model.id="Myid"+file;
            model.name="Myname"+file;
            model.userData ={ URL: "http://myurl.com" };
            model.add(object);    
            model.position.set(x,y,z);        
            model.scale.set(obj_width,obj_height,obj_rotation);   
            model.opacity =2;
            model.rotation.y = 600; 
            model.duration = 12000;
            model.mirroredLoop = true;
            model.castShadow = true;
            model.receiveShadow = true;
  
            console.log(model);   
            var smodel=model;
            scene.add(smodel);                            
        }
    );
  </code></pre>
  
  <p>now i want to get the added model by <code>new THREE.Object3D();</code> in <code>onMouseDown</code> but i can't, any one have the same issue ?        </p>