当前位置: 首页 > 现代诗歌 > 文章

微信小游戏之使用three.js 绘制一个旋转的三角形 免费心理情感咨询

2019-06-10

微信小游戏之使用three.js 绘制一个旋转的三角形 免费心理情感咨询

微信小游戏之使用绘制一个旋转的三角形更新时间:2019年06月10日09:53:07作者:MADAO是不会开花的是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。 这篇文章主要介绍了微信小游戏之使用绘制一个旋转的三角形,需要的朋友可以参考下是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。 接下来就记录一下在小游戏中绘制一个旋转的三角形的步骤:下载微信官方的开发者工具,然后新建项目appid选择测试号即可,项目路径自行指定用编辑器打开项目,得到如下目录:然后除了,,全部删除,并把中的内容清空。 是整个小游戏的入口,是小游戏配置。 具体参考文档。 Adapter小游戏的运行环境中是没有BOM和DOM的,使用wxAPI模拟BOM和DOM的代码组成的库称之为Adapter。 官方提供了一个Adapter,用它就行了。

复制中的内容新建目录libs,将和Adapter的源码放在该目录下在中添加:import./libs/weapp-adapterimport*asTHREEfrom./libs/three根据adapter的文档只要引入了adapter就会创建一个上屏Canvas,并暴露为一个全局变量canvas。 使用渲染一个图形必备的三个条件:渲染器,场景,相机Renderer渲染器渲染器看名字就知道了,就是用于将图形渲染到屏幕上的方法。 Scene场景假如把绘制的图形看做是一个个物体的话,那么场景就是用来存放这些物体的地方。

Camera相机相机就好像人的眼睛一样,相机用于确定在什么地方去看场景中的物体,就好像有一个东西,不同的角度去看这个物体,看到的有可能是不一样的形状。

在中创建这三个东西import./libs/weapp-adapterimport*asTHREEfrom./libs/threeconstwidth==//创建WebGL渲染器constrenderer=({//由于weapp-adapter会自动创建一个全屏的canvas所以这里直接用canvas})//创建场景constscene=()/***OrthographicCamera是正交相机,*在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。

*/constcamera=(-width/2,width/2,height/2,-height/2,0,1000)的参数可以参考官方文档或者基础探寻二——正交投影照相机现在必要的三个条件都有了,就要添加物体到场景中了。 物体在中叫做mesh,它由几何体(geometry)和材料(material)组成。

我的理解就是几何体就是物体的基本形状,就像WebGL中的顶点着色器,材料就是几何体的颜色啊,光照等信息,就像WebGL中的片元着色器。

中提供了很多几何体,但是好像没有基本的三角形,所以要自己画一个三角形。 在中添加://画一个三角形consttriangleShape=()(0,100)//三角形起始位置(-100,-100)(100,-100)(0,100)这里说一下的坐标系有了三角形的基本形状,通过中提供的api,将这个三角形变成几何体在中添加://将三角形变成组成物体的几何体constgeometry=(triangleShape)组成物体的几何体就搞定了。 然后就是材料了:在中添加://物体的材料constmaterial=({color:(#7fffd4),//颜色信息side://用于确定渲染哪一面,因为是旋转的,所以需要正反面都渲染,也就是两面})用几何体+材料组成物体,并添加到场景中://组成物体并添加到场景中constmesh=(geometry,material)(0,0,-200)//设置物体在场景中的位置(mesh)设置相机的位置以及看向的坐标(0,0,0)//相机位置((0,0,-200))//让相机从0,0,0看向0,0,-200最后一步就是渲染了:((#f84462))//设置背景色(width,height)//设置最终渲染的尺寸(scene,camera)这时候去在开发者工具中就可以看到一个三角形了:。