threejs-easy入坑

threejs-easy入坑

官方管理后台: https://www.easyar.cn/view/developCenter.html#license

---

官方demo小程序解读

• 官方小程序采用的 是小程序, 而 不是小游戏 开发的. 踩了点坑

  1. 使用小游戏开发, 导入threejs 啥的 3d模型显示模型ok, 后面测试打开摄像机时发现调用微信api wx.createcameracontext 时报错: wx.createcameracontext is not a function . 原来是这个api只能是 <camera> 组件中使用, 也就是只能是 小程序 中使用. 官方的解释是: ``cameraContext与页面内唯一的组件绑定，操作对应的 组件。

     参考: https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.html

  2. 后面换成 小程序 开发, 嵌入 threejs 失败. 然后向 easyAR demo 官方确认才知道是使用 小程序 + webview 的方式, 将网页端嵌入小程序中. ps: webview 只对 企业账户 且是 小程序 才支持. 不然后台 开发设置 没有 业务域名 配置. ( 参考: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html)

---

前篇

• 零配置运行WebAR Demo：https://github.com/gentwolf-shen/EasyAR-WebAR-Demo

• 外网访问, 必须使用 https. 我的测试地址: https://h5.wilker.cn/SimpleThreeJsExample/

  • pc端Chrome ok
  • 手机端 Chrome 显示没有设备?
  • ios 端 Safari ok

---

采坑

小游戏部分

• createElementNS 不被支持，那么我们可以将所有 createElementNS 改为 createElement. 修改 weapp-adapter.js，就不需要再对 three.js 进行修改了

  参考: https://indienova.com/indie-game-development/run-threejs-on-wechat-game-platform/

---

参考

• web新手之使用easyAR实现WebAR - https://blog.csdn.net/dengshunhao/article/details/80424443

---

附

• Apache+php 的docker - https://hub.docker.com/r/newdeveloper/apache-php/

  在docker中运行即可, 然后使用nginx反向代理. (我都是在nginx中配置https)

---

TODO:

• 小程序 web-view 之间的交互
• 联调 php 后台, 上传图片 ok
• 修改成 定时识别