Реалистичное освещение (солнечный свет) с помощью Three.js?

Я пытаюсь создать небольшую игру с 1-м человеком, используя Three.js, но у меня проблемы с освещением. В принципе, я хочу симулировать солнце и заставить его вращаться вокруг света. Я использую THREE.DirectionalLight в данный момент, и он только загорается в одном направлении, так что стороны кубов остаются черными/темными.

Должен ли я использовать несколько источников света, чтобы все было освещено? Или я мог каким-то образом отразить свет от земли/объектов?

Ответ 1

Да, вам нужно использовать несколько огней, чтобы достичь этого, подделав отраженный свет. Вычисление реального отраженного света не строится (и вычислительно очень сложно/дорого). У вас есть множество вариантов.

Второй направленный свет, который всегда может находиться в противоположном положении и направлении вашего солнца.

Свет полусферы, который остается постоянным. Освещение полусферы приобретает цвет неба и основной цвет и интенсивность и добавляет приятную дополнительную глубину вашему освещению.

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

здесь рабочий пример http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

вы можете использовать любую комбинацию различных огней, но будьте осторожны, чтобы сэкономить производительность.

Также стоит упомянуть полу-ламберт-затенение, которое включено, установив для свойства wrapAround значение true в вашем материале. Это дает более приятный спад черным, что приводит к менее резкому освещению. Более средние тона и менее черные.

Ответ 2

Я использовал комбинацию этих двух огней для создания этого видео: 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;