Three.js 學習筆記-三要素
一、Three.js 簡介
（一）前世今生
Three.js 是一款運行在瀏覽器中的 3D 引擎，由 Ricardo Cabello（Mr.doob）在 2010 年 4 月于 GitHub 首次發布 。其起源可追溯到本世紀初，代碼最初用 ActionScript 編寫，2009 年移植到 JavaScript。隨著 WebGL 出現，Paul Brunt 增加渲染功能，使 Three.js 設計為將繪制代碼作為模塊。Ricardo Cabello 負責 API 設計、創建 CanvasRenderer、SVGRenderer 并整合各種貢獻。Branislav Ulicny 主要貢獻在材質、著色器和后處理方面，Joshua Koo 創建了第一個面向 3D 文本的 Three.js 樣本 。經過多年發展，Three.js 不斷完善，已成為 Web 端創建 3D 場景和動畫的重要工具，廣泛應用于網頁游戲、3D 產品展示、虛擬場景構建等領域 。
（二）作用
Three.js 基于原生 WebGL 封裝，極大簡化了在瀏覽器中創建和顯示 3D 內容的過程。它提供了豐富的功能和接口，開發者無需深入掌握復雜的 WebGL 底層知識，就能輕松創建出精美的 3D 場景，包括各種幾何形狀、材質、光照效果、動畫等，從而為網頁帶來更加生動、沉浸式的用戶體驗 。
二、Three.js 三要素
（一）相機（Camera）
相機決定了我們以何種視角觀察 3D 場景，就如同現實生活中我們用眼睛看世界，眼睛的位置和觀察方向決定了我們看到的畫面。在 Three.js 中有多種相機類型，常用的是透視投影相機（PerspectiveCamera）和正投影相機（OrthographicCamera） 。
- 透視投影相機（PerspectiveCamera）
-
原理：模擬人眼觀察世界的方式，遵循近大遠小的規律。例如，當我們看一條筆直的公路，遠處的部分看起來會比近處的窄，這就是透視效果。
-
參數：
-
fov（視場角）：相機視錐體垂直方向視野角度，好比我們人眼能看到的垂直范圍，值越大，看到的范圍越廣，近大遠小效果越明顯。例如設置為 75 度，就確定了相機的視野范圍。 -
aspect（寬高比）：視錐體寬度和高度的比值，一般設置為渲染區域（如 canvas 畫布）的寬高比。比如畫布寬度為 800px，高度為 600px，寬高比就是 800/600 = 4/3 。 -
near（近裁面）：相機視錐體近截面相對相機的距離，可理解為人眼能看清的最近距離，距離相機小于這個值的物體不會被渲染。 -
far（遠裁面）：相機視錐體遠截面相對相機的距離，即人眼能看到的最遠距離，距離相機大于這個值的物體也不
-
)
)
)
