threejs为啥不火（用three.js把高数可视化-开课吧Web前端教程）
threejs为啥不火（用three.js把高数可视化-开课吧Web前端教程）1. 安装webstorm 开发工具，若没有，vscode 亦可；课前准备高数所讲的知识都很基础、很重要。我开发过比较复杂的三维家具模块化的项目，高数的知识完全够用。很多人会顾虑高数的难度，其实它并不难。在高数课本里，有的地方，对于像我一样的笨小孩来说，有一定的跳跃性，而且逻辑不够清晰。所以，只要老师讲得足够好，再给你足够的时间去思考和练习，你就可以学会。至于，我为什么会选择three.js，这是因为three.js 很优秀，它经过了大家实践的验证。我看过它的源码，从其中可以学到很多东西，就比如图形树的架构、渲染引擎的搭建，还有必不可少的算法。
用three.js 玩转高数的目的是什么？
目的：让大家在开发计算机图形、动画项目的时候，具备更加扎实的功底。
计算机图形动画就像一只展翅的雄鹰，它右边的翅膀是艺术，左边的翅膀是算法。
无论是二维的canvas教程，还是三维的webgl教程，都要把算法讲明白了。这样大家在遇到复杂的、echarts之类的现有工具实现不了的、高度定制化的原生图形项目的时候，才不会不知所措，不会给公司埋坑。
高数所讲的知识都很基础、很重要。我开发过比较复杂的三维家具模块化的项目，高数的知识完全够用。
很多人会顾虑高数的难度，其实它并不难。在高数课本里，有的地方，对于像我一样的笨小孩来说，有一定的跳跃性，而且逻辑不够清晰。所以，只要老师讲得足够好，再给你足够的时间去思考和练习，你就可以学会。
至于，我为什么会选择three.js，这是因为three.js 很优秀，它经过了大家实践的验证。我看过它的源码，从其中可以学到很多东西，就比如图形树的架构、渲染引擎的搭建，还有必不可少的算法。
课前准备
1. 安装webstorm 开发工具，若没有，vscode 亦可；
2. 安装live-server，用于启服务，安装方法 npm i -g live-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 集合与元素的从属关系：
n a 属于B：a ∈ B
n a 不属于B： a ∉ B
l 不包含任何元素的集合叫空集 Ø 。类似于js里的空数组[ ]；
l 根据集合中元素的数量，可将集合分为有限集合、无限集合。
实例1：绘制立方体
要点：BoxBufferGeometry
若将立方体视之为集合，那么其中的点、线、面都是其元素。
立方体相对于它的6个面，是有限集合。
立方体集合示例
实例2：绘制直线
要点：LineBasicMaterial、Geometry、Line
直线由无数个点组成，直线相对其中的点而言就是无限集合。
绘制直线
3.集合与集合之间的关系
• A 是B 的子集
• A包含于B：A⊆B
• B包含A：B⊇A
• A 不是B 的子集
• A不包含于B：A⊈B
• B不包含A：B⊉A
• 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. 一次函数的特性：
• 坐标图为直线 。
• k>0 时，一次函数为增函数；反之，为减。
• b=0 时，一次函数过零点，基于原点对称。
• 一次函数在x 轴上的交点为(-b/k 0)，在y 轴上的交点为(0 b) 。
实例：绘制一次函数
要点：LineBasicMaterial、Geometry、Line
三、二次函数1. 二次函数定义：y=ax² bx c (a≠0) x∈R
2. 二次函数性质
• 坐标图像是抛物线，且为偶函数。
• a>0 时，抛物线开口朝上；否则，朝下。
• 顶点是其对称轴和坐标图的交点，其坐标为(-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)
实例：绘制二次函数
要点：LineBasicMaterial、Geometry、Line
四、指数函数1. 指数函数的一般式：y=pow(a x) (x∈R a>0 a≠1)
• y：幂，因变量
• a：幂的底数，常数
• x：幂的指数，自变量
2. 指数函数性质
• 函数的值域为[0 ∞]，即y>0
• 函数图形与y 轴交于(0 1)
• a>1 时，函数为增函数
• 0<a<1 时，函数为减函数
实例：绘制指数函数
要点：LineBasicMaterial、Geometry、Line
五、对数函数1. 对数函数的一般式为：y=logax (a>0 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) x>0 的极限值
• e是一个无限不循环小数，约等于2.718281828459…，它是一个超越数
• 在js里，如果我们想求以a为底，x 的对数，那就得这么写：Math.log(x)/Math.log(a)
实例：绘制对数函数
要点：LineBasicMaterial、Geometry、Line
实例：绘制对数函数
六、幂函数1. 幂函数的一般式为：y=pow(x a) (a∈R)
• y：幂，因变量
• x：幂的底数，自变量
• a：幂的指数，常数
2. 对数函数性质
• 函数图形会经过(1 1) 点
• x=0 a<0 时，函数无意义
• a>0 时，函数图形会经过(0 0) 点
• a<0 时，函数图形为减函数
实例：绘制幂函数
要点：LineBasicMaterial、Geometry、Line
实例：绘制幂函数
总结
对于集合的学习，可以让我们更好的理解点、线、面、体的关系，从而对图形进行差集、交集、并集的操作。
一次函数、二次函数、指数函数、对数函数、幂函数的应用都很广泛，比如我们以后要对两点之间的距离、点到直线的距离运算等等。
函数的坐标图像还可以做补间动画的插值。比如tween.js 使用了类似的原理。tween.js 的插值图：
函数的坐标图像还可以做补间动画的插值
以上是酷仔今日整理的“用three.js把高数可视化-开课吧Web前端教程”一文，希望为正在学习Web前端的同学提供参考。
特殊说明：以上内容资料由开课吧提供！
