Changing Three.js Orbit Controls target when camera moves, not working good

Question

I'm making a """First Person Controller""" demo, where basically the camera moves forward in the scene when TOUCH event stay pressed, I use setInterval and addScaledVector for the camera movement.

I decided to add Orbit Controls just for rotating the camera to look around, no Zoom. Everything works quite good, but the Orbit Controls make a weird rotation to the target, in the target I use camera.position.x + 1, because if I just put camera.position.x with no value simply doesn't work, also I applied to the camera quaternion.

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); 
 }

Any information is appreciated, I'm kind of new on three.js so any detail is cool Thank you !

Answer 1

Have you considered using PointerLockControls instead? It is just the same as OrbitControls but specially adapted to what you want. From the docs: The implementation of this class is based on the Pointer Lock API. PointerLockControls is a perfect choice for first person 3D games.

Here is a sample Codepen that does what you want: https://codepen.io/adelriosantiago/pen/OJbWBep?editors=1010