微信小游戏之使用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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
JavaScript 原型与原型链详情
Nov 02 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
一个简单的网页密码登陆php代码
2012/07/17 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python PyQt5标准对话框用法示例
2017/08/23 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
angular异步验证器防抖实例详解
2022/03/31 Javascript