CODEWITHSUNDEEP
javascriptthree.jslighting
Cezary Wojcik
Cezary Wojcik

Reputation: 21845

Ignoring a light source in Three.js

I'm trying to make a 3D hex grid and I want to implement a fog of war.

Here's a sample of what the grid looks like at the moment:

three.js hex grid

I have lighting set up as follows:

// hemisphere light
var hemisphereLight = new THREE.HemisphereLight(0xffffff, 0.3);
scene.add(hemisphereLight);

// point light
var pointLight = new THREE.PointLight(0xffffff, 0.7);
pointLight.position = camera.position;
pointLight.rotation.y = Math.PI/2;
scene.add(pointLight);

What I'm trying to do is to make tiles that are in the fog of war not respond to the pointLight, that way they only have the low intensity hemisphereLight. I can't seem to find a way to do this. I can't change the tiles to use MeshBasicMaterial, which doesn't respond to any lights, because I DO want the "fog of war" tiles to have the lighting from hemisphereLight.

I'm open to suggestions to implement fog of war differently as well.

UPDATE:

I was able to get it to work using a custom shader.

Finished fog of war

Upvotes: 3

Views: 2232

Answers (1)

WestLangley
WestLangley

Reputation: 104833

Nice concept, IMHO.

Really, your only choice is to create your own ShaderMaterial for the "fog of war" tiles. In your shader, you would ignore all lights that are not HemisphereLights.

Remember, if you are going to use ShaderMaterial, and you want to be able to access the scene lights, you need to set the material parameter lights: true. There are many three.js examples of this.

three.js r.58

Upvotes: 3

Related Questions