Threejs中带有PointerLockControls的单向SpotLight答案

【问题标题】：One direction SpotLight with PointerLockControls in ThreejsThreejs中带有PointerLockControls的单向SpotLight
【发布时间】：2021-12-18 01:55:42
【问题描述】：

我正在尝试将定向手电筒连接到相机（控制对象），以便光束始终对准屏幕中心。这是我的代码：

controls = new PointerLockControls( camera, document.body );
var flashlight = new THREE.SpotLight(0xffffff, 7, 50, 0.8*Math.PI);
controls.getObject().add(flashlight);
controls.getObject().add(flashlight.target);

但结果是相机周围的光线，而不是直光束。（见下图）

那么我怎样才能获得定向光束？

//编辑，添加组。

controls = new PointerLockControls( camera, document.body );
var flashlight = new THREE.SpotLight(0xffffff, 7, 50, 0.8*Math.PI);
// camera.add(flashlight);
// camera.add(flashlight.target);
const group = new THREE.Group();
group.add(camera);
group.add(flashlight);  
scene.add(group);

【问题讨论】：

标签： javascript three.js lighting

【解决方案1】：

您可以使用THREE.Group to group objects together

const group = new THREE.Group();
group.add(camera);
group.add(flashlight);

// Finally, we add the group to our controls
controls = new PointerLockControls( group, document.body );

然后您可以将该组添加到您的场景中，并作为一个整体控制该组。相机和手电筒将一起旋转和平移。

【讨论】：

感谢您的回复。我按照你说的对它们进行了分组，但现在光线只停留在一个地方 - 看起来它不再连接到相机了。这是为什么呢？
您可以使用更新后的代码编辑您的问题，以便我看到您在做什么。
马上。我添加了分组代码。
啊，是的。您现在忘记了您已经创建了group，您必须将该组添加到您的控件中，而不仅仅是camera。如果您只添加相机，那么我们将回到第一方。我也用这一步更新了我的答案。
啊，太简单了！它确实解决了灯光不移动的问题，但我们又回到了起点，灯光不像聚光灯，出于某种原因，它更像是一个点光源。