小白向：webAR的制作过程

小白向：webAR的制作过程

---

前言

本文章的内容是关于作者尝试开发webAR的经历和过程。关于作者为何想要尝试webAR，这还得从作者大学的录取通知书说起。作者下学期大三，有幸看到大一新生的录取通知书。相比于网上看到的花里胡哨的其他学校的录取通知书----又是芯片又是纸雕，咱学校的录取通知书可谓朴素至极----只有一些笔啊纸啊卡片啊什么的。于是我想可以给我们学校的录取通知书里放一个虚拟模型/手办，只需把AR识别的图案做成一个小卡片放进录取通知书中，学生拿到后只需要用手机扫描图案就能看到不输于其他学校的模型（虽然是虚拟的）。这样一来既提升了录取通知书的B格，又不需要太高的成本。由于本人是这一方面的小白，本人的代码是基于B站up主MarsLUL的视频：一键手办生成器，20行代码教你把老婆带到现实世界！ 作者做webVR的过程主要基于对此视频的参考，但是在基于此视频制作的过程中也遇到了视频中没有提及的问题，在本文章中将会详细说明。

项目需要：Node.js 和 ngrok， 详情可参考UP主MarsLUL的项目GitHub.
作者使用的IDE： Visual Studio 2019

---

一、为什么选择webAR？

其实我们学校有学长做过AR的研究，他们做的都非常好，但是又一个缺陷，就是想要看到他们的AR必须下相应的APP，而且他们不同小组做的AR成果需要不同的APP来观看。作者本人不喜欢在手机上下载太多乱七八糟的APP，并且我相信大多数人都是这样。如果我们既想让别人看到我们的AR模型，又不想别人下多余的APP该怎么做呢？没错，答案就是做webAR!

二、代码详解

在此文章中只解释UP主视频中没提到的内容，和此片文章代码于UP主代码不同的地方，仅供小白参考。

1.JS代码

代码如下：

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

http.createServer(function (req, res) {
   
    res.setHeader('Content-Type', 'text/html')