项目需求

• 移动端微信h5 ,通过微信扫一扫实现在微信内置浏览器中显示3d人物模型
• 拍照功能。 使用微信扫码后吊起手机相机进行 模型 + 相机内容 拍照 ，并生成图片

上效果：

技术点：

• 移动端适配（ios and android）
• 微信调起相机问题。在安卓端 方案已经很成熟， 在ios端，ios 在2021年下半年刚刚才开放支持 微信端webrtc 功能
• 拍照内容 模型+相机内容，两部分图片，需要对两张图片进行合成
• 移动端实现AR功能。 3d模型展示 three.js

技术方案

方案一： 纯原生前端实现，使用html,js 实现在 video标签中捕获视频帧画面，然后把每一帧的画面渲染在3d canvas中
方案二： AR.js + three.js 实现。 AR.js 是一个非常优秀的Web AR 框架能做非常多的事情。git地址 链接

技术踩坑

1、 分辨率dpi（也叫像素比）在实际手机端摄像头打开后没有占满整个屏幕？

在使用ar.js 来 初始化 webcam 方法 修改ar.js 的源代码 增加faceMode 前后摄像头 切换摄像头部分的组件需要调整分辨率 canvas 的 render的viewport 进行调整 renderer.setPixelRatio(window.devicePixelRatio); renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);

优化方案

为什么要优化呢？ 经过实际的测试发现 在移动端，10w面左右 30M 大小的精细模型在安卓设备打开网络加载速度有一定5～10s 左右，在ios 设备上，直接卡崩了（可能是ios 微信对这方面的支持不足，在safari 浏览器上就没问题）

方案一 ： 将gltf 导出为glb 二进制格式 使用three.js 直接进行加载，大小为30多M， 现象ios 大部分机型不支持，安卓机正常 方案二 ：将 gltf 导出glb 使用 gltf-pipeline 将glb和纹理进行分离加载，加载速度快了点，但是还没达到预期 方案三： 面数无法剪掉的前提下，只能采用对Texture 和 Mesh 进行压缩。纹理贴图都是高清，我全部用ps 给他大小调到了等比例最小。采用谷歌开发的工具 gltf-pipeline -i model.gltf -d命令； gltf-pipeline 可直接在全局使用npm install gltf-pipeline。 最后整个模型大小调整为了6.1Mb 方案四 ：加载策略，按照安卓和ios 的分开加载。小模型来在ios端进行加载，大模型（纹理贴图处理不失真）在安卓端加载