3

私は Three.js で都市のシーンに取り組んでおり、これまでのところ、1 つの建物だけで照明と影を試しています。建物は 3DS Max でモデル化され、OBJ にエクスポートされ、コマンド ラインから Python コンバーターで変換されました。

建物のモデルが 1 つのオブジェクトであり、セルフ シャドウイングを使用していることに気付くでしょう。ただし、キャスト シャドウ内にある建物の下部は、まだ黄白色のディレクショナル ライトで照らされています。これは、光源と光源の間にあるものを考慮せずに、光源にどれだけ面しているかによって単純に照度が計算されるためだと思います。

私はこれを「修正」してより現実的なものにする方法を探していました.メッシュが光が背後にあるものに当たるのをブロックします. シェーダーまたは法線マップに入る必要がありますか? それともまったく別のものですか？

また、この質問は重複している可能性がありますが、コードや例が提供されていないため、よくわかりません:光がメッシュを貫通しています。問題がある場合は事前に申し訳ありません。

JSFiddle はこちら: http://jsfiddle.net/mrfolkblues/u01jwg53/

コードの関連部分は次のとおりです。

var T = THREE,
    stats,
    container,
    camera = new T.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 200),
    scene = new T.Scene(),
    renderer = new T.WebGLRenderer({
        antialias: true
    }),
    radius = 35, theta = 0, thetaDelta = 0, camtarget,
    boundingbox, cube, plane, poly, polyMesh, sphere, line,
    clock = new T.Clock();

    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

// construct
(function(){

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    // set up renderer
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild(renderer.domElement);

    var light = new T.DirectionalLight( 0xfff3cb, 1.25 );
    light.position.set( 60, 25, 40 );

    var light2 = new T.DirectionalLight( 0x204fae, 1.25 );
    light2.position.set( -30, 40, 0 );

    light.castShadow = true;
    light.shadowDarkness = 0.33;
    light.shadowCameraTop = 20;
    light.shadowCameraRight = 20;
    light.shadowCameraBottom = -20;
    light.shadowCameraLeft = -20;
    light.shadowCameraNear = 0;
    light.shadowCameraFar = 200;
    light.shadowMapWidth = 2048;
    light.shadowMapHeight = 2048;
    light.shadowBias = 0.0002;

    scene.add( light );
    scene.add( light2 );

    var cube = createCube([0.5, 0.5, 0.5], [1.5, 10, 0]);

    // position camera
    camera.position.x = 0;
    camera.position.y = 20; // move camera position up
    camera.position.z = radius; // move camera out
    camtarget = cube.position;
    camera.lookAt( camtarget );

    createPlane();

    var loader = new T.JSONLoader();
    var parsed = loader.parse(window.buildingModel);

    var material = new T.MeshLambertMaterial( {
        color: 0xffffff
    } );

    var object = new THREE.Mesh( parsed.geometry, material );
    object.castShadow = true;
    object.receiveShadow = true;
    scene.add( object );

    object.position.x = 30;
    object.position.y = 0;
    object.position.z = 15;

    // add event listeners
    window.addEventListener( 'resize', onWindowResize, false );

    render();
    animate();
})();
4

2 に答える 2

0

three.js r.73 では、影は近似を使用して実装されます。影の領域は、設定した係数によって単に暗くなります。

light.shadowDarkness = 0.33;

したがって、shadowDarkness1 に設定すると、問題は解消されます。確かに、見栄えはよくありません。

更新されたフィドル: http://jsfiddle.net/u01jwg53/1/

three.js の将来のリリースでシャドウが改善されることを知っておくことをお勧めします。

three.js r.73

于 2015-11-16T00:58:43.990 に答える