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

更新时间：2019年06月10日 09:53:07 作者：MADAO是不会开花的

three.js是一个可以使用javascript绘制3d图形的库，它对WebGL的api进行封装，使开发更加方便，就像jQuery对DOM的api进行封装一样。这篇文章主要介绍了微信小游戏之使用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 绘制一个旋转的三角形,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

javascript去掉代码里面的注释
这篇文章主要介绍了javascript去掉代码里面的注释的方法和具体代码，有需要的小伙伴可以参考下。
2015-07-07
用js判断是否为360浏览器的实现代码
这篇文章主要介绍了用js判断是否为360浏览器的实现代码,有时候我们需要判断是否为360浏览器，包括百度联盟后台就有这样的提示需要的朋友可以参考下
2015-01-01
教你3分钟利用原生js实现有进度监听的文件上传预览组件
这篇文章主要给大家介绍了关于如何3分钟利用原生js实现有进度监听的文件上传预览组件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-07-07
JS或jQuery获取ASP.NET服务器控件ID的方法
这篇文章主要介绍了JS或jQuery获取ASP.NET服务器控件ID的方法,本文介绍一方法,解决如何使用js获取ASP.NET控件在浏览器端生成html标签对应的id,需要的朋友可以参考下
2015-06-06
JavaScript操作CSS的高级用法分享
Web开发中,JavaScript与CSS的结合用于增强网页的交互性和用户体验,本文将探索几种高级方法来使用JavaScript操作CSS,并分别通过代码示例进行讲解,希望对大家有所帮助
2023-12-12
基于JavaScript实现div层跟随滚动条滑动
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧
2016-01-01
JS TextArea字符串长度限制代码集合
因为业务需求今天做了一个textarea文本域字符串长度限制的方法，其实网上已经有了很多相关的解决方案，但在输入日语时，在IE存在BUG，我的这个版本就是针对这种情况的
2012-10-10
Bootstrap5的断点与容器的具体使用
本文将结合实例代码，介绍Bootstrap5的断点与容器的具体使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
2021-07-07
一文带你快速学会JavaScript条件判断及高级用法
JavaScript支持其用于执行根据不同的条件不同的操作条件语句,下面这篇文章主要给大家介绍了关于如何在JavaScript中更好的使用条件判断的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
js实现页面图片消除效果
这篇文章主要为大家详细介绍了js实现页面图片消除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03