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

【问题标题】：Trackball-like controls in Three.jsThree.js 中的类似轨迹球的控件
【发布时间】：2020-08-05 15:38:37
【问题描述】：

我制作 3D 游戏已经有一段时间了，但我在控件的一个复杂问题上停了下来。我使用自定义指针锁定控件，我希望旋转的行为类似于 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 是代表相机旋转的THREE.Euler，zoomValue是相机必须缩小的距离。

主要的谜团是计算方法，那么我要怎么做才能让相机围绕玩家运行呢？（仅围绕 X 和 Y 轴）。

【问题讨论】：

标签： javascript math three.js

【解决方案1】：

我刚刚想通了：

正确的公式是

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

我希望这对任何人都有帮助！

【讨论】：