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中，场景需要至少渲染两次才能显示阴影。

THREE.js r75。

Answer 2

以下是three.js中阴影的简单代码。还包括阴影摄像头助手 var light = new THREE.SpotLight( 0xFFAA55 ); light.castShadow = true; light.position.set( 1, 3, 5 ); light.shadowCameraNear = 0.5; scene.add( light ); helper = new THREE.CameraHelper( light.shadow.camera ); scene.add( helper );

code

阴影如何在THREE.js r75中起作用？

2 个答案: