相机移动时更改 Three.js Orbit Controls 目标，效果不佳

Question

我正在制作一个““第一人称控制器”“”演示，其中基本上相机在按下 TOUCH 事件时在场景中向前移动，我使用 setInterval 和 addScaledVector 来移动相机。

我决定添加 Orbit Controls 只是为了旋转相机环顾四周，没有缩放。一切都很好，但是轨道控制对目标进行了奇怪的旋转，在目标中我使用了 camera.position.x + 1，因为如果我只是把没有值的 camera.position.x 放上去根本不起作用，也我申请了相机四元数。

var vector = new THREE.Vector3();
var speed = 8;
var timer;
var iterations = 0;

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 1.0;
controls.panSpeed = 0.8;
controls.target.set(camera.position.x + 1, camera.position.y, 
                   camera.position.z);

function process_touchstart(evt) {
   evt.preventDefault();
   evt.stopImmediatePropagation();
   iterations = 0;        

        timer=setInterval(function(){
            iterations++;
            vector.applyQuaternion( camera.quaternion );
            camera.getWorldDirection( vector );
            camera.position.addScaledVector( vector, speed );
            
            controls.target.set(camera.position.x + 1,
            camera.position.y,
            camera.position.z);

        }, 70); 
 }

感谢您提供任何信息，我是 three.js 的新手，所以任何细节都很酷 谢谢！

Answer 1

您是否考虑过改用PointerLockControls？它与OrbitControls 相同，但特别适合您想要的。来自the docs：这个类的实现是基于Pointer Lock API。 PointerLockControls 是第一人称 3D 游戏的完美选择。

这里是一个示例 Codepen，可以满足您的需求：https://codepen.io/adelriosantiago/pen/OJbWBep?editors=1010