Three.js r76中MeshLambertMaterial的阴影形状异常?

问题描述

使用 r70，阴影按预期显示 -

很明显，阴影相机视锥正在剪裁阴影.

从three.js r.76 开始，自动设置阴影相机视锥体，使其更接近聚光灯视野.

如果你想覆盖它，你可以像这样指定一个自定义阴影视锥体:

//自定义阴影视锥light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 30, 1, 200, 700 ) );

更新小提琴:http://jsfiddle.net/ef4r5s76/5/

three.js r.76/r.77

Using r70, the shadow shows as expected - r70 example (Shadow it correct shape)

Using r76 however, the shadow is abnormally shaped - r76 example (Shadow is abnormally shaped)

You can see that the shadows on the MeshLambertMaterial on the ground plane are not as expected.

Why is the shadows becoming abnormally shaped?What needs to be changed to get it working in r76?

Here is the code I am using (same in both example):

var light;
light = new THREE.SpotLight(0xdfebff, 1);
light.position.set(300, 400, 50);
light.castShadow = true;
light.shadowCameraVisible = true;
scene.add(light);

var groundMaterial = new THREE.MeshLambertMaterial({
    color: 0xFF0000,
});
plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
plane.castShadow = false;
scene.add(plane);

var boxgeometry = new THREE.CubeGeometry(100, 100, 100);
var boxmaterial = new THREE.MeshLambertMaterial({
    color: 0x0aeedf
});
var cube = new THREE.Mesh(boxgeometry, boxmaterial);
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 100;
cube.position.z = 0;
scene.add(cube);

webglRenderer = new THREE.WebGLRenderer({ alpha: true });
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
webglRenderer.shadowMapSoft = true;

解决方案

The first thing to do is to add a shadow camera helper so you can see what is going on:

light.shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add( light.shadowCameraHelper );

It is clear that the shadow camera frustum is clipping the shadow.

Starting in three.js r.76, the shadow camera frustum is automatically set so it more closely matches the spotLight field-of-view.

If you would like to override that, you can specify a custom shadow frustum like so:

// custom shadow frustum
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 30, 1, 200, 700 ) );

updated fiddle: http://jsfiddle.net/ef4r5s76/5/

three.js r.76/r.77

这篇关于Three.js r76中MeshLambertMaterial的阴影形状异常?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！