用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前端的同學提供參考。

特殊說明：以上内容資料由開課吧提供！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!