微信小游戏之使用three.js 绘制一个旋转的三角形


Posted in Javascript onJune 10, 2019

three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样。接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤:

一. 初始化项目

下载微信官方的开发者工具,然后新建项目

微信小游戏之使用three.js 绘制一个旋转的三角形

appid选择测试号即可,项目路径自行指定

用编辑器打开项目,得到如下目录:

微信小游戏之使用three.js 绘制一个旋转的三角形

然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空。

微信小游戏之使用three.js 绘制一个旋转的三角形

game.js是整个小游戏的入口,game.json是小游戏配置。具体参考文档。

二. 引入three.js 和 Adapter

Adapter

小游戏的运行环境中是没有 BOM 和 DOM 的,使用 wx API 模拟 BOM 和 DOM 的代码组成的库称之为 Adapter。官方提供了一个Adapter,用它就行了。

Adapter文档

three.js

gitHub地址

微信小游戏之使用three.js 绘制一个旋转的三角形

复制three.min.js中的内容

新建目录libs,将three.js和Adapter的源码放在该目录下

微信小游戏之使用three.js 绘制一个旋转的三角形

在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 绘制一个旋转的三角形

有了三角形的基本形状,通过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)

这时候去在开发者工具中就可以看到一个三角形了:

微信小游戏之使用three.js 绘制一个旋转的三角形

四. 让三角形动起来

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 绘制一个旋转的三角形,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ajax 缓存 问题 requestheader
Aug 01 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
JavaScript变量作用域及内存问题实例分析
Jun 10 #Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 #Javascript
vue通信方式EventBus的实现代码详解
Jun 10 #Javascript
Vue将页面导出为图片或者PDF
Aug 17 #Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
发布订阅模式在vue中的实际运用实例详解
Jun 09 #Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 #Javascript
You might like
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
php的sso单点登录实现方法
2015/01/08 PHP
php实现搜索类封装示例
2016/03/31 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
PHP 实现链式操作
2021/03/09 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
python Celery定时任务的示例
2018/03/13 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python 处理文件的几种方式
2019/08/23 Python
python tkinter组件使用详解
2019/09/16 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
企业指导教师评语
2014/04/28 职场文书
公司年会策划方案
2014/05/17 职场文书
班级文化建设标语
2014/06/23 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
创业计划书之熟食店
2019/10/16 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server