小程序使用THREEJS(尝新)

准备所需资源

当然了,我们是尝的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。但已不足为惧,放开手去搏吧。

写的不好请见谅~~~~~~~~~~~~~

对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。 此教学版本为threeJS107版本。 关于版本不建议大家使用低于90的版本学习。 以下是课程目录 1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景) 2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等) 3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理) 4-高级图形算法常见库(求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等) 5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用) 6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作) 7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解) 8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道) 9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动) 10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库) 11-常见渲染以及透明度问题 12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果) 13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势) 14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动) 15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法) 16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页