AR/VR相关资料

艾克华

已于 2022-06-28 20:44:31 修改

阅读量517

点赞数

分类专栏： AR 文章标签： ar vr

于 2022-06-24 21:34:53 首次发布

本文链接：https://blog.csdn.net/weixin_37391237/article/details/125443438

版权

AR 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ar.js主要基于两个开源项目：three.js和jsartoolkit5，3D场景加载、演示部分是使用three.js实现，Marker追踪识别则是由jsartoolkit5实现。
ar.js文档: https://ar-js-org.github.io/AR.js-Docs
AR.js中提供了图像跟踪（Image Tracking）、基于定位（Location Based）、基于标记（Marker Based）三种模式。
图像跟踪模式是通过设备摄像头，扫描图片、绘画、照片等内容，从而定位场景的模式，是用自然特征点跟踪（Nature Feature Tracking、NFT）技术，将图片中的特征点进行提取。然后通过识别影像中是否存在这些特征点，来确定图像的位置和方向，构建场景，进一步加载或者渲染期望的模型。厉害的是，生成特征时用的是图片，但检测的时候可以是实物

#官方的demo js由于访问受限可能加载不到，所以这里我把js放在服务器了
<script src="aframe-master.min.js"></script>
<script src="aframe-ar-nft.js"></script>
  <script>
       // 注册markerhandler组件
       // 该组件中注册了，当场景中检测到图像时触发的事件
       AFRAME.registerComponent('markerhandler', {
           init: function () {
               this.el.sceneEl.addEventListener('markerFound', () => {
                   alert('hello ar!')
               });
           }
       });
   </script>

<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 -->
 <div class="arjs-loader">
   <div>Loading, please wait...</div>
 </div>
 <a-scene
   vr-mode-ui="enabled: false;"
   renderer="logarithmicDepthBuffer: true;"
   embedded
   arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
 >
   <!-- we use cors proxy to avoid cross-origin problems -->
     
       <!--url=" https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"-->

   <a-nft markerhandler 
     type="nft"
   
    url="nft/nft"
     smooth="true"
     smoothCount="10"
     smoothTolerance=".01"
     smoothThreshold="5"
   >
     <a-entity
       gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
       scale="1 1 1"
       position="50 150 0"
     >
     </a-entity>
   </a-nft>
   <a-entity camera></a-entity>
 </a-scene>
</body>

图像追踪特征生成工具: https://carnaux.github.io/NFT-Marker-Creator/#/

mind-ar: https://hiukim.github.io/mind-ar-js-doc/tools/compile
AR 手势交互: https://github.com/fcor/arjs-gestures
资源下载：
aframe-ar-nft.js: https://download.csdn.net/download/weixin_37391237/85765460
aframe-master.min.js: lhttps://download.csdn.net/download/weixin_37391237/85765451

注意：
手机浏览器打开摄像头需要https协议（必须）