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

网络编程 2024/12/28 佚名

3 1 2

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,绘制三角形

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

Vue动态修改网页标题的方法及遇到问题

JavaScript变量作用域及内存问题实例分析

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

Vue动态修改网页标题的方法及遇到问题

JavaScript变量作用域及内存问题实例分析

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存