1

So this abandoned? feature of three.js seems to have become somewhat of a holy grail; I've tried to implement it a couple of times unsuccessfully.

The example working on an old release is here: https://threejs.org/examples/#webgl_lights_rectarealight

My minimal broken example is here: https://jsfiddle.net/bitsofcoad/1k3arL33/

var width = 20;
var height = 20;
var rectLight = new THREE.RectAreaLight( 0xffffff, 500,  width, height );
rectLight.intensity = 500.0;
rectLight.position.set( 0, 30, 0 );
rectLight.lookAt( mesh2.position );
scene.add( rectLight )

var rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );

I have made sure to include the proper rectarealight library in the jsfiddle.

This thread was particularly enlightening on the topic of why this PR had some difficulties: https://github.com/mrdoob/three.js/pull/9234

And this thread was interesting to see how far other people had gotten in developing a similar type of light for three.js:

Improved Area Lighting in WebGL & ThreeJS

I don't really know what happened to break abelnation's example, or even if it is completely broken ( I may have screwed up my jsfiddle... ), but I think there is still considerable interest in this feature.

The soft edges look so nice, I'm tempted to cannibalize WestLangley's custom shader (http://jsfiddle.net/hh74z2ft/89/), which has pretty much all the functionality I need.

Anybody else able to get the basic functions working? Thanks!

Gavin
  • 27
  • 7
  • [current dev branch example](https://rawgit.com/mrdoob/three.js/dev/examples/webgl_lights_rectarealight.html) – WestLangley Jan 05 '18 at 01:52
  • Working (for me) for standard material, no longer works for phong ( or maybe it never did? ). I don't have the fps in my engine to handle standard materials, but thanks anyways for pointing me in the right direction! – Gavin Jan 05 '18 at 02:00
  • Your ``RectAreaLight` include file was from a different three.js revision. https://jsfiddle.net/1k3arL33/1/ – WestLangley Jan 05 '18 at 02:08

1 Answers1

2

Both MeshStandardMaterial and MeshPhysicalMaterial support area lights. The other materials do not.

three.js r.89

WestLangley
  • 92,014
  • 9
  • 230
  • 236