【AR.js】初步认识与官方示例的使用

 
  
   
  
 说在前面 
  
  测试浏览器：Microsoft Edge(PC版本 97.0.1072.55)/Firefox(Android)
github库：AR.js
AR系列文章：这里
go版本：go version go1.17.3 windows/amd64
其他：本文的关注点在于官方用例。
 
  
 关于AR.js 
 这里
 
他们有三种实现：基于标记、基于特征点、以及基于地理位置；前面两种差不大多。
优点：只要有支持webrtc以及webgl的浏览器就可以使用，不管是pc还是移动设备，十分便利。
 
 基于图像(特征点) 
 在线示例
 
 
 基于标记 
 官方示例
 
 
 golang server 
 查看示例源代码可知，示例中使用到了一些模型、贴图等静态文件，所以想要自己尝试的话需要搭建一个静态文件服务器；选择自己熟悉的工具链即可。
这里使用golang实现package main

import (
	"github.com/gin-gonic/gin"
)

func main() {
      
      
	router := gin.Default()
	router.Static("/", "./public")

	// Listen and serve on 0.0.0.0:8080
	router.Run(":8080")
}
 
html<script src='js/aframe-master.min.js'></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>

<!-- rawgithack development URL -->
<script src='js/aframe-ar-nft.js'></script>

<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;'>

        <!-- use rawgithack to retrieve the correct url for nft marker (see 'pinball' below) -->
        <a-nft
            type='nft' url='./trex/trex-image/trex'
            smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
            <a-entity
                gltf-model='./trex/scene.gltf'
                scale="5 5 5"
                position="150 300 -100"
                >
            </a-entity>
        </a-nft>
		<a-entity camera></a-entity>
    </a-scene>
</body>
 
目录结构
 trex文件夹内容在这里─public
    ├─index.html
    ├─js
    └─trex
        ├─textures
        └─trex-image
 
 
 注意事项 
 在搭建好静态文件服务之后，就可以在局域网下访问了
测试pc edge浏览器可以直接使用，但是对于手机浏览器，webrtc有着https的限制，所以使用手机浏览器可能无法使用。
但是实测可以用Android Firefox访问并使用官方的在线示例。
 
【AR.js】初步认识与官方示例的使用

说在前面

关于AR.js

基于图像(特征点)

基于标记

golang server

注意事项

猜你喜欢
