學了一些網頁製作知識 一直很想試試看 three.js
在他的官網範例中就可以看到各種華麗又酷炫的效果
可以互動的 3D 動畫、特效都做得出來
再加上我對自己的網站也有點膩了
決定要製作以後就想說先來畫一張草稿
因為想做成很個性化的網站 所以考慮很久要加什麼元素進去
然後就拖了一個禮拜 最後還是隨便塗一塗就好了
接著就到 Blender 裡面試試看做出近景的建模
基本上就是用方塊隨便拉一拉
但是就做不太出來草圖裡那種畫面雜亂豐富的感覺
把模型匯出 gltf 格式以後就可以用 three.js 載入
原本以為要在程式裡面去做一些麻煩的設定（選材質、貼圖）
但沒想到都不需要
輸出的檔案就會包含材質、貼圖的資訊
做起來很輕鬆
不過打光的設定就比較麻煩了
three.js 畢竟是一個即時渲染的工具 沒辦法簡單就做出很精緻的光影
所以最後我決定用 Blender 先把光照的效果算成貼圖 輸入 three.js 再直接貼上去
在 Cycles 渲染引擎下面的 Bake 功能
一開始他要 Bake 幾十個小時
後來發現是忘記改 sample 數量
總之就把光影烘焙成了這樣一張貼圖
我把所有物件的 UV 都設到同一張圖上 這樣只要對所有物件貼這張圖就可以了
結果貼圖的位置一直跑掉 找很久才知道他好像預設會自動反轉貼圖
目前看起來外觀感覺還可以
不過 Bake 出來的貼圖的邊緣會黑黑的 不知道是不是 UV 品質的問題
three.js 可以把 html canvas 元素的畫面當作 texture 使用
我就做了一個可以即時顯示時間的時鐘
順便放了一些可以按的圖片（用 Raycast 來判斷）
目前坐下來是這樣 接下來想在場景裡新增更多物件
還有做一些對話框之類的功能
達人
