当微信小程序遇到AR，会擦出怎么样的火花？期待与激动......

通过该教程，可以从基础开始打造一个微信小程序的AR框架，所有代码开源，提供大家学习。

本课程需要一定的基础：微信开发者工具，JavaScript，Html，Css

第四章：基石-摄像头与Three.js结合

【前情提要】

　　上一章，前面的两章内容，我们学习了基本的摄像头数据读取以及Three.js三维场景的创建。这两张内容学习之后已经可以做很多更定制化的开发了。例如：

　　1. 我们已经可以做基于摄像头图像的AR内容开发，（比如人脸识别，AR美妆涂口红，戴帽子，适眼镜等等）

　　2. WebGL的三维游戏。

　　这一张，也是基础，主要是探讨，如何在微信小程序中出现摄像头画面的背景，然后在背景之上渲染出WebGL的三维内容。

【目的】

微信小程序中实现摄像头画面为背景，之上渲染WebGL内容

【准备】

　　下面需要搭建环境，做一些准备工作。

　　首先，需要注册微信小程序开发者。注册地址=>

　　注册成功之后，需要下载微信小程序开发工具。下载地址=>

　　目前笔者的开发环境是：Windows 10

　　下载的微信小程序版本为：RC v1.0.2.1909111

【创建工程】

　　按照与上一章同样的步骤，我们创建一个简单的基本工程。这里就不再赘述了。创建好之后的基本工程目录结构如下:

 [方案]

　　在开始开发之前，我们想罗列一下各种可能的方案。

　　要想在摄像头画面之上渲染出WebGL的内容，有一种方案比较容易想到：

方案一：双层Canvas结构

当微信小程序遇到AR（四）