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,
        perPixel:true
      })
    );
    scene.add(cone);

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,
        transparent:true
      })
    );
    cone.position.y = 50;
    scene.add(cone);

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