原文链接：https://blog.jijian.link/2020-09-08/js-ar/

重要事情说三遍

此文章中的API接口，必须放在 https 协议下测试！浏览器APP必须开启摄像头权限！此文章代码仅在 chrome 手机浏览器及微信中测试通过。

此处省略两遍。

示例

本文仅使用陀螺仪模拟 AR 效果，完整 AR 逃不掉一整套算法，本菜鸟还做不到啊。

DEMO 演示效果

代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>陀螺仪模拟AR效果</title>

  <style>

    #video {

      position: absolute;

      left: 50%;

      top: 50%;

      transform: translate(-50%, -50%);

      width: 100%;

      height: 100vh;

      background-color: #141414;

    }

    #address {

      position: fixed;

      left: 50%;

      top: 50%;

      width: 40px;

      height: 60px;

      border-radius: 100%;

      background-color: #009900;

      z-index: 4;

      color: #fff;

    }

  </style>

</head>

<body>

  <div id="address"></div>

  <video id="video" autoplay="autoplay"></video>

  <script>

    var video = document.getElementById('video');

    //默认使用前摄像头，强制使用后置摄像头如下设置

    var constraints = {video: { facingMode: { exact: "environment" } }};

    // let constraints = { video: true };

    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {

      // 旧的浏览器可能没有srcObject

      window.stream = stream;

      if ("srcObject" in video) {

        video.srcObject = stream;

      } else {

        // 防止在新的浏览器里使用它，应为它已经不再支持了

        video.src = window.URL.createObjectURL(stream);

      }

      video.onloadedmetadata = function() {

        video.play();

      };

    }).catch(function(err) {

      console.error(err.name + ": " + err.message);

    });

    // http://stackoverflow.com/questions/18112729/calculate-compass-heading-from-deviceorientation-event-api/21829819#21829819

    // todo 算法来源 https://my.oschina.net/u/2324376/blog/790939

    function compassHeading(alpha, beta, gamma) {

      // Convert degrees to radians

      var alphaRad = alpha * (Math.PI / 180);

      var betaRad = beta * (Math.PI / 180);

      var gammaRad = gamma * (Math.PI / 180);

      // Calculate equation components

      var cA = Math.cos(alphaRad);

      var sA = Math.sin(alphaRad);

      // var cB = Math.cos(betaRad);

      var sB = Math.sin(betaRad);

      var cG = Math.cos(gammaRad);

      var sG = Math.sin(gammaRad);

      // Calculate A, B, C rotation components

      var rA = - cA * sG - sA * sB * cG;

      var rB = - sA * sG + cA * sB * cG;

      // var rC = - cB * cG;

      // Calculate compass heading

      var compassHeading = Math.atan(rA / rB);

      // Convert from half unit circle to whole unit circle

      if(rB < 0) {

        compassHeading += Math.PI;

      }else if(rA < 0) {

        compassHeading += 2 * Math.PI;

      }

      // Convert radians to degrees

      compassHeading *= 180 / Math.PI;

      return compassHeading;

    }

    function updateGravity (event) {

      const that = this;

      // !根据陀螺仪获取旋转角度，设置人物位置

      const winWidth = document.documentElement.clientWidth;

      const itemWidth = parseInt(window.getComputedStyle(address).width);

      const heading = 360 - compassHeading(event.alpha, event.beta, event.gamma);

      const angle = 0;

      address.style.transform = 'rotate('+(heading - 90 + angle)+'deg)';

      // `${(winWidth - itemWidth) * Math.min(180, Math.max(0, (heading + 360 - angle) % 360)) / 180}px`  移动区间 0 - 180

      address.style.left = `${(winWidth - itemWidth) * ((heading + 360 - angle) % 360) / 180}px`;

    }

    window.addEventListener('deviceorientation', updateGravity, false);

  </script>

</body>

</html>

javascript 陀螺仪加摄像头可以玩出AR效果的更多相关文章

  1. 混合开发（一）——WebView开发高级技巧之加载网页以及JavaScript，加载进度条

    混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...

  2. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  3. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  4. 前端性能优化：细说JavaScript的加载与执行

    本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...

  5. 用C3中的animation和transform写的一个模仿加载的时动画效果

    用用C3中的animation和transform写的一个模仿加载的时动画效果! 不多说直接上代码; html标签部分 <div class="wrap"> <h ...

  6. IT蓝豹--RecyclerView加载不同view实现效果

    本项目由开发者:黄洞洞精心为初学者编辑RecyclerView的使用方法. RecyclerView加载不同view实现效果,支持加载多个view,并且支持用volley获取数据, 项目主要介绍: 初 ...

  7. 关于javascript模块加载技术的一些思考

    前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...

  8. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  9. JavaScript为input/textarea自定义hover,focus效果

    <title>JavaScript为input/textarea自定义hover,focus效果</title> <script type="text/java ...

  10. Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

随机推荐

  1. linux命令系列 sudo apt-get update和upgrade的区别

    入门linux的同志,刚开始最迫切想知道的,大概一个是中文输入法,另一个就是怎么安装软件.本文主要讲一下LINUX安装软件方面的特点.在windows下安装软件,我们只需要有EXE文件,然后双击,下一 ...

  2. VS2008新建MFC程序时提示：当前页面的脚本发送错误 不是有效的Win32应用程序的解决办法

    错误现象: 解决方案: 1.根据错误信息中的url,找到对应文件夹下的htm文件 2.使用notepad++打开default.htm文件,找到错误提示地方,注释掉其中两句语句,如433和434行所示 ...

  3. .net core反射练习-简易版IOC容器实现

    实现一个简易的IOC容器 先说一下简单思路,参考ServiceCollection,需要一个注册方法跟获取实例方法,同时支持构造函数注入.那么只需要一个地方存储注册接口跟该接口的继承类,以及根据类的构 ...

  4. Canal同步MySQL增量数据

    引言 在现在的系统开发中,为了提高查询效率 , 以及搜索的精准度, 会大量的使用 redis .memcache 等 nosql 系统的数据库 , 以及 solr . elasticsearch 类似 ...

  5. 自动化测试平台用例执行_Android

      一.搭建过程 参考:https://testerhome.com/topics/15534 (https://github.com/jerrylizilong/autotest_platform) ...

  6. Solution Set -「LOCAL」冲刺省选 Round XXVII

    \(\mathscr{Summary}\)   还行,B 题挺不错,C 题就省选来说有点水(? \(\mathscr{Solution}\) \(\mathscr{A-}\) 分裂   初始时,你有一 ...

  7. uwp IProgress<T>进度通知。

    主要是利用 Pp_ProgressChanged 报告进度: private void BtnDownload_Click(object sender, RoutedEventArgs e) { va ...

  8. 彻底讲透Spring三级缓存，原理源码深度剖析！

    一.前言循环依赖:就是N个类循环(嵌套)引用.通俗的讲就是N个Bean互相引用对方,最终形成闭环.在日常的开发中,我们都会碰到类似如下的代码 @Servicepublic class AService ...

  9. linux内核 list_for_each_entry

    1. linux内核中的list用法 在linus内核中,list一般这样使用: struct list_head { struct list_head *priv; struct list_head ...

  10. cmake-4

    cmake-4学习,参考 cmake构建c++项目快速入门2-1 cmake构建c++项目快速入门2-2 了解 cmake的工作原理: Windows下用cmake编译cmake (1)先下载cmak ...