105 THREE.JS 手动实现相机沿焦点旋转

最新推荐文章于 2025-05-08 09:00:00 发布

原创最新推荐文章于 2025-05-08 09:00:00 发布 · 5.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #webgl #手动更新相机位置 #通过角度设置相机

Three.js笔记专栏收录该内容

118 篇文章

订阅专栏

本文介绍如何在Three.js中使用OrbitControls.js控制器获取相机的水平和垂直角度，并提供了一种自定义方法setAngle来设定相机的朝向和位置。此方法允许开发者通过指定角度和距离参数精确控制相机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前，我们一直使用相机控制器control来实现一些相关操作。比如是：OrbitControls.js，大家普遍都喜欢使用的一种控制器。
这种控制器有两个方法：getPolarAngle 和 getAzimuthalAngle来获取相机相对于焦点沿y轴旋转的角度（水平角度）和沿x轴旋转的角度（垂直角度），默认焦点位置是世界坐标的原点（可以额外设置control.target.set()）。
通过调用getPolarAngle()，我们们能够获得一个从0到Math.PI的弧度的值，代表垂直角度0到180度。
而调用getAzimuthalAngle()，我们能够获取到一个-Math.PI到Math.PI范围内的一个值，代表可以水平旋转的角度从z轴正轴顺时针0到360度一周。
但是，这个控制器却缺少一个可以通过函数设置相机朝向以及位置的方法，所以我就自己手动实现了一个。代码如下，需要放到OrbitControls.js代码的构造函数内：

    this.setAngle = function (phi, theta, distance) {

        var r = distance || scope.object.position.distanceTo(scope.target);

        var x = r * Math.cos(phi - Math.PI / 2) * Math.sin(theta) + scope.target.x;
        var y = r * Math.sin(phi + Math.PI / 2) + scope.target.y;
        var z = r * Math.cos(phi - Math.PI / 2) * Math.cos(theta) + scope.target.z;

        scope.object.position.set(x, y, z);

        scope.object.lookAt(scope.target);

    };

这个方法也可以设置与相机的距离，如果没有设置的话，就获取当前相机距离控制器焦点的位置。

然后通过相机的水平转动和垂直转动求出当前相机所在的位置。
最后再让相机朝向焦点。

现在还无法确定是否能合并到three.js源码当中，如果不能的话，可以在实例化后给对象增加方法：

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        controls.setAngle = function (phi, theta, distance) {

            var r = distance || controls.object.position.distanceTo(controls.target);

            var x = r * Math.cos(phi - Math.PI / 2) * Math.sin(theta) + controls.target.x;
            var y = r * Math.sin(phi + Math.PI / 2) + controls.target.y;
            var z = r * Math.cos(phi - Math.PI / 2) * Math.cos(theta) + controls.target.z;

            controls.object.position.set(x, y, z);

            controls.object.lookAt(controls.target);

        };

案例地址： https://www.wjceo.com/blog/threejs2/2018-12-05/181.html