Javascript Three.js-为什么这些项目的阴影看起来像这样？

我正在学习three.js

我举了一个例子来练习，但项目的阴影看起来是错误的或陌生的

应该是这样的（此图像是一个旧教程）：

代码是这样的：

$（函数（）{
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
var color=新的三种颜色（“rgb（200250250）”；
renderer.setClearColor（新的THREE.Color（Color））；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；//默认值THREE.PCFShadowMap
var ejesAyuda=新的三个。AxesHelper（20）；//儿子是阿尤达·克鲁
场景。添加（ejesAyuda）；
var planeGeometry=新的三个平面几何体（60,20）；
var planeMaterial=新的3.0网格lambertMaterial({
颜色：0xCCCC
});
var plane=新的三个网格（平面几何体、平面材质）；
plane.receiveShadow=true；
平面旋转x=-0.5*Math.PI；/-90º
平面位置x=15；
平面位置y=0；
平面位置z=0；
场景。添加（平面）；
var立方计量法=新的三个立方计量法（4,4,4）；
var cubeMaterial=新的3.0网格LambertMaterial({
颜色：0xff0000
});
var cube=新的三网格（立方计量法、立方材料）；
cube.castShadow=true；//con esto le indicamos que queremos que emita sombra
cube.position.x=-4；
立方体位置y=3；
立方体位置z=0；
场景.添加（立方体）；
var比色法=新的三种比色法（4,20,20）；
var sphereMaterial=新的三点网格LambertMaterial({
颜色：0x7777ff
});
var sphere=新的三个网格（球面测量法、球面材料）；
sphere.castShadow=true；//con esto le indicamos que queremos que emita sombra
球体位置x=20；
球体位置y=4；
球体位置z=2；
场景。添加（球体）；
camera.position.x=-30；
摄像机位置y=40；
摄像机位置z=30；
摄像机。注视（场景。位置）；
var spotLight=新的三个聚光灯（0xffffff，0.8）；
聚光灯位置设置（-40,60，-10）；
spotLight.castShadow=true；
场景。添加（聚光灯）；
$（“#WebGL salida”）.append（renderer.domElement）；
渲染器。渲染（场景、摄影机）；
});

您可以通过增加阴影贴图的大小来提高阴影的质量（请参阅）：

通过限制光斑的光锥角，可以进一步提高质量：

spotLight.angle = Math.PI / 8.0;

注意，这会导致阴影贴图的分辨率增加，并且阴影贴图映射到的区域减少

请参阅代码片段：

var渲染器、摄影机、场景、控件；
var init=函数（）{
场景=新的三个。场景（）；
摄像头=新的三透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
renderer=new THREE.WebGLRenderer（）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
var color=新的三种颜色（“rgb（200250250）”；
renderer.setClearColor（新的THREE.Color（Color））；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；//默认值THREE.PCFShadowMap
var ejesAyuda=新的三个。AxesHelper（20）；//儿子是阿尤达·克鲁
场景。添加（ejesAyuda）；
var planeGeometry=新的三个平面几何体（60,20）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0xCCCC}）；
var plane=新的三个网格（平面几何体、平面材质）；
plane.receiveShadow=true；
平面旋转x=-0.5*Math.PI；/-90º
平面位置x=15；
平面位置y=0；
平面位置z=0；
场景。添加（平面）；
var立方计量法=新的三个立方计量法（4,4,4）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff0000}）；
var cube=新的三网格（立方计量法、立方材料）；
cube.castShadow=true；//con esto le indicamos que queremos que emita sombra
cube.position.x=-4；
立方体位置y=3；
立方体位置z=0；
场景.添加（立方体）；
var比色法=新三种比色法（4,20,20）；
var sphereMaterial=new THREE.MeshLambertMaterial（{color:0x7777ff}）；
var sphere=新的三个网格（球面测量法、球面材料）；
sphere.castShadow=true；//con esto le indicamos que queremos que emita sombra
球体位置x=20；
球体位置y=4；
球体位置z=2；
场景。添加（球体）；
camera.position.x=-30；
摄像机位置y=40；
摄像机位置z=30；
摄像机。注视（场景。位置）；
var spotLight=新的三个聚光灯（0xffffff，0.8）；
聚光灯位置设置（-40,60，-10）；
spotLight.castShadow=true；
spotLight.angle=Math.PI/8.0；
spotLight.shadow.mapSize.width=2048；
spotLight.shadow.mapSize.height=2048；
场景。添加（聚光灯）；
document.getElementById（“WebGL salida”）.append（renderer.doElement）；
调整大小（）；
window.onresize=调整大小；
};
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
函数resize（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
//controls.handleResize（）；
}
init（）；
制作动画（）
您还可以增加段数。现在你有

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

对于良好的渲染，这两个'20'稍低。我通常使用32，32是
spotLight.shadow.mapSize.width
访问
spotLight.shadowMapWidth
的首选方式吗？在这种情况下，你的答案更正确。那么你的答案肯定更正确。我用的是旧知识。我将删除我的答案。：）
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);