Three.js point light not working with large meshes

Question

I have the following problem. When I use Three.js point light like this:

 var color = 0xffffff;   
 var intensity = 0.5;
 var distance = 200;
 position_x = 0;
 position_y = 0;
 position_z = 0;

 light = new THREE.PointLight(color, intensity, distance); 
 light.position.set(position_x, position_y, position_z);
 scene.add(light);

It works as expected when there is a "small" object (mesh) positioned close to the light on the scene. However, when there is a large object (let us say a floor):

 var floorTexture = new THREE.ImageUtils.loadTexture( 'floor.jpg' );
 floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
 floorTexture.repeat.set( 1, 1);
 var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
 var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);

 var floor = new THREE.Mesh(floorGeometry, floorMaterial);
 floor.position.y = -0.5;
 floor.rotation.x = Math.PI / 2;
 scene.add(floor);

Then the light will not be shown on it. At first I thought it is due to the fact that the floor center is positioned further away from the point light so the point light cannot reach it with the distance set to 200 (even though part of the floor is closer than the mentioned distance). Therefore I have tryied to increase this distance - no luck.

There is a workaround to create a floor out of small parts. Then the point light again works as expected but there is a problem with this approach - namely it drastically decreases FPS due to the large number of "floor objects" to be rendered.

My guess is that I am missing something. I know that there are other types of light which cover the whole scene but I am trying to create a lamp, so I think I need to use a point light. But I might be wrong. Any help or hint how to make this work would be appreciated.

Sorry I had a problem with code formatting, now I have added the code. No I am using MeshBasicMaterial. — Matúš Dúbrava, Mar 05 '14 at 17:09
`MeshBasicMaterial` does non support lights. Try `MeshPhongMaterial`. — WestLangley, Mar 05 '14 at 17:10
I knew I was missing something. It works with MeshPhongMatherial. Thanks a lot. — Matúš Dúbrava, Mar 05 '14 at 17:18

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

MeshBasicMaterial does not support lights. Use MeshPhongMaterial.

MeshLambertMaterial also supports lights, but it is not advisable in your case for reasons explained here: Three.js: What Is The Exact Difference Between Lambert and Phong?.

three.js r.66

edited May 23 '17 at 10:26

Community

1
1

answered Mar 05 '14 at 17:24

WestLangley

102,557
10
276
276

Three.js point light not working with large meshes

1 Answers1