原文链接：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. Docker安装FISCO BCOS区块链平台

    2.0版本提供docker镜像,支持容器化部署,省去了很多编译安装过程遇到的各种问题. FISCO BCOS官方镜像docker地址:https://hub.docker.com/r/fiscoorg ...

  2. Qt开发经验小技巧171-175

    在Qt编程中经常会遇到编码的问题,由于跨平台的考虑兼容各种系统,而windows系统默认是gbk或者gb2312编码,当然后期可能msvc编译器都支持utf8编码,所以在部分程序中传入中文目录文件名称 ...

  3. Python 进阶：深入理解 import 机制与 importlib 的妙用

    大家好,今天我们来深入探讨 Python 中的导入机制和 importlib 模块.相信不少朋友和我一样,平时写代码时可能只用过最基础的 import 语句,或者偶尔用 importlib.impor ...

  4. ConcurrentHashMap源码分析-JDK18

    前言 ConcurrentHashMap是一个线程安全的HashMap,主要用于解决HashMap中并发问题. 在ConcurrentHashMap之前,也有线程安全的HashMap,比如HashTa ...

  5. Shapefile代码示例

    Shapefile代码示例 1. 读取Shapefile文件 1.1 实现思路 graph TD A[查找必要文件] --> B[获取文件编码] B --> C[打开图层] C --> ...

  6. 了解 ASP.NET Core 中的中间件

    在 .NET Core 中,中间件(Middleware) 是处理 HTTP 请求和响应的核心组件.它们被组织成一个请求处理管道,每个中间件都可以在请求到达最终处理程序之前或之后执行操作.中间件可以用 ...

  7. Solution -「ZJOI 2015」「洛谷 P3343」地震后的幻想乡

    \(\mathscr{Description}\)   Link.   给定连通图简单无向 \(G=(V,E)\),对于 \(e\in E\),有边权 \(t_e\) 独立均匀随机生成自 \([0,1 ...

  8. jdk并发包源码解析

    一.总括 java底层并发包,笔者将该包大致分成3个层次. 1.基础依赖: 共享变量volatile:有利于线程可见性.Unsafe类:CAS(Compare and Swap)比较并交换,用于并发下 ...

  9. Elasticsearch(4)--- 基本概念(Index、Type、Document、集群、节点、分片及副本、倒排索引)

    这篇博客讲到基本概念包括: Index.Type.Document.集群,节点,分片及副本,倒排索引. 一.Index.Type.Document 1.Index index:索引是文档(Docume ...

  10. 未能加载文件或程序集"Symtem.Data.SQLite.dll"或它的某一个依赖项

    我在window service 2016 等更高版本的服务器上遇见过,普通window系统未预见.可尝试安装 VC ++ 2010 我下载安装  之后就好了.