前言

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

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

一、实现原理

实现思路：传统的计算相机到控制中心的夹角来控制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)即可
// 后续 +140 这个值是用来偏移角度的，默认以 z轴 的负方向为正北。
// 大多数视场景位置而定。偏移140即代表以右下角为正北方向
const theta = Math.atan2(dirx, dirz)*180/Math.PI + 140;

三、旋转图片

剩下的就是，根据角度直接操作图片dom的style旋转即可

const compass = document.getElementById('compass')
compass.style.transform = 'rotateZ('+ theta +'deg)';

四、代码整合

直接将上述整合添加到render里实时渲染即可
指南针跟随视角而变化

render(){requestAnimationFrame(render)update()renderer.render( scene, camera )const dirx = camera.position.x - controls.target.xconst dirz = camera.position.z - controls.target.z// 可加入判断，根据不同的场景偏差偏移角度if(dmgroup.visible === true){const theta = Math.atan2(dirx, dirz)*180/Math.PI + 140const compass = document.getElementById('compass')compass.style.transform = 'rotateZ('+ theta +'deg)'} else {const theta = Math.atan2(dirx, dirz)*180/Math.PI + 100const compass = document.getElementById('compass')compass.style.transform = 'rotateZ('+ theta +'deg)'}
}

threejs指南针【控制中心计算角度】相关推荐

林仕鼎谈数据中心计算（一）：整体大于部分之和
<失控>中提到一个很普遍的现象,就是整体大于部分之和.比如,把5只蜜蜂加起来,仍然是5只蜜蜂:把10000只蜜蜂加起来,可就不仅仅是10000只蜜蜂了:它是一个蜂群,具备很多只有蜂群才有( ...
浅谈云计算与数据中心计算
文/林仕鼎云计算概念发端于Google和Amazon等超大规模的互联网公司,随着这些公司业务的成功,作为其支撑技术的云计算也得到了业界的高度认可和广泛传播.时至今日,云计算已被普遍认为是IT产业发展 ...
林仕鼎谈数据中心计算（三）：学术界与工业界，以及未来展望
在<林仕鼎谈数据中心计算>的第一部分,百度基础体系首席架构师林仕鼎先生提到要将数据中心当做逻辑上的一台机器来设计架构.在之后的对话中,林仕鼎具体介绍了对数据中心的存储资源做逻辑分层.物理映 ...
2021年全球与中国低压电机控制中心行业市场规模及发展前景分析
2021年全球与中国低压电机控制中心行业市场规模及发展前景分析本报告研究全球与中国市场低压电机控制中心的发展现状及未来发展趋势,分别从生产和消费的角度分析低压电机控制中心的主要生产地区.主要消费地区 ...
卡特加特数字中控主机，数字家庭控制中心！没它智能家居就是智障！
数字中控主机是数字家庭的核心,承担着"协调各方.总揽全局"的作用,是打造未来数字家庭空间必不可少的设备. 区别于传统家居智能,它真正意义上告别了过去以设备为中心的架构,而是以人的个 ...
ST FOC电机控制同步电角度测试说明
电机控制同步电角度测试说明前言在使用ST FOC电机库时,当使用Hall信号作为位置信号时,需要输入同步电角度数据,这个数据根据当前使用电机的特性进行输入,会在每次Hall信号变化时同步电角度,如 ...
信创操作系统--统信UOS桌面版（控制中心：账户、自定义、个性化、声音、日期、电源管理、网络、蓝牙、输入法、系统更新等设置）
信创操作系统–统信UOS桌面版(控制中心:账户.自定义.个性化.声音.日期.电源管理.网络.蓝牙.输入法.系统更新等设置) 目录前言 1.账户类设置 1.1 账户设置 1.1.1创建新账户 1.1. ...
Wink发布Wink Hub2家庭物联网控制中心
智能家居主要厂商之一Wink宣布推出Wink Hub2家庭物联网控制中心,支持更多的家庭物联网产品,更广泛的互联互通,以及提供更好用的控制程序.Wink Hub2主要作用是连接第三方家庭物联网产品,并 ...
android canvas_Android仿IOS11 控制中心进度条
这篇文章我们就用简单的自定义View实现类似iOS11的控制中心里边出现的很新颖的进度条. 先看一下目标效果图,以及最后的实现效果: 自定义属性分析名字释义 progressMax 最大值 pro ...

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

threejs指南针

前言

一、实现原理

二、计算夹角

三、旋转图片

四、代码整合

threejs指南针【控制中心计算角度】相关推荐

最新文章

热门文章