相机移动时更改 Three.js 轨道控制目标，效果不佳

问题描述

我正在制作一个 """First Person Controller""" 演示，当 TOUCH 事件保持按下状态时，基本上相机在场景中向前移动，我使用 setInterval 和 addScaledVector 来移动相机。

我决定添加轨道控制只是为了旋转相机环顾四周，没有变焦。一切都很好，但是轨道控制对目标进行了奇怪的旋转，在目标中我使用了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.z);

        },70); 
 }

感谢任何信息，我对three.js有点新，所以任何细节都很酷 谢谢！

解决方法

您是否考虑过改用 PointerLockControls？它与 OrbitControls 相同，但特别适合您的需求。来自the docs：该类的实现基于指针锁 API。 PointerLockControls 是第一人称 3D 游戏的完美选择。

这是一个可以执行您想要的操作的示例 Codepen：https://codepen.io/adelriosantiago/pen/OJbWBep?editors=1010