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,
        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

2 comments:

  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 three.org examples "video player" this technique is used.

    ReplyDelete
    Replies
    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!

      Delete