系列文章
用 Three.js 來當個創世神 (10)：專案實作#5 - 光影效果
今天將延續昨天的光源主題，在專案中實作光影效果，並透過移動點光源的動畫，讓光影效果的內容更有趣！ Photo by Kristine Weilert o...
用 Three.js 來當個創世神 (11)：專案實作#6 - 人物基本動畫
在昨天的移動點光源實作上，我們透過更改光源的位置來達到動畫的效果，今天讓我們深入動畫的操作並實際上透過讓苦力怕擺頭、走動、膨脹的動作來練習基本動畫。 P...
用 Three.js 來當個創世神 (12)：專案實作#7 - Tween.js 動畫實作
遊戲中的苦力怕行走機制是當玩家進入它的警戒範圍後，苦力怕會追著玩家跑，今天就讓我們利用 Tween.js 來實做這個部分，目標是做到能讓苦力怕追蹤鏡頭移動及轉...
用 Three.js 來當個創世神 (13)：粒子系統初探
粒子系統可以透過輕易地創建許多細小的物體，模擬各種粒子效果，如雪花、雨滴、星空、煙霧、火焰、煙火、爆炸等等，本篇文章讓我們來學習粒子系統的背景知識及簡單的練習...
用 Three.js 來當個創世神 (14)：粒子系統 - 雪花 Part.1
瞭解了基本的粒子系統如何建立後，今天要來練習實作粒子系統中常見的應用：雪花。以下將會透過建立粒子系統、載入貼圖、雪花飄落動畫來一步步做出華麗的粒子特效。...
用 Three.js 來當個創世神 (15)：粒子系統 - 雪花 Part.2
You know nothing, Jon Snow. 在實作粒子系統的動畫效果時，踩到了個大坑，本篇將會繼續完成前一天的雪花飄落動畫，並分享實作中遇到的問題...
用 Three.js 來當個創世神 (16)：專案實作#8 - 粒子特效場景
今天將利用前兩天製作的雪花特效，套用至專案中，除了調整邊界值外，還會試著更換粒子貼圖來達到不一樣場景的效果！ Photo by Fancycrave o...
用 Three.js 來當個創世神 (17)：粒子系統 - 爆炸
今天要利用前面練習過的粒子系統，學習如何在網頁上實作 3D 爆炸的特效，並會透過 dat.GUI 來觸發爆炸、改變爆炸粒子尺寸、相機參數來測試更合適的視覺效果...
用 Three.js 來當個創世神 (18)：專案實作#9 - 爆炸特效
昨天學會了如何利用粒子系統做爆炸特效，今天我們要來將特效套用至專案中，來實作苦力怕自爆的效果，並且利用更多層的爆炸、由黑到白不同的顏色，來模擬得更真實一些。...
用 Three.js 來當個創世神 (19)：3D 物理引擎初探
物理引擎是一套能用來模擬真實世界物理效果的系統，例如：碰撞偵測、加速度、重力、摩擦力、空氣阻力等，以下將會介紹有哪些可以用來輔助 Three.js 的物理引擎...