此系列文將從 Three.js 基本觀念切入,前面幾篇會簡單介紹如何用 Three.js 的基本元素在網頁上畫出 3D 場景,之後直接透過實作遊戲專案,在過程中一邊完成專案所需要的內容,一邊說明 Three.js 中各種基本元素的應用細節,讓後期的專案能以漸進完成的方式呈現,進而做出一款網頁 3D 遊戲。
此系列文將從 Three.js 基本觀念切入,前面幾篇會簡單介紹如何用 Three.js 的基本元素在網頁上畫出 3D 場景與物體,之後直接透過實作遊戲專案,...
Three.js 是一套基於 WebGL 開發出的 Javascript 函式庫,它提供了比 WebGL 更簡單的 Javascript API,讓開發者能夠...
在開始動手寫 Three.js 之前,先來簡單了解一些 Three.js 中基本元素的概念:Scene、Camera、Object、Geometry、Mate...
在程式語言的學習過程中,第一步當然就是先寫個「Hello world」了!本篇文章將手把手的透過簡單的範例,逐行分析程式碼,建立本系列的第一個 3D 場景及物...
今天開始專案實作第一天,先來聊聊接下來的這整個專案要做些什麼吧! Photo by rawpixel on Unsplash 這是本系列第 04 篇...
昨天了解了整個專案的架構,首先就從基本的人物模型開始動手吧! Photo by Jeremy Thomas on Unsplash 這是本系列第 0...
今天主要是設定方面的內容,要加上的工具包含 OrbitControls 與 stats.js。一個是軌道控制器,透過拖移及縮放調整相機位置;另一個是畫面刷新頻...
在準備幫專案的人物貼上皮膚前,今天先來了解一下材質的種類以及屬性吧! Photo by Patrick Tomasso on Unsplash 這是...
在瞭解了材質的種類及屬性後,今天要透過專案實作,來幫前面所建立的苦力怕模型貼上材質與皮膚,讓人物的還原度更高一些! Photo by Manolo Ch...
今天將介紹四種基礎光源:「環境光(AmbientLight)、點光源(PointLight)、聚光燈(SpotLight)、平行光(DirectionalLi...