【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

  • 这里
    【AR.js】初步认识与官方示例的使用_第1张图片
  • 他们有三种实现:基于标记、基于特征点、以及基于地理位置;前面两种差不大多。
  • 优点:只要有支持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>
    
    
    <script src='js/aframe-ar-nft.js'>script>
    
    <body style='margin : 0px; overflow: hidden;'>
       
      <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;'>
    
            
            <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,ar,javascript,开发语言)