原文链接：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. mysql命令行创建数据库并设置字符集

    CREATE DATABASE test1 DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

  2. Qt开源作品24-遮罩层窗体

    一.前言 在有些项目中,需要在弹框的窗体背后遮罩原有主窗体,使得突出显示弹窗窗体,突然想到之前写过一个全局截屏的东东,原理一致,拿来改改.只需要引入一个头文件和实现文件,然后在主窗体中设置下需要遮罩的 ...

  3. [转]VS2019+CUDA11.1 没有CUDA出现

    1.VS2019+CUDA11.1 没有CUDA出现 2.VS+CUDA 新建项目里没有CUDA选项(附详细图文步骤) 3.No Cuda 10.1 runtime Template in Visua ...

  4. [转]vcpkg+opencv4(sfm+vtk)+openMVS+SFM算法-github代下载(http://gitd.cc/)

    1.vcpkg+opencv4(sfm+vtk)+openMVS+SFM算法-github代下载(http://gitd.cc/) 2.OpenMVS详细安装教程(ubuntu18.04) 3.ubu ...

  5. MySql中MySqlParameter的用法

    在C#中,向表person插入一条数据(表person包括两列:id和name),使用MySqlParameter定义表中各列的值. static void Main(string[] args) { ...

  6. Python中导入模块的import命令的语法

  7. 得物从0到1自研客服IM系统的技术实践之路

    本文由得物技术王卫强分享,为了更好的阅读体验,有较多的内容修订和排版优化. 一.引言 客服IM的核心业务其实就是在线沟通,客服IM的好处是使得客服与用户通过实时沟通的方式可以在最短的时间内帮助用户解决 ...

  8. [LC814]二叉树剪枝

    题目 题目地址 分析 这道题符合递归的性质,对于当前的节点node,当且仅当其左右孩子都为不包含1的子树,且node.val=1时,node所在的子树才符合"不包含1的子树"这一定 ...

  9. Mysql身份认证过程

    背景 最近有一些hersql的用户希望能支持mysql的caching_sha2_password认证方式,caching_sha2_password与常用的mysql_native_password ...

  10. Elasticsearch的分享

    一.生活中的数据 搜索引擎是对数据的检索,所以我们先从生活中的数据说起.我们生活中的数据总体分为两种: 结构化数据 非结构化数据 结构化数据: 也称作行数据,是由二维表结构来逻辑表达和实现的数据,严格 ...