用three.js玩转高数的目的是什么？
目的：让大家在开发计算机图形、动画项目的时候，具备更加扎实的功底。
计算机图形动画就像一只展翅的雄鹰，它右边的翅膀是艺术，左边的翅膀是算法。
无论是二维的canvas教程，还是三维的webgl教程，都要把算法讲明白了。这样大家在遇到复杂的、echarts之类的现有工具实现不了的、高度定制化的原生图形项目的时候，才不会不知所措，不会给公司埋坑。
高数所讲的知识都很基础、很重要。我开发过比较复杂的三维家具模块化的项目，高数的知识完全够用。
很多人会顾虑高数的难度，其实它并不难。在高数课本里，有的地方，对于像我一样的笨小孩来说，有一定的跳跃性，而且逻辑不够清晰。所以，只要老师讲得足够好，再给你足够的时间去思考和练习，你就可以学会。
至于，我为什么会选择three.js，这是因为three.js很优秀，它经过了大家实践的验证。我看过它的源码，从其中可以学到很多东西，就比如图形树的架构、渲染引擎的搭建，还有必不可少的算法。
课前准备
1.安装webstorm开发工具，若没有，vscode亦可；
2.安装live-server，用于启服务，安装方法npmi-glive-server；
3.需掌握es6、html、css的基础知识；
4.对高数还有一定的印象；
5.具备简单的three.js基础；
课堂目标
1.掌握集合，可以使用three.js演示集合概念；
2.掌握一次函数、二次函数、指数函数、对数函数、幂函数，可以使用three.js绘制相应的坐标图像。
知识点综述
1.集合；
2.一次函数；
3.二次函数；
4.指数函数；
5.对数函数；
6.幂函数；
一，集合
1.集合是什么？
l集合是由多个元素构成的一个整体；
l在js里有四种集合对象：Array、Object、Map、Set。
扩展：
Array、Map、Set具备iterator接口，可被for…of循环遍历；
Object没有iterator接口，不可被for…of循环遍历。
2.集合的基本概念
l集合与元素的从属关系：
na属于B：a∈B
na不属于B：aB
l不包含任何元素的集合叫空集。类似于js里的空数组[]；
l根据集合中元素的数量，可将集合分为有限集合、无限集合。
实例1：绘制立方体
要点：BoxBufferGeometry
若将立方体视之为集合，那么其中的点、线、面都是其元素。
立方体相对于它的6个面，是有限集合。
立方体集合示例实例2：绘制直线
要点：LineBasicMaterial、Geometry、Line
直线由无数个点组成，直线相对其中的点而言就是无限集合。
绘制直线3.集合与集合之间的关系
A是B的子集
A包含于B：AB
B包含A：BA
A不是B的子集
A不包含于B：AB
B不包含A：BA
A等于B：A=B
4.集合的运算
集合的运算5.canvas里的集合运算
图形里的集合运算，通常叫做布尔运算。
在canvas中，上下文对象的clip()路径裁剪就是集合的差集运算，在影视动画里将此手法称之为遮罩。
canvas中的globalCompositeOperation全局合成属性，也具备集合运算的功能。当然除此之外，它还能对两种图像的像素色彩进行合成运算。如下图：
canvas对两种图像的像素色彩进行合成运6.三维模型的布尔运算
在webgl中，并没有关于三维模型的布尔运算。
three.js中也没有提供此功能。
不过还好，已经有高手基于three.js开发了类似的插件-ThreeBSP.js
实例：立方体和球体的布尔运算
立方体和球体的布尔运算二、一次函数
1.一次函数定义：y=kx+b,(k≠0),x∈R
y：因变量
x：自变量
k：斜率，常数
b：直线在y轴上的截距，常数
2.一次函数的特性：
坐标图为直线。
实例：绘制一次函数k0时，一次函数为增函数；反之，为减。
b=0时，一次函数过零点，基于原点对称。
一次函数在x轴上的交点为(-b/k,0)，在y轴上的交点为(0,b)。
三、二次函数
1.二次函数定义：y=ax+bx+c,(a≠0),x∈R
2.二次函数性质
坐标图像是抛物线，且为偶函数。
a0时，抛物线开口朝上；否则，朝下。
顶点是其对称轴和坐标图的交点，其坐标为(-b/2a,(4ac-b)/4a)
顶点的y值是一个常数，不会参与自变量的运算。
抛物线图例扩展：顶点的推导公式
y=ax+bx+c
=a(x+b/ax+c/a)
=a[x+b/ax+(b/2a)-(b/2a)+c/a]
=a[(x+b/2a)-(b/2a)+c/a]
=a(x+b/2a)+c-b/4a
=a(x+b/2a)+(4ac-b)/4a
由顶点的y值为常数可知：y=(4ac-b)/4a
因为a(x+b/2a)=0时，y为常数，解方程可得：x=-b/2a
顶点位置为(-b/2a,(4ac-b)/4a)
实例：绘制二次函数
四、指数函数
1.指数函数的一般式：y=pow(a,x),(x∈R,a0,a≠1)
y：幂，因变量
a：幂的底数，常数
x：幂的指数，自变量
2.指数函数性质
函数的值域为[0,∞]，即y0
函数图形与y轴交于(0,1)
a1时，函数为增函数
0a1时，函数为减函数
实例：绘制指数函数五、对数函数
1.对数函数的一般式为：y=logax,(a0,a≠1)
y：对数，因变量
a：底数，常数
x：真数，自变量
2.对数函数性质
x=0时，没有对数，因此x的取值范围是[0,∞]
x=1时，其对数为0，因为任何数的0次方都是1
a=x时，对数为1，即logaa=1
对数函数示例3.js里的对数Math.log(x)
Math.log(x)是自然对数。
自然对数是什么？
自然对数是以常数e为底数的对数
e是y=pow(x+1/x,x),x0的极限值
e是一个无限不循环小数，约等于2.…，它是一个超越数
在js里，如果我们想求以a为底，x的对数，那就得这么写：Math.log(x)/Math.log(a)
实例：绘制对数函数
实例：绘制对数函数六、幂函数
1.幂函数的一般式为：y=pow(x,a),(a∈R)
x：幂的底数，自变量
a：幂的指数，常数
函数图形会经过(1,1)点
x=0,a0时，函数无意义
a0时，函数图形会经过(0,0)点
a0时，函数图形为减函数
实例：绘制幂函数
实例：绘制幂函数总结
对于集合的学习，可以让我们更好的理解点、线、面、体的关系，从而对图形进行差集、交集、并集的操作。
一次函数、二次函数、指数函数、对数函数、幂函数的应用都很广泛，比如我们以后要对两点之间的距离、点到直线的距离运算等等。
函数的坐标图像还可以做补间动画的插值。比如tween.js使用了类似的原理。tween.js的插值图：
函数的坐标图像还可以做补间动画的插值