Raycaster with Three.js and whitestormJS

Question

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.

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.

The problem is that my "intersect" array stay empty even if I move my camera in the direction of an element.

On codepen : https://codepen.io/paulbonneau/pen/zdVeJx?editors=1111

My 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 <= 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 < 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(() => {
    raycaster.setFromCamera( camera.position , camera );

    sphere.rotation.x += 0.01;
    sphere.rotation.y += 0.01;
    for (var i = 0; i < 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();

Juan Ferrer Juan Ferrer · Accepted Answer · 2017-09-08T14:13:35

You're constructing the raycaster in the wrong way (as of r87).

raycaster = new THREE.Raycaster(camera, camera.position);

As shown in the documentation, the raycaster is constructed like so:

var raycaster = new THREE.Raycaster();

The rest of the code looks correct, so I assume that is the problem.

Here's a working example

Raycaster with Three.js and whitestormJS

1 Answers