如何用three.js在微信小游戏里实现旋转三角形的绘制？

本文共计1812个文字，预计阅读时间需要8分钟。

three.js 是一个利用 JavaScript 绘制 3D 图形的库，它对 WebGL 的 API 进行了封装，使开发更加便捷，就像 jQuery 对 DOM API 的封装一样。以下是在一个小游戏中绘制一个旋转的三角形步骤：

1. 引入 three.js 库。

2.设置一个渲染器，如 WebGLRenderer。

3.创建一个场景（scene）。

4.添加一个相机（camera）。

5.创建一个三角形，并将其添加到场景中。

6.添加动画循环，使三角形旋转。

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，用它就行了。