23

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

すべてが点灯するように複数のライトを使用する必要がありますか？または、どういうわけか地面/オブジェクトから光を反射できますか？

4

3 に答える 3

21

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

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

一定のままの半球ライト。半球照明は、空の色と地色と強度を取得し、照明に深みを加えます。

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

これが実際の例ですhttps://threejs.org/examples/#webgl_lights_hemisphere

さまざまなライトを任意に組み合わせて使用​​できますが、パフォーマンスのトレードオフに注意してください。

マテリアルでwrapAroundプロパティをtrueに設定することで有効になる、ハーフランバートシェーディングについても言及する価値があります。これにより、黒へのフォールオフが改善され、照明の過酷さが軽減されます。より多くのミッドトーンとより少ない黒。

于 2013-03-18T15:00:13.400 に答える
21

このビデオを作成するために、これら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;
于 2013-03-20T17:45:35.523 に答える
0

この仕事をするためにscene.environmentを使うことができます、ここにすでに良い例があります：

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

ここでgltf-viewerのコードを確認してください。これは日光の下で素晴らしい仕事をしました。

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

デフォルトの背景としてvenice_sunset_1k.hdrを使用するvairable環境に注意してください。

より詳細には、環境として背景を使用しますが、「表示」されませんでした。以下のコードを使用できます。

    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();

    });

ここで、hdrファイルはhttps://polyhaven.com/a/venice_sunsetにあります。

于 2022-02-11T17:18:53.883 に答える