SpotLight doesn't seem to reflect off of my floor?

Questions
1

I finally got my SpotLight working. Works well and lights up objects in my world properly. However, for some strange reason, it doesn’t seem to light up the floor? Is there something I have to do when creating my floor materials to make things work as I expect them to?

Here is the code I use to create the floor:

    // FLOOR
    let floorTexture = new THREE.ImageUtils.loadTexture('/images/three-js-simple/checkerboard.jpg');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(15, 15);
    let floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side: THREE.DoubleSide});
    let floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    let floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.position.z = -350; // -450;
    floor.rotation.x = Math.PI / 2;
    g_ThreeJsScene.add(floor);

Here is the code I use to create the SpotLight:

        // Default color is RED.
        let color = typeof modelDeclJsonObj.color !== 'undefined' ? modelDeclJsonObj.color : 0xf41321; // 0xffffff;
        let intensity = typeof modelDeclJsonObj.intensity !== 'undefined' ? modelDeclJsonObj.intensity : 8.6; //  1.0;
        let distance = typeof modelDeclJsonObj.distance !== 'undefined' ? modelDeclJsonObj.distance : 0.0;
        let decay = typeof modelDeclJsonObj.decay !== 'undefined' ? modelDeclJsonObj.decay : 1.0;

            retLightObj = new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay);
2

because you are using a THREE.MeshBasicMaterial

or you have a typo in your fancy obfuscating variable naming scheme

g_ThreeJsScene.add(floor)

If I got it wrong, show a screen grab of your issue.

3

MeshBasicMaterial doesn’t reflect light? What should I use instead that still supports the loading of a texture from a file?

4

try meshPhongMaterial, meshLambertMaterial, meshStandardMaterial,meshPhysicalMaterial or meshToonMaterial

1 Like
5

Thanks. I’ve looked through the ThreeJS docs for a few of those material objects and I can’t seem to figure out how to translate the plane geometry and basic material objects I currently pass to the Mesh object to something I pass to those alternative material objects.

Is there an example that shows me how to pass a geometry and a material (or at least how to pass the desired texture) to the one of the alternative material objects you suggested?

I also tried MeshStandardMaterial and MeshLambertMaterial, they too use the parameters the other alternative material objects use, which are different than what the MeshBasicMaterial object accepts.

    let floorMaterial = new THREE.MeshBasicMaterial({map: floorTexture, side: THREE.DoubleSide});
    let floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
    // OLD: let floor = new THREE.Mesh(floorGeometry, floorMaterial);
    // NEW: This is wrong, MeshPhongMaterial(floorGeometry, does not accept these input parameters.
    let floor = new THREE.MeshPhongMaterial(floorGeometry, floorMaterial);
6

You’ve misunderstood. In your code sample, you are still using the MeshBasicMaterial

I am not even sure if you are asking the right question. You need to show a screen grab or a sample of what you are trying to achieve.

In the meantime, maybe this below is remotely similar to the answer you are trying to recieve, but I am still not convinced.

See the floor in this example. It is using a MeshPhongMaterial and not a MeshBasicMaterial
Spot Light Shadow - Three.js Tutorials (sbcode.net)
Use the Y slider.

image
image855×547 63.4 KB

1 Like
7

Ah, I think I see what you are saying now. I still need to use a Mesh object, but I need to replace MeshBasicMaterial with one of the alternate material object types you suggested. I thought I had to replace the Mesh object. Thanks.