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

Question

我正在制作一个“”“第一人称控制器”“”演示，其中基本上相机在按下 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.y,
            camera.position.z);

        }, 70); 
 }

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

标签： javascriptthree.jscontrolsorbit

Answer 1

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

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