I've made a sphere and now I'm adding lighting to it. Directional lighting works fine, but point and spot lighting don't show up. Anyone know why only some lights work?
let renderer = new WebGLRenderer();
renderer.setSize( container.clientWidth, container.clientHeight );
renderer.setPixelRatio( window.devicePixelRatio );
container.append( renderer.domElement );
const scene = new Scene();
scene.background = new Color( 'black' );
const aspect = container.clientWidth / container.clientHeight;
let camera = new PerspectiveCamera( 35, aspect, 0.1, 100 );
camera.position.set( 0, 0, 100 );
camera.updateProjectionMatrix();
var drLight = new DirectionalLight( 0xffffff, 0.8 );
drLight.position.set( 3, 2000, 2000 );
camera.add( drLight );
var pLight = new PointLight( 0x8564cc, 0.5 );
pLight.position.set( 200, 500, 200 );
camera.add( pLight );
var sLight = new SpotLight( 0xff0000 );
sLight.position.set( 0, 0, 50 );
camera.add( sLight );
scene.add( camera );
// Create sphere
const geometry = new SphereGeometry( 15, 32, 16 );
const material = new MeshPhongMaterial( {
color: new Color( 0x3a228a ),
shininess: 0.7
} );
const sphere = new Mesh( geometry, material );
scene.add( sphere );
renderer.render( scene, camera );
The lighting has changed in r155. The details of this change are explained in this guide: Updates to lighting in three.js r155
In short, point lights behave physically correct now and use candela as a unit. That requires a real-world scale for your scene meaning 1 world unit should be considered as 1 meter.
When migrating existing applications, the new lighting usually means you have to apply much higher intensity values to point lights especially if your scene has a large scale or when point lights are positioned far away from objects.
You can also set the decay property of your point light to 0 although it means it won't behave physically correct then.