web-dev-qa-db-ja.com

Three.jsによる現実的な照明（太陽光）？

Three.jsを使用して小さな1人称ゲームを作成しようとしていますが、照明に問題があります。基本的に私は太陽をシミュレートし、すべてに光を当てて周りを回転させたいと思います。現時点ではTHREE.DirectionalLightを使用していますが、一方向のみが光るので、立方体の側面は黒または暗いままです。

すべてがライトアップされるように複数のライトを使用する必要がありますか？それとも、どういうわけか、地面/オブジェクトから光を反射できますか？

three.jslighting
20
Joey Morani

はい、これを実現するには複数のライトを使用する必要があり、反射したライトを偽造します。実際の反射光の計算は組み込まれていません（計算的に非常に複雑/高価です）。さまざまなオプションがあります。

常にあなたの太陽の反対の位置と方向にある可能性のある2番目の指向性ライト。

一定のままである半球のライト。半球のライティングは、空の色と地面の色と強度を取得し、ライティングに深みを少し追加します。

//                                    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に設定することで有効になるハーフランバートシェーディングについても言及する価値があります。これにより、黒のフォールオフが改善され、ライティングがより厳しくなくなります。より多くのミッドトーンとより少ないブラック。

17
Andrew Berg

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