3

我正在使用 Three.js 处理城市场景，到目前为止，我只在一个建筑物上尝试了光照和阴影。建筑物在 3DS Max 中建模，然后导出到 OBJ，然后从命令行使用 Python 转换器进行转换。

您会注意到建筑物的模型是单个对象，而我正在使用自阴影。然而，位于投射阴影内的建筑物的下部仍然被黄白色的定向光照亮。我猜这是因为它的照度只是根据它面对光源的程度来计算的，而不考虑它和光源之间可能存在的任何东西。

我一直在寻找一种方法来“纠正”这一点并使其更加逼真，在这种情况下，网格会阻挡光线照射到它后面的东西，甚至是在它自身内部。我需要进入着色器或法线贴图吗？还是完全不同的东西？

此外，这个问题可能是重复的，但没有给出代码或示例，所以我不确定：Light penetrating through meshes。如果有问题，请提前道歉。

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 或任何其他“类似”的基于 webgl 的库无法解决您想要做的事情。你想要的可以通过Global Illumination超出three.js范围的方法来解决。

于 2015-11-16T00:01:24.443 回答
0

在 three.js r.73 中，阴影是使用近似值实现的：阴影区域仅由您设置的因子变暗：

light.shadowDarkness = 0.33;

所以，如果你设置shadowDarkness为 1，你的问题就会消失。诚然，它看起来不太好。

更新小提琴：http: //jsfiddle.net/u01jwg53/1/

值得鼓励的是，阴影将在三个.js 的未来版本中得到改进。

三.js r.73

于 2015-11-16T00:58:43.990 回答