Javascript 如何在三人模式中投射/接收阴影

我对threeJS很陌生，我想把圆环体的阴影投射到它后面的平面几何体上

我试图玩

.castShadow

&

.receiveShadow

，但没有结果

你能解释一下我做错了什么吗

const canvas=document.getElementById（“圆环”）；
//渲染器___
const renderer=new THREE.WebGLRenderer({
画布：画布，
反别名：是的，
阿尔法：是的
});
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
renderer.setSize（window.innerWidth、window.innerHeight）；
常量摄影机=新的三透视摄影机(
45,
window.innerWidth/window.innerHeight，
1.
500
);
摄像机位置设置（0,0,30）；
摄像机。注视（0，0，0）；
const textureLoader=新的三个.textureLoader（）；
常量normalTexture=textureLoader.load(
"https://thumbs.dreamstime.com/b/normal-map-old-rough-loose-concrete-surface-normal-map-old-rough-loose-concrete-surface-texture-use-d-programs-d-195202276.jpg"
);
const scene=new THREE.scene（）；
//环面____
常数几何=新的三个圆环几何（4,1,16,100）；
const material=新的三点网格标准材质({
金属度：0.7，
粗糙度：0.2，
颜色：新三种颜色（0xF1F1），
法线贴图：法线纹理
});
const torus=新的三个网格（几何体、材质）；
环面.castShadow=true//默认值为false
圆环体。接收阴影=假；
场景。添加（圆环体）；
//平面______
const planeGeometry=新的三个平面几何体（20,20,32）；
const planeMaterial=新的三网格基本材质({
颜色：0xF0，
侧面：三个。双面
});
const plane=新的三个网格（平面几何体、平面材质）；
平面位置z=-4；
plane.receiveShadow=true；
场景。添加（平面）；
//______轻的
常量点光源=新的三个点光源（0xffffff，1100）；
点光源位置设置（0,5,6）；
点光源强度=2；
pointLight.castShadow=true；
pointLight.shadow.mapSize.width=512；
pointLight.shadow.mapSize.height=512；
pointLight.shadow.camera.near=0.5；
pointLight.shadow.camera.far=500；
场景。添加（点光源）；
const pointLightHelper=新的三个.pointLightHelper（pointLight，1）；
添加（pointLightHelper）；
函数createGUI（）{
const lightColor={color:#ffffff}；
var gui=new dat.gui（）；
var gui=gui.addFolder（“PointLight 1”）；
添加（pointLight.position，“x”）.min（-10）.max（10）.step（0.01）；
添加（pointLight.position，“y”）.min（-10）.max（10）.step（0.01）；
添加（pointLight.position，“z”）.min（-10）.max（10）.step（0.01）；
添加（点光源，“强度”）.min（0.max（10.step）（0.01）；
gui.addColor（lightColor，“color”）.onChange（函数（）{
pointLight.color.set（lightColor.color）；
});
gui.open（）；
}
常量animate=函数（）{
请求动画帧（动画）；
环面旋转x+=0.01；
渲染器。渲染（场景、摄影机）；
};
renderer.setAnimationLoop（（）=>{
渲染器。渲染（场景、摄影机）；
});
addEventListener（“加载”，init，false）；
函数init（）{
createGUI（）；
制作动画（）；
}

---

您已经为平面网格使用了

MeshBasicMaterial

，它是一种未发光的材质。因此它不接收shadpws。使用照明材质（如

MeshStandardMaterial

）可以解决此问题

const canvas=document.getElementById（“圆环”）；
//渲染器___
const renderer=new THREE.WebGLRenderer({
画布：画布，
反别名：是的，
阿尔法：是的
});
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
renderer.setSize（window.innerWidth、window.innerHeight）；
常量摄影机=新的三透视摄影机(
45,
window.innerWidth/window.innerHeight，
1.
500
);
摄像机位置设置（0,0,30）；
摄像机。注视（0，0，0）；
const textureLoader=新的三个.textureLoader（）；
常量normalTexture=textureLoader.load(
"https://thumbs.dreamstime.com/b/normal-map-old-rough-loose-concrete-surface-normal-map-old-rough-loose-concrete-surface-texture-use-d-programs-d-195202276.jpg"
);
const scene=new THREE.scene（）；
//环面____
常数几何=新的三个圆环几何（4,1,16,100）；
const material=新的三点网格标准材质({
金属度：0.7，
粗糙度：0.2，
颜色：新三种颜色（0xF1F1），
法线贴图：法线纹理
});
const torus=新的三个网格（几何体、材质）；
环面.castShadow=true//默认值为false
场景。添加（圆环体）；
//平面______
const planeGeometry=新的三个平面几何体（20,20,32）；
const planeMaterial=新的三点网格标准材质({
颜色：0xF0，
侧面：三个。双面
});
const plane=新的三个网格（平面几何体、平面材质）；
平面位置z=-4；
plane.receiveShadow=true；
场景。添加（平面）；
//______轻的
常量点光源=新的三个点光源（0xffffff，1100）；
点光源位置设置（0,5,6）；
点光源强度=2；
pointLight.castShadow=true；
pointLight.shadow.mapSize.width=512；
pointLight.shadow.mapSize.height=512；
pointLight.shadow.camera.near=0.5；
pointLight.shadow.camera.far=500；
场景。添加（点光源）；
const pointLightHelper=新的三个.pointLightHelper（pointLight，1）；
添加（pointLightHelper）；
函数createGUI（）{
const lightColor={color:#ffffff}；
var gui=new dat.gui（）；
var gui=gui.addFolder（“PointLight 1”）；
添加（pointLight.position，“x”）.min（-10）.max（10）.step（0.01）；
添加（pointLight.position，“y”）.min（-10）.max（10）.step（0.01）；
添加（pointLight.position，“z”）.min（-10）.max（10）.step（0.01）；
添加（点光源，“强度”）.min（0.max（10.step）（0.01）；
gui.addColor（lightColor，“color”）.onChange（函数（）{
pointLight.color.set（lightColor.color）；
});
gui.open（）；
}
常量animate=函数（）{
请求动画帧（动画）；
环面旋转x+=0.01；
渲染器。渲染（场景、摄影机）；
};
renderer.setAnimationLoop（（）=>{
渲染器。渲染（场景、摄影机）；
});
addEventListener（“加载”，init，false）；
函数init（）{
createGUI（）；
制作动画（）；
}

---

太棒了！非常感谢。