鐵人檔案
隨著科技越來越發達，繪圖引擎越來越先進，網頁的互動也增加了更多可能性。
當 3D 互動已經不再是瓶頸，webGL 逐漸成熟、甚至還有 webVR 正逐漸萌芽，身為工程師的我們也得趕快跟上腳步。
趁現在，讓我們來看看這些複雜卻又吸引人的技術吧！
今天是聖誕節，讓我們一起畫一棵簡單的聖誕樹吧！ 基本場景設定 我們設置一下基本的場景 const scene = new THREE.Scene(); cons...
要讓一個 3D 的場景更為逼真，除了材質之外，最重要的就是適當的光線了。 光線到達物體時，會因為物體的形狀反射部分的光線回來，所以才會有曲面的效果，並且依照材質...
[Day12] webGL 框架 - Three.js 簡介 three.js 是一個非常強大的 webGL 函式庫，將很多功能都封裝成了一個個物件，主要透過繼...
場景 將物體（模型）建置完畢後，如果要在螢幕上顯示，就必須先將物件加入場景。Three 的場景(Scene) 為一個物件，保存著當前的場景狀態。 我們可以使用...
前言 昨天介紹了 three.js 中的基礎 API。不知道各位對 three.js 用物件導向繼承的方式來使用習不習慣了，前面所提到的 API 會不斷出現在每...
這幾天我們介紹了three.js 的 API，今天就讓我們看看比較輕鬆一點的範例吧！以下是個人認為很不錯的 three.js 程式碼範例。 cube sla...
前幾天我們介紹了 three.js 中的光源，並且介紹了 three.js 中內建的光源系統。今天讓我們來深入一下這些 API 吧！ 將光源加入場景 three...
到目前為止，我們已經有了基礎了 three.js 知識，現在就讓我們一起來實作一些有用的效果吧！ three.js 能實作的特效非常多樣，隨便在網路上或是 c...
昨天我們已經實做出全景圖的雛型(Day18)，接下來加入使用者互動的部分： 滾動滑鼠時，可以做放大、縮小的效果：這部分可以用 camera 的 fov 參數來...
今天來介紹在 three.js 開發中常會遇到的小工具。 寫網頁的工程師們應該都會習慣打開 console 調整、或是列印參數。但是在 canvas 當中，要...
