THREEJS Courses
激發興趣（引導與思辨）
Sparking Interest (Introduction and Critical Thinking)
- 前言
- Introduction
- 世界、眼睛與內心
- The World, Our Eyes, and Mind
- 顏色、空間與時間
- Color, Space, and Time
- 大腦如何建構空間與感受運動
- How the Brain Constructs Space and Perceives Motion
- WebGL：虛擬與真實之間的橋樑
- WebGL: Bridging Virtual and Reality
- Shader：像素的雕刻刀
- Shader: The Sculpting Knife of Pixels
相關數學基礎（圖形數學）
Mathematical Foundations (Graphics Math)
- 坐標系統與向量基礎（笛卡爾與齊次坐標）
- Coordinate Systems and Vector Basics (Cartesian and Homogeneous)
- 向量與矩陣：移動、旋轉與縮放
- Vectors and Matrices: Translation, Rotation, and Scaling
- 投影矩陣與透視投影原理
- Projection Matrices and Perspective Projection Principles
- 法向量與光照基礎
- Normal Vectors and Lighting Basics
- 曲線、曲面與動畫插值初探
- Curves, Surfaces, and Animation Interpolation
- 線性代數在圖形學中的直觀解釋
- Intuitive Linear Algebra in Graphics
WebGL 簡介
Introduction to WebGL
- WebGL 是什麼？
- What is WebGL?
- OpenGL 與 WebGL 的關係
- Relationship Between OpenGL and WebGL
- 頂點與片段著色器概念
- Vertex and Fragment Shader Concepts
- GLSL 編寫與調試基礎
- GLSL Writing and Debugging Basics
- 如何在 Canvas 上畫出三角形
- Drawing a Triangle on Canvas
- WebGL 的繪圖管線與狀態管理
- WebGL Rendering Pipeline and State Management
Three.js 基礎篇
Three.js Fundamentals
- 建立場景與渲染器
- Creating Scenes and Renderers
- 相機與控制器
- Cameras and Controls
- 幾何體與材質
- Geometries and Materials
- 光源與陰影
- Lights and Shadows
- 動畫與 requestAnimationFrame
- Animation and requestAnimationFrame
- 滑鼠互動與 Raycaster
- Mouse Interaction and Raycaster
- 載入模型與貼圖
- Loading Models and Textures