Question

以下灯光添加到我的场景中：

var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 1000, 1000, 1000 );
light.castShadow = true;

light.shadow = new THREE.DirectionalLightShadow( 
    new THREE.OrthographicCamera( 
        -100, 100, 
        100, -100, -500, 500 ) );
light.shadow.bias = - 0.00022;

light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;

飞机如下：

var planeGeometry = new THREE.PlaneGeometry( 200, 200 );
planeGeometry.rotateX( - Math.PI / 2 );
var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 1;

var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = 0;
plane.receiveShadow = true;
scene.add( plane );

方框是：

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

for ( var i = 0; i < 20; i ++ ) {

    var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

    object.scale.x = Math.random() * 5 + 1;
    object.scale.y = Math.random() * 5 + 1;
    object.scale.z = Math.random() * 5 + 1;

    object.position.x = Math.random() * 30;
    object.position.y = object.scale.y / 2.0;
    object.position.z = Math.random() * 60;

    object.castShadow = true;
    object.receiveShadow = true;

    scene.add( object );
}

框的方向光影不在平面网格上渲染。你能帮助我做错了什么吗？请参阅以下屏幕截图。

Answer 1

某些阴影贴图属性已在最近的版本中重命名。

设置阴影贴图的渲染器（并选择计算量更大的阴影贴图类型）：

var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

设置指示灯（注意它如何与THREE.PointLight一起使用）：

var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 12, 0 );
light.castShadow = true;            // default false
light.shadow.mapSize.width = 1024;  // default 512
light.shadow.mapSize.height = 1024; // default 512
light.shadow.camera.near = 2;       // default 0.5
light.shadow.camera.far = 100;      // default 500
scene.add( light );

Answer 2

对于飞机材料使用var planeMaterial = new THREE.MeshLambertMaterial(); （ShadowMaterial适用于r77 https://github.com/mrdoob/three.js/issues/1791）

var renderer = new THREE.WebGLRenderer( {antialias:true, alpha: true } ); 
    renderer.shadowMap.enabled = true;  // enable shadows rendering
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;  // to antialias the shadow
var light_target = new THREE.Object3D(); // believe me
    light_target.position.set(0,0,0); // not necessary, but to be clear

var light = new THREE.DirectionalLight( 0xffffff,1.5,1000) );  
    light.position.set(1000, 1000, 1000);      
    light.target = light_target;
    light.castShadow = true;
    light.shadowMapWidth = 2048*2; // px of the rendered shadow texture
    light.shadowMapHeight = 2048*2; // px of the rendered shadow texture
var d = 100; /// your plane is 200x200 and we targeted its center
var distance = light.position.distanceTo(light_target.position);
    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;                                                                              light.shadowCameraTop = d;                                                                      light.shadowCameraBottom = -d;                                                                  light.shadowCameraNear = distance-d;                                                                      light.shadowCameraFar = distance+d;                                                                      light.shadowBias = -0.001;
    light.shadowDarkness = 0.5;
scene.add( light ); // you missed this!

框的方向光影不在平面网格上渲染

2 个答案: