V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
deepkolos
V2EX  ›  分享创造

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

  •  
  •   deepkolos ·
    deepkolos · 2021-04-18 10:17:28 +08:00 · 4161 次点击
    这是一个创建于 1344 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 更好了

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

    我说我向量化之后为什么有的面时有时无,原来大概是压的太狠了
    sonders
        9
    sonders  
       2023-09-13 13:11:45 +08:00
    大佬你好,微信小程序上我这边为什么这么卡呢,使用的是 FBXLoader.js ,有小程序示例吗
    dxcqcv
        10
    dxcqcv  
       168 天前
    @deepkolos 请问内嵌 H5 的 three 和小程序原生 three 在客户业务上有什么区别吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2883 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 12:56 · PVG 20:56 · LAX 04:56 · JFK 07:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.