准备所需资源
当然了,我们是尝的THREEJS,那当然需要准备的首要“食材”就是threejs相关的静态资源。可以参考相关github上的开源代码。当然了,我这边也准备了一些相关资源。也可以直接使用的哦~
友情链接:
github文档
threejs-example-for-miniprogram
threejs文档
Threejs中文网
私人贡献
threejs相关资源
当然,既然那是基于小程序开发,那肯定避免不了所需微信开发者工具啦
项目起步
搭建项目过程,这边就不细说了。显得我聒噪。直接按照开发者工具一步一步下去,就ok了。但是注意需要注册微信小程序ID
哟。不然后续调试还是很麻烦的
ok~
步入正题:
如果下载的我提供的资源。就直接下手干就完了
目录结构如下:
从代码中可以看出,简单的几句,就能直接显示出想要的模型效果。但其中还是有很多小坑
问题一
真机无法显示模型:
无抛出错误信息,就是真机调试,模型加载不出来。
刚开始以为是wx.createSelectorQuery()
方法的原因。
这个问题也看了官方文档,都说是bug没有修复,搞了好久,没有找到原因。
经过七七四十九天的研究,终于才发现,原来和wx.createSelectorQuery()
没有半毛钱关系。(原谅我的菜,也深深感叹,文档有时让人误导的越走越远。。。。)
解决思路:
在小程序公众平台配置请求模型的域名。(就这?1分钟搞定的事,却花了49天。。。Oh, my God~~~)
问题二
模型展示:模糊、不清晰
解决思路:
直接上代码
wx.getSystemInfo({
success: function (res) {
renderer.setPixelRatio(res.devicePixelRatio)
}
})
将手机系统信息中的分辨率搞进去,就ok了。简单粗暴。
问题 N
很多细节问题three文档中都有说明,可以直接解决
项目发布
这个就不多说了,直接微信开发者工具上传代码,填写对应版本号。微信公众号平台将体验版提交审核。审核填写一些信息。审核通过,就可以直接上线。
总结
初次接触threejs,刚开始确实让人很懵逼,但是没关系,强大文档做我们的后盾。熟悉文档后,基本上可以了解大概的代码流程,但是避免不了会遇到一些奇怪的bug。但已不足为惧,放开手去搏吧。
写的不好请见谅~~~~~~~~~~~~~