微信小程序的 threejs,适配了 16 个 loader,各种踩坑记录

2021-04-18 10:17:28 +08:00
 deepkolos

three-platformize

一个让 THREE 平台化的项目

  1. 目前已适配微信小程序(真机+模拟器),淘宝小程序(模拟器, 真机目前比较多问题)
  2. 支持 tree shaking (需用 webpack,rollup 等构建工具)
  3. VSCode types 正常,能正常访问各个类的定义
  4. 适配 examples/jsm/**/*.js ,types 正常
  5. 可升级、降级版本或使用自定义 THREE
  6. 微信小程序 IOS 内存优化,更少切页面导致的崩溃
  7. 支持自定义新平台适配,参考 WechatPlatform 编写适配器即可
微信小程序 DEMO
微信小程序基础版 DEMO
淘宝小程序 DEMO

已测试模块

Loader

  1. GLTFLoader (支持带纹理的 GLB) && (EXT_meshopt_compression 安卓可用 WASM,ios 可用 ASM 版,见 tools) && (KHR_mesh_quantization,小程序可用) [网格压缩测评] MeshQuan 、MeshOpt 、Draco
  2. TextureLoader
  3. RGBELoader & PMREMGenerator (小程序部分机型可能偶现生成 envMap 错误,可用HDRPrefilter避免 )
  4. SVGLoader
  5. OBJLoader
  6. EXRLoader (需支持 OES_texture_float_linear 扩展,部分移动端 GPU 不支持)
  7. MTLLoader (小程序使用 JPG 纹理即可)
  8. DDSLoader (需支持 WEBGL_compressed_texture_s3tc 扩展,移动端 GPU 不支持)
  9. LWOLoader (需支持 EXT_blend_minmax 扩展,小程序一半效果绘制出错)
  10. FBXLoader
  11. BVHLoader
  12. ColladaLoader (DOMParser querySelector 未适配)
  13. TTFLoader
  14. STLLoader
  15. PDBLoader
  16. TGALoader (改用 DataTextureLoader PR 已合并,r127 可用)

Controls

  1. OrbitControls & MapControls
  2. DeviceOrientationControls (微信、淘宝小程序下 onDeviceMotionChange,安卓下返回数据质量极其低下,基本不可用,社区 bug 反馈 3 年多了,官方无修复意愿)

有小程序 three 需求的同学,欢迎 star 或者 issue,PR 更好了

4099 次点击
所在节点    分享创造
10 条回复
ihipop
2021-04-18 10:28:35 +08:00
小程序如果内嵌 H5 是不是实现起来限制更少?
deepkolos
2021-04-18 11:21:05 +08:00
@ihipop 是的,但是客户想要小程序内展示,只能 three 适配小程序
dream4ever
2021-04-18 11:49:36 +08:00
很棒啊,最近虽然在做 PC 上的 Three.js 开发,不过小程序也可以作为技术储备,多谢分享~
LucasW
2021-04-18 16:09:23 +08:00
感谢分享
rookielzy
2021-04-19 10:23:51 +08:00
太强了,感谢分享!顺便问一下,关于 Three.js 的学习楼主有什么推荐的方式或路径吗?想做一个 3D 设备机房的可视化编辑器。
deepkolos
2021-04-19 12:42:55 +08:00
@rookielzy 我也还在入门,可以先过 webglfundamentals 和 threefundamentals
Tdy95
2022-04-02 19:20:55 +08:00
很棒的一个开源项目,感谢大佬分享
fy
2022-08-19 14:54:41 +08:00
哇 老哥牛逼 很多问题都有遇到,比如 ios 切页面崩溃,还有内存占用问题之类 很有参考价值

我说我向量化之后为什么有的面时有时无,原来大概是压的太狠了
sonders
2023-09-13 13:11:45 +08:00
大佬你好,微信小程序上我这边为什么这么卡呢,使用的是 FBXLoader.js ,有小程序示例吗
dxcqcv
130 天前
@deepkolos 请问内嵌 H5 的 three 和小程序原生 three 在客户业务上有什么区别吗?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/771401

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX