开发者工具版本:Stable 1.05.2103190
调试基础库:2.16.0
代码:https://github.com/wechat-miniprogram/threejs-miniprogram/tree/master/example
问题:iphone 12 pro 真机预览白屏(开发者工具正常渲染)
控制台输出:几条扩展不支持提示,没有任何报错
本地设置:
使用android手机、ipad有同样的不支持扩展提示也可以正常预览渲染
资源可以正常请求,不是网络问题
canvas.getContext('webgl')没有问题,用webview打开threeJS官方案例也可以正常渲染
iphone可以正常预览渲染微信官方webGL示例(要把示例的调试基础库升到最新版才可以)
github上已有人提相关问题,但半年了还未解决:https://github.com/wechat-miniprogram/threejs-miniprogram/issues/35
你好,请问是这个测试用例吗?
官方的几个例子里都有这行代码
renderer.setSize(canvas.width, canvas.height);
但事实上canvas.width和canvas.height都没有值,应该改成
canvas拿到的宽高不如rect拿到的宽高准确,建议使用rect拿到的宽高,并且ios还有webgl内存泄漏问题
需要先设置pixelRatio然后再设置size: setPixelRatio(ratio) -> setSize(w, h)
该仓库解决了不少问题,可以参考下
https://github.com/deepkolos/three-platformize
后来发现是与canvas长宽有关,当长或宽超过455px(手机PixelRatio是3)的时候iphone就会白屏,不清楚什么原因
我这边如果要满屏渲染(宽390高753 ),就得把PixelRatio设置为2
补充:
官方canvas文档有说明过大宽高在安卓下会闪退(https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)
我测试(Huawei Mate 20)宽540,高1017, PixelRatio=3的时候才会出现闪退
iphone和这个比起来限制的长宽也太小了吧
和我有相同问题的github链接:
https://github.com/wechat-miniprogram/threejs-miniprogram/issues/3
https://github.com/wechat-miniprogram/threejs-miniprogram/issues/11
https://github.com/wechat-miniprogram/threejs-miniprogram/issues/27
证明不同机型都会出现该问题