threejs指南针【控制中心计算角度】

前言

提示：明确指南针的公式
效果：

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现原理

实现思路：传统的计算相机到控制中心的夹角来控制2D的图片进行旋转，达到指南针的效果。

二、计算夹角

场景中添加指南针，一般在场景中添加指南针，并不是一直以场景中心（0，0，0）为中心点。
用户很大程度上会拖动场景，或场景中添加的有相机漫游之类的操作，不可能一直依靠相机坐标去计算角度。
根据 反正切三角函数 atan2(x,y),结合三维场景y轴向上，忽略y轴。
所以 atan2(x,z) 只需要x的坐标和z的坐标。
求得相机相对于控制中心的相对坐标。只需要将（相机坐标 - 控制中心坐标）

const dirx = camera.position.x - controls.target.x
const dirz = camera.position.z - controls.target.z

套入反正切函数求得角度

// 注意：后边*180/Math.PI是用于计算角度的
// 反正切函数atan只会得出结果，不会求得角度
// 但是这种视浏览器而定，有些浏览器封装的有角度算法，只需要Math.atan2(dirx, dirz)即可