微信小游戏之使用three.js绘制一个旋转的三角形
three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤:
创新互联企业建站,十余年网站建设经验,专注于网站建设技术,精于网页设计,有多年建站和网站代运营经验,设计师为客户打造网络企业风格,提供周到的建站售前咨询和贴心的售后服务。对于成都网站建设、做网站中不同领域进行深入了解和探索,创新互联在网站建设中充分了解客户行业的需求,以灵动的思维在网页中充分展现,通过对客户行业精准市场调研,为客户提供的解决方案。
一. 初始化项目
下载微信官方的开发者工具,然后新建项目
appid选择测试号即可,项目路径自行指定
用编辑器打开项目,得到如下目录:
然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空。
game.js是整个小游戏的入口,game.json是小游戏配置。具体参考文档。
二. 引入three.js 和 Adapter
Adapter
小游戏的运行环境中是没有 BOM 和 DOM 的,使用 wx API 模拟 BOM 和 DOM 的代码组成的库称之为 Adapter。官方提供了一个Adapter,用它就行了。
Adapter文档
three.js
gitHub地址
复制three.min.js中的内容
新建目录libs,将three.js和Adapter的源码放在该目录下
在game.js中添加:
import './libs/weapp-adapter' import * as THREE from './libs/three'
三. 绘制三角形
根据adapter的文档只要引入了adapter就会创建一个上屏 Canvas,并暴露为一个全局变量 canvas。
使用three.js渲染一个图形必备的三个条件:渲染器,场景,相机
Renderer 渲染器
渲染器看名字就知道了,就是用于将图形渲染到屏幕上的方法。
Scene 场景
假如把绘制的图形看做是一个个物体的话,那么场景就是用来存放这些物体的地方。
Camera 相机
相机就好像人的眼睛一样,相机用于确定在什么地方去看场景中的物体,就好像有一个东西,不同的角度去看这个物体,看到的有可能是不一样的形状。
在game.js 中创建这三个东西
import './libs/weapp-adapter' import * as THREE from './libs/three' const width = window.innerWidth const height = window.innerHeight // 创建WebGL渲染器 const renderer = new THREE.WebGLRenderer({ // 由于weapp-adapter会自动创建一个全屏的canvas所以这里直接用 canvas }) // 创建场景 const scene = new THREE.Scene() /** * OrthographicCamera是正交相机, * 在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。 */ const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000) new THREE.OrthographicCamera 的参数可以参考官方文档或者 Three.js基础探寻二——正交投影照相机
现在必要的三个条件都有了,就要添加物体到场景中了。
物体在three.js中叫做mesh,它由几何体(geometry)和材料(material)组成。
我的理解就是几何体就是物体的基本形状,就像WebGL中的顶点着色器,材料就是几何体的颜色啊,光照等信息,就像WebGL中的片元着色器。
three.js中提供了很多几何体,但是好像没有基本的三角形,所以要自己画一个三角形。
在game.js 中添加:
// 画一个三角形 const triangleShape = new THREE.Shape() triangleShape.moveTo(0, 100) // 三角形起始位置 triangleShape.lineTo(-100, -100) triangleShape.lineTo(100, -100) triangleShape.lineTo(0, 100)
这里说一下three.js的坐标系
有了三角形的基本形状,通过three.js中提供的api,将这个三角形变成几何体
在game.js 中添加:
// 将三角形变成组成物体的几何体 const geometry = new THREE.ShapeGeometry(triangleShape)
组成物体的几何体就搞定了。
然后就是材料了:
在game.js 中添加:
// 物体的材料 const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('#7fffd4'), // 颜色信息 side: THREE.DoubleSide // 用于确定渲染哪一面,因为是旋转的,所以需要正反面都渲染,也就是两面 })
用几何体 + 材料组成物体,并添加到场景中:
// 组成物体并添加到场景中 const mesh = new THREE.Mesh(geometry, material) mesh.position.set(0, 0, -200) // 设置物体在场景中的位置 scene.add(mesh)
设置相机的位置以及看向的坐标
camera.position.set(0, 0, 0) // 相机位置 camera.lookAt(new THREE.Vector3(0, 0, -200)) // 让相机从0, 0, 0 看向 0, 0, -200
最后一步就是渲染了:
renderer.setClearColor(new THREE.Color('#f84462')) // 设置背景色 renderer.setSize(width, height) // 设置最终渲染的尺寸 renderer.render(scene, camera)
这时候去在开发者工具中就可以看到一个三角形了:
四. 让三角形动起来
const render = () => { mesh.rotateY(0.05) // three.js 中旋转角度是通过弧度计算的,公式:度=弧度×180°/π renderer.render(scene, camera) requestAnimationFrame(render) } render()
完整代码:
import './libs/weapp-adapter' import * as THREE from './libs/three' const width = window.innerWidth const height = window.innerHeight // 创建WebGL渲染器 const renderer = new THREE.WebGLRenderer({ // 由于weapp-adapter会自动创建一个全屏的canvas所以这里直接用 canvas }) // 创建场景 const scene = new THREE.Scene() /** * OrthographicCamera是正交相机, * 在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。 */ const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000) // 画一个三角形 const triangleShape = new THREE.Shape() triangleShape.moveTo(0, 100) // 三角形起始位置 triangleShape.lineTo(-100, -100) triangleShape.lineTo(100, -100) triangleShape.lineTo(0, 100) // 将三角形变成组成物体的几何体 const geometry = new THREE.ShapeGeometry(triangleShape) // 物体的材料 const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('#7fffd4'), // 颜色信息 side: THREE.DoubleSide // 用于确定渲染哪一面,因为是旋转的,所以需要正反面都渲染,也就是两面 }) // 组成物体并添加到场景中 const mesh = new THREE.Mesh(geometry, material) mesh.position.set(0, 0, -200) // 设置物体在场景中的位置 scene.add(mesh) camera.position.set(0, 0, 0) // 相机位置 camera.lookAt(new THREE.Vector3(0, 0, -200)) // 让相机从0, 0, 0 看向 0, 0, -200 renderer.setClearColor(new THREE.Color('#f84462')) // 设置背景色 renderer.setSize(width, height) // 设置最终渲染的尺寸 const render = () => { mesh.rotateY(0.05) // three.js 中旋转角度是通过弧度计算的,公式:度=弧度×180°/π renderer.render(scene, camera) requestAnimationFrame(render) } render()
总结
以上所述是小编给大家介绍的微信小游戏之使用three.js 绘制一个旋转的三角形,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
本文题目:微信小游戏之使用three.js绘制一个旋转的三角形
文章URL:http://pwwzsj.com/article/jiepph.html