一个让 THREE 平台化的项目，目前已适配微信，淘宝，头条小程序，微信小游戏.zip

# three-platformize 一个让 THREE 平台化的项目 > 后续维护将会在[platformize](https://github.com/deepkolos/platformize)继续 1. 目前已适配微信，淘宝，字节小程序 2. 支持 tree shaking（需用 webpack，rollup 等构建工具） 3. VSCode types 正常，能正常访问各个类的定义 4. 适配 examples/jsm/\*\*/\*.js，types 正常 5. 可升级、降级版本或使用自定义 THREE 6. 微信小程序 IOS 内存优化，更少切页面导致的崩溃 7. 支持自定义新平台适配，参考 WechatPlatform 编写适配器即可 8. [three-platformize-plugin-wechat](https://github.com/deepkolos/three-platformize-plugin-wechat) 支持微信插件跨插件复用 <h3 align="center">Special Sponsors</h3> <table> <tbody> <tr> <td align="center" valign="middle"> <a href="https://www.yuntucad.com" target="_blank" align="center"> <img height="45px" alt="云图三维-在线三维CAD设计软件" src="https://upload-images.jianshu.io/upload_images/252050-3b45b9102c4b7a1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br> 云图三维-在线三维CAD设计软件 </a> </td> <td align="center" valign="middle"> <a href="https://www.oppentech.com/" target="_blank" align="center"> <img height="45px" alt="奥本未来-AR/VR领域先行者" src="https://s3.cn-northwest-1.amazonaws.com.cn/oppenhome/logo_black.png"><br> 奥本未来-AR/VR领域先行者 </a> </td> </tr><tr></tr> </tbody> </table> ### 适配情况 | | 微信 | 淘宝 | 字节 | | ------------ | ---- | ---- | ---- | | 小程序真机 | ✔️ | ✔️ | ✔️ | | 小程序模拟器 | ✔️ | ✔️ | | | 小游戏真机 | ✔️ | | | | 小游戏模拟器 | ✔️ | | | <br> > [奥本未来](https://www.oppentech.com/)招聘前端、WebGL、图形学算法，欢迎投简历 ## DEMO > 注：运行 DEMO 时记得开启调试模式，取消域名验证，使用**最新版本**微信开发工具打开 > 具体 Loader 使用方法的 Demo 在这个仓库下[three-platformize-demo](https://github.com/deepkolos/three-platformize-demo) <table> <tbody> <tr> <th> <a href="https://github.com/deepkolos/three-platformize-demo-wechat" >微信小程序 DEMO</a ><br /><a href="https://github.com/deepkolos/three-platformize-demo-wechat-simple" >微信小程序基础版 DEMO</a ><br /><a href="https://github.com/deepkolos/three-platformize-demo-wechat-game" >微信小游戏 DEMO</a > </th> <th> <a href="https://github.com/deepkolos/three-platformize-demo-taobao" >淘宝小程序 DEMO</a > </th> <th> <a href="https://github.com/deepkolos/three-platformize-demo-byte" >字节小程序 DEMO</a > </th> </tr> <tr> <td> <img src="https://raw.githubusercontent.com/deepkolos/three-platformize-demo-wechat/master/demo.gif" width="250" alt="" /> <div> <img src="https://raw.githubusercontent.com/deepkolos/three-platformize-demo-wechat/master/qrcode.jpg" width="150" alt="" /> </div> </td> <td> <img src="https://raw.githubusercontent.com/deepkolos/three-platformize-demo-taobao/master/demo.gif" width="250" alt="" /> </td> <td> <img src="https://raw.githubusercontent.com/deepkolos/three-platformize-demo-byte/master/demo.gif" width="250" alt="" /> </td> </tr> </tbody> </table> ### 已测试模块 #### Features 0. VSMShadow (r131以及之前的版本可以, 见[Loop index cannot be compared with non-constant expression](https://techbrood.com/zh/news/webgl/webgl-glsl%E7%A8%8B%E5%BA%8F%E5%87%BA%E9%94%99_-loop-index-cannot-be-compared-with-non-constant-expression.html)) #### Loader 1. GLTFLoader (支持带纹理的 GLB) && (EXT_meshopt_compression 安卓可用 WASM，ios 可用 ASM 版，见 tools) && (KHR_mesh_quantization，小程序可用) [【网格压缩测评】MeshQuan、MeshOpt、Draco ](https://juejin.cn/post/6931954784018628621) (微信 8.0 后 WebAssembly API 已无法使用需要使用 WXWebAssembly, 且只支持包内 wasm, 已新增 meshopt_decoder.wasm.module, [使用见](https://github.com/deepkolos/three-platformize-demo/blob/main/src/MeshOpt.ts#L8)) 2. TextureLoader 3. RGBELoader & PMREMGenerator (小程序部分机型可能偶现[生成 envMap 错误](https://juejin.cn/post/6922829073920032775)，可用[HDRPrefilter](https://github.com/deepkolos/hdr-prefilter-texture)避免 ) 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](https://github.com/mrdoob/three.js/pull/21377) 已合并，r127 可用) 17. VTKLoader #### Controls 0. OrbitControls & MapControls 1. DeviceOrientationControls (微信、淘宝小程序下 onDeviceMotionChange，安卓下返回数据质量极其低下，基本不可用，社区 bug 反馈 3 年多了，官方无修复意愿) ### 不支持模块 0. ImageBitmapLoader(微信小程序未开放 ImageBitmap) #### Tools 0. dispose-three（销毁节点 1. flip（截屏需要 flipY 2. screenshot 3. worker-pool.module（暂未适配微信小程序 4. zstddec.worker.module（暂未适配微信小程序 5. zstddec.module（暂未适配微信小程序 6. toEnvMap（用于 hdr prefilter 7. meshopt_decoder.asm.module（微信小程序可用 8. meshopt_decoder.wasm.module（微信小程序可用 #### Extensions 0. GLTFGPUCompressedTexture(BasisTextureLoader 的代替方案) 生成工具通过[gltf-gpu-compressed-texture](https://github.com/deepkolos/gltf-gpu-compressed-texture)获取（暂未适配微信小程序 ## 使用 ```js import * as THREE from 'three-platformize'; import WechatPlatform from 'three-platformize/src/WechatPlatform'; const platform = new WechatPlatform(canvas); // webgl canvas platform.enableDeviceOrientation('game'); // 开启DeviceOrientation THREE.PLATFORM.set(platform); // 使用完毕后释放资源 THREE.PLATFORM.dispose(); // 正常使用three即可 // DEMO 代码示例见 https://github.com/deepkolos/three-platformize-demo // 基础的使用DEMO见 https://github.com/deepkolos/three-platformize-demo-wechat-simple // 生产环境时rollup.config.js里请开启teser压缩, 即plugins末尾增加 terser({ output: { comments: false } }) ``` ### 经验 0. 微信小程序不支持 2048 以上的纹理图片 1. 淘宝小程序显示 RGB 格式纹理 (JPG) 有问题，通过 TextureLoader 加载纹理后，把 texture.format 设置为 RGBAFromat 即可(淘宝版本 9.20.0)，原因可能是服务端对图片大图片优化，把图片压缩导致格式改变 RGB 变 RGBA 2. r126 不能设置全 pixelRatio，可以设置为一半，或者 2，不能是 3 3. 虽然支持加载 GLB，但图片是使用 js 版的 ArrayBuffer 转 base64，耗时且占用内存，虽可用 wasm 的 encoder 缓解 (https://github.com/marcosc90/encoding-wasm)，但wasm对字符串处理性能不如js，用AssemblyScript编译的wasm测试 4. IOS 前后进入退出页面崩可以降低 pixelRatio 缓解 5. IOS 微信 readPixels 不支持抗锯齿，如果直接 canvas 的 buffer 需要关闭抗锯齿（antialias: false）, 另一种方式是 WebglRenderTarget，同时也可以开启抗锯齿，但是纹理大小�