微信小游戏之使用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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
原生JS实现的双色球功能示例
Feb 02 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
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
DISCUZ 分页代码
2007/01/02 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
python实现按行切分文本文件的方法
2016/04/18 Python
python实现简单http服务器功能
2018/09/17 Python
利用python开发app实战的方法
2019/07/09 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
《满井游记》教学反思
2014/02/26 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
新法人代表任命书
2014/06/06 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
聘任通知书
2015/09/21 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书