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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30100043/article/details/84796961

之前,我们一直使用相机控制器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

阅读更多

扫码向博主提问

专注前端30年

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • 前端开发
  • 原生js
  • Three.js
  • webgl
去开通我的Chat快问

没有更多推荐了,返回首页