[meetup紀錄] 用 Three.js 來當個創世神 19/07/23
感謝 Dez 教導大家如何用 Three.js 來高度還原阿姆斯特朗旋風噴射阿姆斯特朗砲。
場景基本元素
● 基本的3D環境需要有Scene(場景), Object(模型物件), Camera(攝影機), Light(光源), Renderer(渲染器)。
● Scene為3D基本檔案, 與網頁需要html一樣, 定義基本3D空間。其他所有物件皆包裹在Scene當中。
● Camera提供viewport給User, 定義呈現渲染範圍。
● Light為Camera提供光線, 跟真實世界一樣, 需要有光才能映射物體。
● Renderer將Camera拍攝的viewport範圍給渲染出來。
座標系
Three.js 為右手座標系 (沒記錯話應該跟Maya一樣, 3ds Max與Maya相反)
Camera (攝影機)
● 分為 Orthographic(正投影), Perspective(透視)。
● Orthographic 可快速理解為無透視, 也就是不會產生透視(沒有消失點)的攝影機。一般會在建模時, 用來觀察Top View與Side View時使用。
● 3D Camera比照現實的攝影學, 焦距(focal length) 50mm 為標準鏡頭, 一般3D軟體會抓 45mm ~ 60mm 左右作為預設, 焦距越小為廣角鏡頭, 越大為望遠鏡頭。人類雙眼的焦距大家都不一樣, 平均略為 35mm。
Object (模型物件)
● Three.js 提供 Mesh(多邊形), Point(點雲) 兩種Obj。
● Mesh的最小單位為 Triangle (三角面)。面數越多, 也就越圓滑。
● 有自帶一些基本的 Geometry (幾何體), 諸如Box(正方體), Sphere(球體), Plane(面片)......等
● 提供了 Material(材質) 與 Textures (紋理貼圖) 屬性, 來進一步的繪製物體。
● 有 Lambert, Phong 等常見的基本材質球。
● 可以從其他3D軟體建好模型, 再匯入, 轉成 Three.js 格式。
Lighting (打光)
● Three.js 提供了 AmbientLight(環境光), PointLight(點光), SpotLight(聚光燈), DirectionalLight (方向光), HemisphereLight(半球光)......等, 豐富的光源。
● Three.js 擁有不受光源影響的Material, 分別為 Basic 與 Normal。
(Basic從說明聽起來, 很像是Constant Shader, 是一種沒有Ambient參數的材質球。)
Rendering (渲染)
● 除了 WebGL 之外, 原本有提供 CanvasRenderer, 現在已移除。
● 可以透過渲染器調整Backgound, Shadow, Size......等參數。
Particle (粒子系統)
● Three.js 也提供粒子發射器, 用來製作一些特殊效果。像是雪花, 煙霧, 火焰等。
● 透過 Three.Points 來管理粒子系統。
一些基本函式
● init() - 初始化
● render() - 渲染
● TextureLoader() - 讀入貼圖
● animate() - 動畫
