Three.js中spotLight无法正确绑定到相机的问题求助

• 错误覆盖了聚光灯target：先将spotlight.target添加为相机子级后，又执行spotlight.target = camera直接覆盖了原target对象，聚光灯指向逻辑完全混乱。
• 父级绑定后重复设置位置：用camera.add(spotlight)将聚光灯设为相机子元素后，聚光灯的坐标是相对相机的局部坐标，不需要执行spotlight.position.copy(camera.position)，该操作会把聚光灯的相对位置设为相机的全局坐标，导致完全错位。
• 测试物体材质不受光照影响：场景里的测试立方体使用了MeshBasicMaterial，该材质不会响应任何光照，即使光照移动也看不出效果。
• PointerLockControls用法错误：将物体绑定为相机子级后，不需要额外把controls绑定到group，PointerLockControls本身操作的就是传入的相机对象，直接传入相机即可。

核心逻辑：聚光灯和它的target都绑定为相机子元素，通过局部坐标控制聚光灯位置和照射方向，去掉多余的赋值操作，测试物体替换为支持光照的材质。

// 相机初始化
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 1, 0 );
scene.add(camera); // 必须把相机加入场景，子级元素才会被渲染

// 聚光灯初始化
spotlight = new THREE.SpotLight( 0xffffff, 55 );
spotlight.angle = 0.20*(Math.PI / 3);
spotlight.penumbra = 0.1;
spotlight.decay = 2;
spotlight.distance = 200;

// 绑定为相机子元素，默认局部坐标原点就是相机位置，可按需调整偏移量
camera.add(spotlight);
spotlight.position.set(0,0,0);

// 绑定target为相机子元素，不要把target赋值为camera
camera.add(spotlight.target);
spotlight.target.position.set(0,0,-1); // Three.js相机默认朝向-z轴，该配置让聚光灯朝相机正前方照射

// 控制器直接绑定相机即可
controls = new PointerLockControls( camera, document.body );
scene.add( controls.getObject() );

// 测试物体替换为支持光照的材质
const boxmaterial = new THREE.MeshPhongMaterial( {color: 0x00ff00} );

如果需要开启阴影效果，额外添加以下配置即可：

spotlight.castShadow = true;
cube.castShadow = true;
floor.receiveShadow = true;
renderer.shadowMap.enabled = true;

内容的提问来源于stack exchange，提问作者RektLeft