web-dev-qa-db-fra.com

Éclairage réaliste (lumière du soleil) avec trois.js?

J'essaie de créer un petit jeu de 1ère personne en utilisant trois.js, mais j'ai des problèmes avec l'éclairage. Fondamentalement, je veux simuler le soleil et faire pivoter autour de la lumière de coulée sur tout. J'utilise THREE.DirectionalLight Pour le moment et il n'allume que la direction d'une direction des cubes restent noirs/sombres.

Dois-je utiliser plusieurs lumières pour que tout soit éclairé? Ou pourrais-je en quelque sorte refléter la lumière du sol/des objets?

three.jslighting
20
Joey Morani

Oui, vous devrez utiliser plusieurs lumières pour y parvenir, faisant semblant de la lumière réfléchie. Calcul de la lumière réelle réfléchie n'est pas construit (et calculé très complexe/coûteux). Vous avez une variété d'options.

Une deuxième lumière directionnelle qui pourrait toujours être dans la position opposée et la direction de votre soleil.

Une lumière hémisphère qui reste constante. L'éclairage de l'hémisphère obtient une couleur de ciel et une couleur et une intensité au sol et ajoute une belle profondeur 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 faites attention à un compromis de performance.

Il convient également de mentionner une ombrage de demi-Lambert qui est activé en définissant la propriété enveloppante en vrais dans votre matière. Cela donne une plus belle incendie au noir qui entraîne une éclairage moins dur. Plus de tons moyen et moins de Noirs.

17
Andrew Berg

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;
19
dirkk0