十二、web增强现实

AR.js基于三种方式展示AR内容：
1）Image Tracking
2）Location Based AR
3）Marker Tracking
        IMarker Tracking是最常见的基于maker的AR显示方式，下面的例子就是基于这个。Image Tracking顾名思义，就是基于一张图片去展示AR内容，其实原理和基于Marker Tracking类似，都是根据图片的特性点识别图片并跟踪。AR.js集成了A-Frame和three.js两个框架，基于这两个框架都能实现Image Tracking。
        图片要求，用于做Image Tracking的图片有一定要求，原则上图片越精细越好。推荐使用300dpi及以上的图片，72dpi的图片勉强可以，但是AR展示设备必须靠的很近，而且必须保持静止。
        生成图片对应的Image Descriptors，AR.js官方提供了web工具，可以将图片转换成Image Descriptors，AR.js其实是根据生成的Image Descriptors做图片识别和跟踪定位的。根据图片生成的Image Descriptors包含三个文件，分别为以.fset, .fset3, .iset为后缀名的文件。假设你生成的Image Descriptors文件名为：demo.fset, demo.fset3, demo.iset，那么你的Image Descriptors名字为demo（去除后缀名）。

1、用nginx搭建静态服务器
1）下载mkcert，运行以下命令
mkcert -install
mkcert localhost 127.0.0.1 www.myhost.com 172.20.10.4
将生成的2个文件拷贝到工程根目录的keys目录下
2) 下载nginx
下载后切到下载目录，配置，启动：
cd /d D:\sdk\nginx1.15\
nginx.conf:
   server {
       listen 443 ssl;
       server_name 172.20.10.4;

ssl_certificate d:/sdk/localhost+1.pem;
ssl_certificate_key d:/sdk/localhost+1-key.pem;

       location / {
           root D:/workspace/ai/arjs;
           index index.html index.htm;
       }
   }
nginx -c conf\nginx.conf
如果有端口冲突，杀掉
netstat -aon|findstr "443"
taskkill -f -pid 18500
访问测试：
https://172.20.10.4/

2、下载模型
https://sketchfab.com/Sketchfab/models
随便下载一个免费的模型，格式为gltf;

3、编写应用
开源软件：https://github.com/AR-js-org/AR.js
进入后，点击Tags，在以下地址下载所有js，放在D:/workspace/ai/arjs目录下
https://github.com/AR-js-org/AR.js/releases/tag/3.4.5
在D:/workspace/ai/arjs下写index.html。注意这里的mynft与scene.gltf必须在相对目录中存在，否则加载不出来。

<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="aframe-master.min.js"></script>
<script src="aframe-ar-nft.js"></script>
<script src="gestures.js"></script>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<!-- style for the loader -->
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
  <div class="arjs-loader">
    <div>正在加载AR模型，请稍候...</div>
  </div>

  <!-- a-frame scene -->
  <a-scene vr-mode-ui="enabled: false;" gesture-detector renderer="logarithmicDepthBuffer: true;" embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
    <a-nft type="nft" url="nft/mynft" smooth="true" smoothCount="10" smoothTolerance=".01"
      smoothThreshold="5">
      <!-- 展示模型的路径 -->
      <a-entity gltf-model="model/scene.gltf" scale="50 50 50"
        gesture-handler="minScale: 0.25; maxScale: 10" position="100 0 -200" rotation="-90 0 0">
      </a-entity>
    </a-nft>
    <!-- static camera that moves according to the device movemenents -->
    <a-entity camera="fov: 190"></a-entity>
  </a-scene>
</body>

4、手机访问测试
   确保手机和电脑在同一个wifi网络
   用ipconfig查看windows的ip地址，有多个地址，注意不要搞错了。
   然后用手机的浏览器访问：https://172.20.10.2/
   这时效果和用电脑访问是一样的，网址也一样；
   此时用苹果手机扫描指定的图片，就会在图片上方显示3d图。
   注意，如果用苹果手机，加载后没有打开摄像头的话，建议不要用safri，下载chrome浏览器即可。

效果如下图：

十二、web增强现实

猜你喜欢