threejs 中数学计算 - 弧度角度互转(一)

146 阅读1分钟

最近在研究使用threejs做全景看房类型vr想过,其中里面有个效果是,在右上角会有房型整体风格的区位图,里面有个功能需要知道当前相机视角看到的位置,那么这种情况下我们要怎样拿到角度跟朝向呢。

首先我们说下数学公式中弧度跟度数互转

度数跟弧度的转换

// 1° 等于多少弧度
1° = π/180 rad

// 1弧度跟转度数
1rad = (180/π)°

threejs 中弧度跟角度的转换

threejs 中的弧度跟角度的转换也是利用到数据公式,但我们需要记得的一点是在threejs中圆是以弧度来作为基本单位的,所以我们除了利用常规数学方法自己计算,threejs也提供了对数学方法的封装可以给我们直接调用

数学方法直接计算

    角度转弧度:角度 / 180 * Math.PI
    弧度转角度: 弧度 * 180 / Math.PI

threejs提供的数学封装方法

弧度转角度:THREE.MathUtils.radToDeg()
角度转弧度:THREE.MathUtils.degToRad();

示例:假设three给出了一个弧度那么我们要将弧度转换出来给html

    const rad = 3;
    // 直接通过数学方法
    const theta = (rad * 180) / Math.PI);
    // 通过three提供封装方法
    const theta = THREE.MathUtils.degToRad(rad);

结果示意,可以发现计算出来的度数是一致的 image.png