原文链接：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. springboot 多数据源（aop方式）

    一.实现思路 在yml中定义多个数据源的配置,然后创建一个类DynamicDataSource去继承AbstractRoutingDataSource类 AbstractRoutingDataSour ...

  2. SolidState靶机通关教程及提权

    声明!本文章及工具分享仅仅只是供大家学习交流为主,如有任何触犯法律的行为,均与本人及团队无关!!! 工具链接:https://pan.quark.cn/s/33795a10039c 一.靶机搭建 点击 ...

  3. Qt编写地图综合应用文章导航

    文章 链接 1-闪烁点图 https://qtchina.blog.csdn.net/article/details/105310274 2-迁徙图 https://qtchina.blog.csdn ...

  4. 解决pip命令报错及Python环境配置指南：从安装到优化

    1. 错误日志 当我在 Linux 机器(使用 Debian 或 Ubuntu 或衍生发行版)上运行 pip install xyz 时,会出现这样的错误: error: externally-man ...

  5. vmstorage如何将原始指标转换为有组织的历史

    vmstorage如何将原始指标转换为有组织的历史 参考自:vmstorage-how-it-handles-data-ingestion vmstorage是VictoriaMetrics中负责处理 ...

  6. 常见的运行窗口命令和命令提示符（DOS）命令

    常见的运行窗口命令和命令提示符(DOS)命令 常见的运行窗口命令 Win + R 打开运行窗口 基础应用程序启动命令 calc:启动计算器. notepad:打开记事本. mspaint:启动画图工具 ...

  7. JVM实战—12.OOM的定位和解决

    大纲 1.如何对系统的OOM异常进行监控和报警 2.如何在JVM内存溢出时自动dump内存快照 3.Metaspace区域内存溢出时应如何解决(OutOfMemoryError: Metaspace) ...

  8. TestProject 使用汇总

    1. 截图 from addons.screenshot_utils import ScreenshotUtils step_output = driver.addons().execute( Scr ...

  9. CDS标准视图：设备 I_Equipment

    视图名称:I_Equipment 视图类型:基础视图 视图内容: 设备编码和设备内容 设备来源及详细信息 有效期 事务代码: IE03,IH08 视图代码 点击查看代码 @EndUserText.la ...

  10. 搭建 VuePress 站点必做的 10 个优化

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 在搭建这 ...