iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

用 Three.js 來當個創世神 系列

此系列文將從 Three.js 基本觀念切入,前面幾篇會簡單介紹如何用 Three.js 的基本元素在網頁上畫出 3D 場景,之後直接透過實作遊戲專案,在過程中一邊完成專案所需要的內容,一邊說明 Three.js 中各種基本元素的應用細節,讓後期的專案能以漸進完成的方式呈現,進而做出一款網頁 3D 遊戲。

DAY 1

用 Three.js 來當個創世神 (00):關於此系列文

此系列文將從 Three.js 基本觀念切入,前面幾篇會簡單介紹如何用 Three.js 的基本元素在網頁上畫出 3D 場景與物體,之後直接透過實作遊戲專案,...

2018-10-16 ‧ 由 ckchuang 分享
DAY 2

達標好文 用 Three.js 來當個創世神 (01):Three.js 簡介

Three.js 是一套基於 WebGL 開發出的 Javascript 函式庫,它提供了比 WebGL 更簡單的 Javascript API,讓開發者能夠...

2018-10-17 ‧ 由 ckchuang 分享
DAY 3

用 Three.js 來當個創世神 (02):Three.js 基本元素介紹

在開始動手寫 Three.js 之前,先來簡單了解一些 Three.js 中基本元素的概念:Scene、Camera、Object、Geometry、Mate...

2018-10-18 ‧ 由 ckchuang 分享
DAY 4

用 Three.js 來當個創世神 (03):Hello Three.js!

在程式語言的學習過程中,第一步當然就是先寫個「Hello world」了!本篇文章將手把手的透過簡單的範例,逐行分析程式碼,建立本系列的第一個 3D 場景及物...

2018-10-19 ‧ 由 ckchuang 分享
DAY 5

用 Three.js 來當個創世神 (04):專案實作#1 - 專案介紹及初步規劃

今天開始專案實作第一天,先來聊聊接下來的這整個專案要做些什麼吧! Photo by rawpixel on Unsplash 這是本系列第 04 篇...

2018-10-20 ‧ 由 ckchuang 分享
DAY 6

用 Three.js 來當個創世神 (05):專案實作#2 - 基本人物模型

昨天了解了整個專案的架構,首先就從基本的人物模型開始動手吧! Photo by Jeremy Thomas on Unsplash 這是本系列第 0...

2018-10-21 ‧ 由 ckchuang 分享
DAY 7

用 Three.js 來當個創世神 (06):專案實作#3 - OrbitControls、stats.js

今天主要是設定方面的內容,要加上的工具包含 OrbitControls 與 stats.js。一個是軌道控制器,透過拖移及縮放調整相機位置;另一個是畫面刷新頻...

2018-10-22 ‧ 由 ckchuang 分享
DAY 8

用 Three.js 來當個創世神 (07):材質(Material)

在準備幫專案的人物貼上皮膚前,今天先來了解一下材質的種類以及屬性吧! Photo by Patrick Tomasso on Unsplash 這是...

2018-10-23 ‧ 由 ckchuang 分享
DAY 9

用 Three.js 來當個創世神 (08):專案實作#4 - 人物材質與貼圖

在瞭解了材質的種類及屬性後,今天要透過專案實作,來幫前面所建立的苦力怕模型貼上材質與皮膚,讓人物的還原度更高一些! Photo by Manolo Ch...

2018-10-24 ‧ 由 ckchuang 分享
DAY 10

用 Three.js 來當個創世神 (09):光源(Light)

今天將介紹四種基礎光源:「環境光(AmbientLight)、點光源(PointLight)、聚光燈(SpotLight)、平行光(DirectionalLi...

2018-10-25 ‧ 由 ckchuang 分享