105 THREE.JS 手动实现相机沿焦点旋转
·
之前,我们一直使用相机控制器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
更多推荐
已为社区贡献28条内容
所有评论(0)