javascript - 阴影在 THREE.js r75 中是如何工作的？

Question

我正在编写 Three.js 的教程，在一个示例中，它介绍了可以通过以下方法使用的阴影概念:castShadow、receiveShadow 以及将 shadowMapenabled 设置为 true。

但是示例代码是针对 Three.js r69 的。截至此问题发布之日，Three.js 处于 r75 并且此用于转换阴影的代码不起作用。

此外，当前的 Three.js 文档没有关于 shadowMapenabled 或 shadowMap.enabled 或提到的其他方法的信息。

关于如何解决这个问题的建议？

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
//light.shadow.camera.left = 500    // Not sure about this one + 
                                    // right, top and bottom, Do they still do anything?
scene.add( light );

如果您在尝试使用当前文档中指定的属性时检查控制台，您会收到所有这些 API 更改的通知。

创建转换和接收阴影的对象与以前相同:

//Creating box
var boxGeometry = new THREE.BoxGeometry( 1, 1, 1 );
var boxMaterial = new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x999999, shininess: 15, shading: THREE.FlatShading } );
var box = new THREE.Mesh( boxGeometry, boxMaterial );
box.castShadow = true;
scene.add( box );

creating plane
var planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshPhongMaterial( { color: 0x00dddd, specular: 0x009900, shininess: 10, shading: THREE.FlatShading } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );

将飞机放在盒子下面，它会收到阴影。

这是一个有效的 codepen example

编辑在当前版本的 THREE.js 中，场景至少需要渲染两次才能显示阴影。

三个.js r75。