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