用ar.js实现一个超简单的webAR（手办生成器）

本文链接：https://blog.csdn.net/weixin_43723877/article/details/107486907

前言

最近看到b站up主MarsLUL做了个AR手办生成器，觉得很有意思，今天就来照着他的讲解来实现一下吧！
在这里插入图片描述
那么现在就来开始！

步骤：

第一步：搭建静态服务器

这里用Node.js开启一个静态服务器，实际上用Tomcat或者其他服务器也是可以的。
Node.js直接去官网下载然后直接一直点下一步安装就好了，这里就不附上安装教程了。

首先创建一个index.js来创建一个简单的静态服务器

在这里插入图片描述

var fs = require('fs');
var http = require('http');

//用http创建一个静态服务器
http.createServer(function(req, res) {
    fs.readFile(__dirname + req.url, function (err, data) {
        if(err) {
            res.writeHead(404);
            res.end(JSON.stringify(err));
            return;
        }
        res.writeHead(200);
        res.end(data);
    });
}).listen(8080);

我们往项目中随便放入一张图片
在这里插入图片描述
然后在控制台执行node index.js

接着访问localhost:8080/1.jpg看是否可以访问

这样静态服务器就搭建完成啦！

第二步：下载模型

我们可以去https://sketchfab.com随便下载一个免费的模型
这里我下载一个鸣人的
在这里插入图片描述
记得一定要下载gltf格式的

在项目里创建static文件夹，在static下再创建gltf文件夹，然后将压缩包解压到这里面

模型下载完毕！

第三步：编写应用

在static文件夹下创建js文件夹，放入提前在ar.js库下载的两个js文件aframe.min.js和aframe-ar.js，后面我会放到我的gitee仓库，大家可以去里面拿

在这里插入图片描述
然后创建index.html，编写页面

<!DOCTYPE html>
<html>
    <!--下载并运行AR.js-->
  <script src="static/js/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="static/js/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <!--a-scene会创建一个AR环境-->
    <a-scene embedded arjs>
        <!--a-marker是在相机中想要识别模型的标记-->
        <a-marker preset="hiro">
            <a-entity
            position="0 0.5 0"
            scale="1.5 1.5 1.5"
            rotation="-160 0 0"
            gltf-model="static/gltf/naruto/scene.gltf"
            ></a-entity>
        </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

最后只要让手机访问上这个页面就好啦！

第四步：内网穿透

这里我们使用ngrok可以很简单的做一个内网穿透，只要去ngrok官网下载ngrok客户端就好啦：https://ngrok.com/download
打开后执行ngrok http 8080,
在这里插入图片描述
这样我们就完成，用手机访问https的那个地址，后面加上/index.html就可以访问的到了！