Three.js 3.js没有阴影

我目前正在尝试学习THREE.js，显然我在学习教程和示例，但是 即使在所有这些之后，我似乎也无法让阴影发挥作用

shadowMap.enabled

设置为true，

castShadow

在灯光下的立方体上设置，而

receiveShadow

在地板上设置为true

我的尝试在网上可见

import*作为三个源”https://threejs.org/build/three.module.js";
从导入{OrbitControls}”https://threejs.org/examples/jsm/controls/OrbitControls.js";
函数main（）{
const canvas=document.querySelector（“#canvas”）；
const renderer=new THREE.WebGLRenderer（{canvas，'antialas'：true}）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.BasicShadowMap；
常数fov=75；
常量方面=1；
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=8*0.2；
摄像机位置y=2*0.2；
常量控件=新的轨道控件（摄影机、渲染器.doElement）；
控件更新（）；
常数sz=0.2；
const scene=new THREE.scene（）；
{
常量颜色=0xFFFFFF；
常数强度=2；
恒光=新的三点光（颜色、强度）；
光。位置。设置（0，2*sz，2*sz）；
light.castShadow=true；
light.shadow.mapSize.width=512；
light.shadow.mapSize.height=512；
var d=200；
light.shadow.cameraLeft=-d；
light.shadow.cameraRight=d；
light.shadow.cameraTop=d；
light.shadow.cameraBottom=-d；
light.shadow.camera.far=1000；
const helper=new THREE.CameraHelper（light.shadow.camera）；
场景.添加（助手）；
场景。添加（灯光）；
}
const material=新的3.MeshPhongMaterial（{color:“brown”}）；
const mat_green=新的三种网格材质（{color:“green”}）；
const mat_floor=新的三种网格材质（{颜色：“灰色”}）；
const group=new THREE.group（）；
var几何=新的三圆柱几何（sz/2，sz/1.5,3*sz，8,8）；
var cube=新的三个网格（几何体、材质）；
立方体位置集（0，sz，0）；
添加组（立方体）；
几何=新的三箱几何（sz、sz、sz）；
立方体=新的三个网格（几何体，材质为绿色）；
立方体位置集（0.0,3*sz,0）；
添加组（立方体）；
几何=新的三面体。二十面体几何（sz）；
立方体=新的三个网格（几何体，材质为绿色）；
立方体位置集（sz，3*sz，0）；
添加组（立方体）；
几何=新的三面体。二十面体几何（sz）；
立方体=新的三个网格（几何体，材质为绿色）；
立方体位置集（-sz，3*sz，0）；
添加组（立方体）；
几何=新的三面体。二十面体几何（sz）；
立方体=新的三个网格（几何体，材质为绿色）；
立方体位置集（0.0,3*sz，sz）；
添加组（立方体）；
几何=新的三面体。二十面体几何（sz）；
立方体=新的三个网格（几何体，材质为绿色）；
立方体位置集（0.0,3*sz，-sz）；
添加组（立方体）；
几何=新的三面体。二十面体几何（sz）；
立方体=新的三个网格（几何体，材质为绿色）；
立方体位置集（0.0,4*sz，0.0）；
添加组（立方体）；
const floor=new THREE.Group（）；
对于（var x=-4；x，出于好奇，我第一次尝试了ThreeJs来回答这个问题，所以解释起来可能不够好

结果


要修复立方体阴影，我更改了以下内容：

const light = new THREE.PointLight(color, intensity);
light.position.set(0, 2*sz, 2*sz);

为此：

const light = new THREE.PointLight(color, intensity);
light.position.set(0, 3 * sz, 3 * sz);

我猜这只是因为发光体在立方体内部的问题

圆柱体只是错过了投射阴影的属性。我建议将
cube
变量名更改为更有意义的名称

var geometry = new THREE.CylinderGeometry(sz / 2, sz / 1.5, 3 * sz, 8, 8);
var cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;

我已经从你的链接中加入了图片和代码，使问题能够自我包含。请让我知道一切是否都可以哇。非常感谢。是的，这是一个更好的问题。是的，我只是在移动立方体时玩了一下，注意到当它离开光源时会突然投射阴影。这就解释了为什么。它离光源太近了o光源。
var geometry = new THREE.CylinderGeometry(sz / 2, sz / 1.5, 3 * sz, 8, 8);
var cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;