'Realistic lighting (sunlight) with Three.js?

I'm attempting to create a small 1st-person game using Three.js, but I'm having trouble with the lighting. Basically I want to simulate the sun and have it rotate around casting light on everything. I'm using THREE.DirectionalLight at the moment and it only lights up the one direction so sides of cubes remain black/dark.

Do I have to use multiple lights so everything is lit up? Or could I somehow reflect light off the ground/objects?

three.jslighting


Solution 1:[1]

I used a combination of these two lights to create this video: http://www.youtube.com/watch?v=m68FDmU0wGw

            var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
            hemiLight.color.setHSV( 0.6, 0.75, 0.5 );
            hemiLight.groundColor.setHSV( 0.095, 0.5, 0.5 );
            hemiLight.position.set( 0, 500, 0 );
            scene.add( hemiLight );

            var dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
            dirLight.position.set( -1, 0.75, 1 );
            dirLight.position.multiplyScalar( 50);
            dirLight.name = "dirlight";
            // dirLight.shadowCameraVisible = true;

            scene.add( dirLight );

            dirLight.castShadow = true;
            dirLight.shadowMapWidth = dirLight.shadowMapHeight = 1024*2;

            var d = 300;

            dirLight.shadowCameraLeft = -d;
            dirLight.shadowCameraRight = d;
            dirLight.shadowCameraTop = d;
            dirLight.shadowCameraBottom = -d;

            dirLight.shadowCameraFar = 3500;
            dirLight.shadowBias = -0.0001;
            dirLight.shadowDarkness = 0.35;

Solution 2:[2]

You can use scene.environment to do this job, there is already a good example here:

https://gltf-viewer.donmccurdy.com/

check gltf-viewer's code here, which did a great job in sunlight.

https://github.com/donmccurdy/three-gltf-viewer/blob/main/src/viewer.js

notice the environments vairable, which use venice_sunset_1k.hdr as their default background.

To be more detailed, they use a background as their environment, but they didn't 'show' them, you can use the code below

    this.pmremGenerator = new PMREMGenerator( this.renderer );
    this.pmremGenerator.compileEquirectangularShader();
    var rgbe_loader = new RGBELoader();
    var that = this;
    rgbe_loader.setDataType(UnsignedByteType).load("/environment/venice_sunset_2k.hdr", function(texture) {

        var envMap = that.pmremGenerator.fromEquirectangular(texture).texture;

        that.scene.environment = envMap;

        texture.dispose();
        that.pmremGenerator.dispose();

    });

where the hdr file can be found in https://polyhaven.com/a/venice_sunset

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dirkk0
Solution 2

Related Questions