Three.js：如何在运行时添加和删除灯光？

我努力了几天，我的代码出了什么问题？Three.js不会更新灯光。我将得到帮助，这可能会解决我的问题

我尝试了以下代码的许多组合，但没有获得任何成功

函数LightFunc（灯光）{
场景。移除（聚光灯1）；
场景。移除（聚光灯2）；
cubeMaterial.needsUpdate=true；
PlaneMeterial.needsUpdate=true；
if（document.getElementById（'Light1'）。选中）{
聚光灯1=新的三个聚光灯（0xffffff）；
聚光灯1.位置设置（15,30,50）；
spotLight1.castShadow=true；
场景。添加（聚光灯1）；
}
if（document.getElementById（'Light2'）。选中）{
聚光灯2=新的三个聚光灯（0xffffff）；
聚光灯2.位置设置（15,30，-50）；
spotLight2.castShadow=true；
场景。添加（聚光灯2）；
}
}
//步骤1：如何创建场景
var scene=new THREE.scene（）；
//步骤2：如何创建摄影机
var摄像机=新的三视角摄像机（45,4/3,1500）
摄像机位置设置（40,40,40）；
摄像机。注视（场景。位置）；
//步骤3：如何创建渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（0xDDDD）；
设置大小（800600）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
//步骤4：如何创建轴
var轴=新的三轴辅助（10）；
场景。添加（轴）；
//第五步：如何创建颜色
var color=新的三种颜色（“rgb（255,0,0）”；
//步骤6：如何创建网格
var grid=new THREE.GridHelper（50,5，颜色，0x000000）；
场景.添加（网格）；
//步骤7：如何创建多维数据集
var cubeGeo=新的三箱几何结构（5,5,5）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff3300}）；
var cube=新的三网格（立方体、立方材质）；
立方体位置集（2.5,2.5,2.5）；
cube.castShadow=true；
cube.receiveShadow=false；
场景.添加（立方体）；
//步骤8：如何创建平面
var planeGeo=新的三个平面几何体（30,30,30）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0x00ff00}）；
var plane=新的三个网格（planeGeo、PlaneMeterial）；
平面旋转x=-.5*Math.PI；
plane.receiveShadow=true；
场景。添加（平面）；
//步骤9：如何创建聚光灯
var spotLight1=新的三个聚光灯（0xffffff）；
聚光灯1.位置设置（15,30,50）；
spotLight1.castShadow=true；
场景。添加（聚光灯1）；
var spotLight2=新的三个聚光灯（0xffffff）；
聚光灯2.位置设置（15,30，-50）；
spotLight2.castShadow=true；
场景。添加（聚光灯2）；
var canvas=document.getElementById（“canvas”）；
canvas.appendChild（renderer.domeElement）；
渲染器。渲染（场景、摄影机）

Light1

Light2

由于场景中没有动画循环，因此在更改灯光设置时必须再次渲染


函数LightFunc（灯光）{
场景。移除（聚光灯1）；
场景。移除（聚光灯2）；
cubeMaterial.needsUpdate=true；
PlaneMeterial.needsUpdate=true；
if（document.getElementById（'Light1'）。选中）{
聚光灯1=新的三个聚光灯（0xffffff）；
聚光灯1.位置设置（15,30,50）；
spotLight1.castShadow=true；
场景。添加（聚光灯1）；
}
if（document.getElementById（'Light2'）。选中）{
聚光灯2=新的三个聚光灯（0xffffff）；
聚光灯2.位置设置（15,30，-50）；
spotLight2.castShadow=true；
场景。添加（聚光灯2）；
}
renderer.render（场景、摄影机）；//修复
}
//步骤1：如何创建场景
var scene=new THREE.scene（）；
//步骤2：如何创建摄影机
var摄像机=新的三视角摄像机（45,4/3,1500）
摄像机位置设置（40,40,40）；
摄像机。注视（场景。位置）；
//步骤3：如何创建渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（0xDDDD）；
设置大小（800600）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
//步骤4：如何创建轴
var轴=新的三轴辅助（10）；
场景。添加（轴）；
//第五步：如何创建颜色
var color=新的三种颜色（“rgb（255,0,0）”；
//步骤6：如何创建网格
var grid=new THREE.GridHelper（50,5，颜色，0x000000）；
场景.添加（网格）；
//步骤7：如何创建多维数据集
var cubeGeo=新的三箱几何结构（5,5,5）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xff3300}）；
var cube=新的三网格（立方体、立方材质）；
立方体位置集（2.5,2.5,2.5）；
cube.castShadow=true；
cube.receiveShadow=false；
场景.添加（立方体）；
//步骤8：如何创建平面
var planeGeo=新的三个平面几何体（30,30,30）；
var planeMaterial=new THREE.MeshLambertMaterial（{color:0x00ff00}）；
var plane=新的三个网格（planeGeo、PlaneMeterial）；
平面旋转x=-.5*Math.PI；
plane.receiveShadow=true；
场景。添加（平面）；
//步骤9：如何创建聚光灯
var spotLight1=新的三个聚光灯（0xffffff）；
聚光灯1.位置设置（15,30,50）；
spotLight1.castShadow=true；
场景。添加（聚光灯1）；
var spotLight2=新的三个聚光灯（0xffffff）；
聚光灯2.位置设置（15,30，-50）；
spotLight2.castShadow=true；
场景。添加（聚光灯2）；
var canvas=document.getElementById（“canvas”）；
canvas.appendChild（renderer.domeElement）；
渲染器。渲染（场景、摄影机）

Light1

Light2