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

最新推荐文章于 2025-03-08 11:30:20 发布

o0o_-_

最新推荐文章于 2025-03-08 11:30:20 发布

阅读量6.7k

点赞数

分类专栏： AR 文章标签： ar javascript 开发语言

本文链接：https://blog.csdn.net/qq_33446100/article/details/122379022

版权

AR 专栏收录该内容

15 篇文章

订阅专栏

                    
                        
                    
                    说在前面 
 
 测试浏览器：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访问并使用官方的在线示例。

                