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

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

但是，示例代码是针对Three.js r69的。截至本问题提出之日，Three.js的版本为r75，该阴影投射代码不起作用

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

---

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

一些阴影贴图属性在最新版本中已重命名，但它们的工作原理基本相同

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

设置灯光（请注意它如何与THREE.PointLight一起工作）：

如果您在尝试使用当前文档中指定的属性时检查控制台，就会收到所有这些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 );

将平面放置在长方体下，它将接收阴影

这是一张工作票

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

---

THREE.js r75。

这里是THREE.js中阴影的简单代码。还包括阴影摄影机辅助程序

var-light=新的三点聚光灯（0xFFAA55）；
light.castShadow=true；
光。位置。设置（1，3，5）；
light.shadowCameraNear=0.5；
场景。添加（灯光）；
helper=新的三个.CameraHelper（light.shadow.camera）；
场景.添加（助手）

在这种情况下，获得基本阴影的最小值是多少？我必须添加shadowMap.type吗？在我的教程中，我收到的唯一控制台警告是使用“shadowMap.enabled”而不是“shadowMapEnabled”。这是我的代码-@rpeg啊，我想这是当前版本THREE.js中的一个bug。第一次渲染场景时，阴影贴图将不显示。您必须再次渲染它。只需执行：
renderer.render（场景、相机）至少两次。而且您不必设置
阴影贴图.type
，
阴影.camera.near/far
或
阴影.mapSize.height/width
。所有这些都有默认值。
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 );

//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 );