Thursday, September 20, 2012

Visible Spotlight

‹prev | My Chain | next›

I would like to make the goal of my Three.js / Physijs game a bit more obvious. My first thought is to shine a spotlight on the center of the game board:
    var goalLight = new THREE.SpotLight( 0x0000ff , 20 );
    goalLight.castShadow = true;  
    goalLight.position.set( 0, 33, 0 );
    scene.add( goalLight );
The result is... less than satisfying:

I can see the spotlight, but it is not obvious. I try a red instead of the blue, but, if anything, it is harder to see:

If I cannot make the spotlight obvious, perhaps I can fake it with a transparent "light cone":
    cone = new THREE.Mesh(
      new THREE.CylinderGeometry(20, 100, 100),
      new THREE.MeshPhongMaterial({
        opacity: 0.1,
But the opacity setting seemingly has no effect, leaving me with a big, opaque cone in my game:

Ah, curse me for a fool. Three.js will ignore the opacity setting unless I enable the transparent setting. I do so and I change the "light cone" to be red:
    var cone = new THREE.Mesh(
      new THREE.CylinderGeometry(3, 25, 100),
      new THREE.MeshPhongMaterial({
        color: 0xff0000,
        ambient: 0xff0000,
        opacity: 0.33,
    cone.position.y = 50;
This results in:

I can live with that—at least for tonight. I am not 100% sold on this approach so I may revisit.

(the game so far)

Day #515


  1. To get the effect you want you would need a linear texture approach , giving the illusion of fading the cone opacity at one end nill, the other full... check out examples "video player" this technique is used.

    1. Thanks for the hint! I don't see that example on the site, but I think I understand what you mean. I'll give it a try. Thanks!