Javascript Three.js中类似轨迹球的控件

Javascript Three.js中类似轨迹球的控件,javascript,math,three.js,Javascript,Math,Three.js,我制作3D游戏已经有相当一段时间了,我在一个复杂的控制问题上停了下来。我使用自定义pointerlock控件,我希望旋转的行为类似于three.js TrackballControls 我的代码: function animate() { requestAnimationFrame(animate); camera.position.x = (Math.sin(euler.y) - Math.sin(euler.x)) * zoomValue + lastPlayerX;

我制作3D游戏已经有相当一段时间了,我在一个复杂的控制问题上停了下来。我使用自定义pointerlock控件,我希望旋转的行为类似于three.js TrackballControls

我的代码:

function animate() {
    requestAnimationFrame(animate);
    camera.position.x = (Math.sin(euler.y) - Math.sin(euler.x)) * zoomValue + lastPlayerX;
    camera.position.z = (Math.cos(euler.y) - Math.sin(euler.x)) * zoomValue + lastPlayerZ;
    camera.position.y = -Math.sin(euler.x) * zoomValue + lastPlayerY;
    composer.render();
}
animate();
lastPlayerX、lastPlayerY和lastPlayerZ是玩家位置轴,是相机必须环绕的目标,euler是三个。euler表示相机旋转,zoomValue表示相机必须缩小的距离

主要的谜题是计算方法,那么我要怎么做才能使相机绕着播放器旋转呢?只绕X轴和Y轴。

我刚刚算出:

正确的公式是

function animate() {
    requestAnimationFrame(animate);
    camera.position.x = Math.sin(euler.y) * Math.sin(euler.x + Math.PI / 2) * zoomValue + lastPlayerX;
    camera.position.z = Math.cos(euler.y) * Math.sin(euler.x + Math.PI / 2) * zoomValue + lastPlayerZ;
    camera.position.y = -Math.sin(euler.x) * zoomValue + lastPlayerY;
    composer.render();
}
animate(); 
我希望这对任何人都有帮助

我刚想出来:

正确的公式是

function animate() {
    requestAnimationFrame(animate);
    camera.position.x = Math.sin(euler.y) * Math.sin(euler.x + Math.PI / 2) * zoomValue + lastPlayerX;
    camera.position.z = Math.cos(euler.y) * Math.sin(euler.x + Math.PI / 2) * zoomValue + lastPlayerZ;
    camera.position.y = -Math.sin(euler.x) * zoomValue + lastPlayerY;
    composer.render();
}
animate(); 
我希望这对任何人都有帮助