Three.js是一个可以使用javascript绘制3d图形的库。它封装了WebGL的api，使得开发更加方便，就像jQuery封装了DOM的api一样。接下来，在小游戏中记录绘制旋转三角形的步骤：

一、项目初始化

下载微信官方开发者工具，创建新项目

Appid可以选择测试号，项目路径可以自己指定

用编辑器打开项目，并获得以下目录：

然后删除除game.js、game.json、project.config.json以外的所有内容，清空game.js的内容。

Game.js是整个游戏的入口，game.json是游戏的配置。具体参考文件。

二.介绍三个. js和适配器

适配器

小游戏的运行环境中没有BOM和DOM，用wx API模拟BOM和DOM的代码组成的库叫做Adapter。官方提供了一个适配器，用就行了。

适配器文档

三. js

GitHub地址

用三分钟的时间复制内容

创建一个新的目录libs，并将三. js和Adapter的源代码放在这个目录中

在game.js中添加：

“进口”。/libs/weapp-适配器“导入*为三个自”。/libs/三' III。画一个三角形

根据适配器的文档，只要引入适配器，就会创建一个上层屏幕canvas，并作为全局变量Canvas公开。

使用三个. js渲染图形有三个必要条件：渲染器、场景和相机

渲染器

可以通过渲染器的名称来了解它，它是用于将图形渲染到屏幕上的方法。

场景场景

如果将绘图图形视为对象，那么场景就是存储这些对象的地方。

照相机

相机就像人眼一样。相机被用来决定在场景中的什么地方看物体，就像有东西一样。如果你从不同的角度看这个物体，你可能会看到不同的形状。

在game.js中创建这三样东西

“进口”。/libs/weapp-适配器“import * as THREE from”。/libs/three ' const width=window . innerwidth const height=window.innerHeight//Create WebGL renderer const renderer=new three . webglrenderer({//这里直接使用canvas，因为weapp-adapter会自动创建全屏canvas })//Create scene const scene=new three . scene()/* * *正交相机是正交相机。*在此投影模式下，无论对象与相机之间的距离如何，最终渲染图片中对象的大小都将保持不变。*/const相机=新三。正投影相机(-宽/2，宽/2，高/2，-高/2，0，1000)新增三个的参数。正投影相机可以参考官方文件或者是Three.js 2 ——正交投影相机的基础探索。既然这三个必要条件都已具备，就有必要将对象添加到

一个对象叫做three.js中的mesh，由几何和材质组成。

我的理解是几何是物体的基本形状，就像WebGL中的顶点着色器，材质是几何的颜色和光照，就像WebGL中的片段着色器。

很多几何都是三. js提供的，但是好像没有基本的三角形，自己画个三角形吧。

在game.js中添加：

//绘制三角形const三角形shape=new three.shape()三角形shape .移动到(0，100)//三角形开始位置三角形shape.lineto (-100，-100)三角形shape.lineto (100，-100)三角形shape.lineto (0

有了三角形的基本形状，通过three.js中提供的api将三角形变成几何图形

在game.js中添加：

//将三角形更改为对象的几何图形const geometry=new three。形状几何(三角形形状)，就完成了。

然后是材料：

在game.js中添加：

//对象的材质const material=newthree。mesh bisc material({ color : newthree。颜色(' # 7fffd4 ')，//颜色信息side: THREE。DoubleSide //用来决定渲染哪一面，因为是旋转的，所以需要在两边(也就是两边)进行渲染，形成一个有几何材质的对象。

//合成一个对象并将其添加到场景中。const mesh=new three.mesh(几何，材质)mesh.position.set (0，0，-200)//设置对象在场景中的位置。场景.添加(网格)设置摄像机的位置及其观察方向的坐标

Camera.position.set(0，0，0)//camera position camera . look at(new three . vector 3(0，0，-200))//让相机从0，0，0看向0，0，-200。最后一步是渲染：

renderer . setclearcolor(new three . color(' # f 84462 ')//设置背景色渲染器. setsize(宽度，高度)//设置最终渲染大小渲染器. render(场景，相机)此时，您可以在开发人员工具中看到一个三角形：

4.让三角形移动

const ender=()={ mesh。rotate (0.05)//three.js，旋转角度按弧度计算，公式为：度数=弧度 180/渲染器。渲染(场景、摄像机)请求动画帧(渲染)}渲染()完整代码：

“进口”。/libs/weapp-适配器“import * as THREE from”。/libs/three ' const width=window . innerwidth const height=window.innerHeight//Create WebGL renderer const renderer=new three . webglrenderer({//这里直接使用canvas，因为weapp-adapter会自动创建全屏canvas })//Create scene const scene=new three . scene()/* * *正交相机是正交相机。*在此投影模式下，无论对象与相机之间的距离如何，最终渲染图片中对象的大小都将保持不变。*/const相机=new THREE。OrthographicCamera(-width/2，width/2，height/2，-height/2，0，1000)//画一个三角形const三角形shape=new three。shape()三角形。移动到(0，100)//三角形开始位置三角形形状。lineto (-100，-100)三角形。lineto (100，-100)triangleShape.lineTo(0，100)//将三角形更改为几何常量几何=新三。形状几何(三角形形状)//对象的材质const material=new THREE . mesh bisc material({ color : newthree . color(# 7 fffd 4 ')，//颜色信息side: THREE。DoubleSide //用于确定渲染哪一侧，因为它是旋转的。所以需要渲染两边，也就是两边})//形成一个对象，添加到场景中。Const mesh=new three.mesh(几何，材质)mesh.position.set (0，0，-200) //设置场景场景中对象的位置。添加(网格)相机。位置。设置(0，0，0)//摄像机位置摄像机。看(新三。vector3 (0，0，-200))//让相机看起来从0，0，0到0，0 -200渲染器. setclearcolor(new three . color(' # f 84462 '))//设置背景色渲染器. setSize(width，Height) //设置最终渲染的大小consender=()={ mesh。rotate (0.05)//three.js，其中旋转角度以弧度计算，公式为：度数=弧度 180/渲染器。渲染(场景、相机)请求动画帧(渲染)}渲染()。

以上是用三. js画的旋转三角形，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！