系列文章
[Day11 聖誕節特輯] Three.js - 畫一棵幾何聖誕樹吧！
今天是聖誕節，讓我們一起畫一棵簡單的聖誕樹吧！ 基本場景設定 我們設置一下基本的場景 const scene = new THREE.Scene(); cons...
[Day12] 寫在 Three.js 之前 (2) - 光源淺談
要讓一個 3D 的場景更為逼真，除了材質之外，最重要的就是適當的光線了。 光線到達物體時，會因為物體的形狀反射部分的光線回來，所以才會有曲面的效果，並且依照材質...
[Da13] Three.js API 簡介
[Day12] webGL 框架 - Three.js 簡介 three.js 是一個非常強大的 webGL 函式庫，將很多功能都封裝成了一個個物件，主要透過繼...
Day14 Three.js 基礎篇
場景 將物體（模型）建置完畢後，如果要在螢幕上顯示，就必須先將物件加入場景。Three 的場景(Scene) 為一個物件，保存著當前的場景狀態。 我們可以使用...
[Day15] Three.js API - 進階篇
前言 昨天介紹了 three.js 中的基礎 API。不知道各位對 three.js 用物件導向繼承的方式來使用習不習慣了，前面所提到的 API 會不斷出現在每...
[Day16] three.js 番外篇 - 從程式碼當中學習
這幾天我們介紹了three.js 的 API，今天就讓我們看看比較輕鬆一點的範例吧！以下是個人認為很不錯的 three.js 程式碼範例。 cube sla...
[Day17] Three.js 光源 / 陰影
前幾天我們介紹了 three.js 中的光源，並且介紹了 three.js 中內建的光源系統。今天讓我們來深入一下這些 API 吧！ 將光源加入場景 three...
[Day18] Three.js 實戰(1) - 全景圖實作
到目前為止，我們已經有了基礎了 three.js 知識，現在就讓我們一起來實作一些有用的效果吧！ three.js 能實作的特效非常多樣，隨便在網路上或是 c...
[Day19] Three.js 實戰 (2) - 全景圖實作
昨天我們已經實做出全景圖的雛型(Day18)，接下來加入使用者互動的部分： 滾動滑鼠時，可以做放大、縮小的效果：這部分可以用 camera 的 fov 參數來...
[Day20] Three.js dat.GUI
今天來介紹在 three.js 開發中常會遇到的小工具。 寫網頁的工程師們應該都會習慣打開 console 調整、或是列印參數。但是在 canvas 當中，要...