title: Raycaster with Three.js and whitestormJS
body: <p>I'm having an issue with Raycasting with Three.js and WhitestormJS.
  Maybe I didn't understood well some of the underlying principle of this particular element.</p>
  
  <p>What I'm trying to do is syncing the direction of the raycaster with my camera.
  So, once it intersect an element, this element will be added to the intersect array.</p>
  
  <p><strong>The problem is that my "intersect" array stay empty even if I move my camera in the direction of an element.</strong></p>
  
  <p>On codepen : <a href="https://codepen.io/paulbonneau/pen/zdVeJx?editors=1111" rel="nofollow noreferrer">https://codepen.io/paulbonneau/pen/zdVeJx?editors=1111</a></p>
  
  <p>My code :</p>
  
  <pre><code>const app = new WHS.App([
    new WHS.ElementModule({
      container: document.getElementById('app')
    }),
    new WHS.SceneModule(),
    new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
      position: new THREE.Vector3(0, 6, 18),
      far: 10000
    })),
    new WHS.CameraModule({
      position: {
        y: 2,
        z: 2,
        x: 1,
      },
  
    }),
    new WHS.RenderingModule({
      bgColor: 0x162129,
  
      renderer: {
        antialias: true,
        shadowmap: {
          type: THREE.PCFSoftShadowMap
        }
      }
    }, {shadow: true}),
    new WHS.OrbitControlsModule(
  
  
      ),
    new WHS.ResizeModule()
  ]);
  
  app.modules[5].controls.enableZoom = false
  var camera = app.get('camera');
  crosshair = new THREE.Vector2(0,0);
  // Rendu de la skybox càd l'environnement dans lequel se déroule le jeu
  var path = "img/skybox/";
  var format = '.jpg';
  var urls = [
  
      './skybox/EH_0.front.jpg',
      './skybox/EH_0.back.jpg' ,
      './skybox/EH_0.top.jpg',
      './skybox/EH_0.bottom.jpg',
      './skybox/EH_0.left.jpg',   
      './skybox/EH_0.right.jpg',
  ];
  var reflectionCube = THREE.ImageUtils.loadTextureCube(urls, null);
  reflectionCube.format = THREE.RGBFormat;
  var shader = THREE.ShaderLib[ "cube" ];
  shader.uniforms[ "tCube" ].value = reflectionCube;
  var material = new THREE.ShaderMaterial( {
      fragmentShader: shader.fragmentShader,
      vertexShader: shader.vertexShader,
      uniforms: shader.uniforms,
      depthWrite: false,
      side: THREE.BackSide
  });
  //End test
  
  const world = new WHS.Box({ // Create box to contain the 3D space where the game happen
    geometry: {
       width: 100,
       height: 100,
       depth: 100
     },
    material: material
  });
  
  
  world.addTo(app);
  
  
  var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: reflectionCube } );
  
  var points = [];
  for ( var deg = 0; deg &lt;= 180; deg += 6 ) {
  
      var rad = Math.PI * deg / 180;
      var point = new THREE.Vector2( ( 0.72 + .08 * Math.cos( rad ) ) * Math.sin( rad ), - Math.cos( rad ) ); // the "egg equation"
      //console.log( point ); // x-coord should be greater than zero to avoid degenerate triangles; it is not in this formula.
      points.push( point );
  
  }
  const sphere = new WHS.Sphere({
      geometry: {
        radius: 100
      },
  
      material: new THREE.MeshBasicMaterial({
        color: 0xffffff
      }),
  
      position: {
        y: 1,
        x: 1,
        z: 0
  
      }
  });
  
  
  
  
  for (var i = 0; i &lt; 20; i++) {
  
      egg_size = Math.random() * 10-2;
      egg = new WHS.Lathe({
                  geometry: {
                      points: points 
                  },
                  material: material,
                  position: {
                      y:  Math.random() * 100 - 50,
                      x: Math.random() * 100 - 50 ,
                      z:  Math.random() * 100 - 50
                  },
                  rotation: {
                      x: Math.random() * Math.PI/2,
                      y: Math.random() * Math.PI/2,
                      z: Math.random() * Math.PI/2
                  },
                  scale:{
                      x :  egg_size,
                      z :  egg_size,
                      y :  egg_size
                  }
                });
      egg.addTo(sphere);
  }
  
  sphere.addTo(world);
  
  raycaster = new THREE.Raycaster(camera, camera.position);
  var intersects = raycaster.intersectObjects( app.children );
  
  
  new WHS.Loop(() =&gt; {
      raycaster.setFromCamera( camera.position , camera );
  
      sphere.rotation.x += 0.01;
      sphere.rotation.y += 0.01;
      for (var i = 0; i &lt; sphere.children.length-1; i++) {
          sphere.children[i].rotation.x += 0.05;
          sphere.children[i].rotation.y += 0.05;
          sphere.children[i].rotation.z += 0.05;
      }
  }).start(app);
  
  
  // Start the app
  app.start();
  </code></pre>