Un éclairage réaliste (lumière du soleil) avec Three.js?

Je suis d'essayer de créer un petit 1er jeu à l'aide de Three.js mais j'ai du mal avec l'éclairage. Fondamentalement, je veux simuler le soleil et l'avoir tourner autour de la coulée de lumière sur tout. Je suis en utilisant THREE.DirectionalLight à l'instant et il ne s'allume qu'en un sens donc, les côtés des cubes restent black/dark.

Dois-je utiliser plusieurs lumières, donc tout est illuminé? Ou pourrais-je en quelque sorte réfléchir la lumière sur le sol ou des objets?

source d'informationauteur Joey Morani | 2013-03-18

  1. 15

    Oui, vous allez avoir à utiliser plusieurs lumières pour y parvenir, simuler la lumière réfléchie. Le calcul réel de la lumière réfléchie n'est pas intégré dans (et de calcul très complexes ou coûteuses). Vous avez une variété d'options.

    Une deuxième lumière directionnelle qui pourrait toujours être à l'opposé de la position et de l'orientation de votre soleil.

    Un hémisphère de la lumière qui reste constant. Hémisphère éclairage obtient une couleur de ciel et un sol de couleur et d'intensité et ajoute une belle un peu plus de profondeur à votre éclairage.

    //                                   sky color ground color intensity 
hemiLight = new THREE.HemisphereLight( 0x0000ff, 0x00ff00, 0.6 );

    voici un exemple de travail http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

    vous pouvez utiliser n'importe quelle combinaison de lumières différentes, mais être prudent, il y a une performance hors commerce.

    Il est également intéressant de mentionner demi-lambert ombrage qui est activée par le réglage de la enveloppant true à la propriété sur votre contenu. Cela donne une meilleure atténuation de noir que les résultats en moins de puissants projecteurs. Plus les médiums et les moins noirs.

  2. 19

    J'ai utilisé une combinaison de ces deux lumières pour créer cette vidéo: 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;