AR Quack
HackQuest 的 Quackathon hiQuack 冲冲冲...
需要提前准备一些东西
- 本地服务器或在网页上部署静态 web 应用
- 一个简单的 Marker, 用于识别出
- 一个 3D 模型
AR 渲染的流程大概是下面这样
用到的技术
- AR.js
- Three.js
- A-Frame.js
- ARtoolkit 辨识图片 marker
- vercel: 部署应用
准备3D 模型
我们可以到 sketchfab.com/feed 这个网站上下载，只有带有下载按钮的模型才能下载，选一个自己喜欢的选择 glTF 格式进行下载。
下载下来的文件中有个 .bin 文件 一个 .gltf 文件， 虽然代码中没有显式的用到 .bin 问价， 但是渲染 3D 模型时又用到。 所以确保这两个文件都有并且默认在同一个文件夹下。
准备一个 marker
marker 是一个标记， 用于识别出 3D 模型的。marker 最好拥有黑色边框和高对比度的简单的图案。 AR 官方提供了一个制作 marker 的网站 制作 marker
点击 download marker 会生成一个 .patt 文件这个是代码中作为自定义 marker 使用的。 点击 download image 会生成一个 marker 图片， 这个是用来扫一扫识别出 3D 模型的
开始写代码
就用一个官方的 demo 吧，很简单几行就搞定了。就这？是的就这么多。
<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
<!-- we import arjs version without NFT but with marker + location based support -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs>
<a-marker type='pattern' url='/pattern-marker.patt'>
<a-entity position="0 0 0" rotation="0 0 0" scale="2 2 2" gltf-model="/scene.gltf">
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
发布到静态服务
你可以起个本地服务，唤起摄像头后，摄像头对准 marker ，一切顺利的话 3D 模型就渲染出来了， 如果不顺利最好引入最新版本的 aframe.js 和 aframe-ar.js 我是实用 vercel 部署的静态服务，代码也很简单
const express = require("express");
const app = express();
const port = 3000;
app.use(express.static("lib"));
app.use(express.static("res"));
app.use(express.static("public"));
app.get("/", (req, res) => {
res.send("Hello World!");
});
// hero 会随机分配端口号， 自己不能直接指定， 不然部署会报错
app.listen(process.env.PORT || port, () => {
console.log(`Example app listening on port ${process.env.PORT || port}`);
});
package.json 文件中记的加上启动脚本， heroku 默认执行的是 npm run start
"script" : {
"start": "node index"
}
commit 并 push 完代码就自动部署好了 项目选择 vite
生成一个网站二维码
非常简单输入上面部署好的地址 hi-quack.vercel.app/ ，点击 Create QR code 就搞定了
拿出手机试一下吧
先扫二维码打开网站， 同意摄像头使用权限
对准下面这个 marker, 看看会不会出来一个 duck
