3D Exhibition

Inspired from Codrops – Experimental 3D Room Exhibition Layout, but added further more functions! Now you can click every single image to get closer to it, and also available to read description and story behind photos.

Origin post from Codrops is use 3D room as background only, but today I make it more joyful to play around. By separating the .content into .content-top and .content-bottom, we are now able to click on images behind scene! Then, I reuse the .info element with dynamically loading HTML content, so every picture can get its own information written side by side.

Also, I simplify navigation arrows animation to make it less distraction from focusing at gallery, and add color transition to menu icons so get more natural behavior.

On mobile phone, you can even tilt the device to change viewing perspective of room to get more closer to photo you are interested.

Hanabi

練習了JS對Canvas的操作,並且利用requestAnimationFrame以利瀏覽器以最大效能渲染煙火點。每一個產生的煙火約有500個煙火點,利用不斷堆疊的透明黑色,製造出殘影的效果。透過對煙火物件Property的改變,可以輕易達到改變顏色的效果。

在不同的參數設定下,意外產生出規律圖形。有一個如梅花般的效果,於是就保留下來了,有空會在新增更多的種類,並且為顏色做最佳化,有些色彩實在不像是煙火XD

玩法:

  1. 選擇煙火種類,可用鍵盤數字選擇
  2. 用滑鼠左鍵綻放你的天空

Go to page

 

待更新項目:

  • 將陸續增加煙火種類,並且預訂新增背景。

Solar System

1969年阿姆斯壯搭乘美國阿波羅11號登陸月球,現在,你可以透過手機裡的瀏覽器,前往太陽系的每一個角落。點擊星球,就能夠飛往該行星,以當地視角,一覽不同的宇宙風光,顛覆你對世界的想像。針對地球,甚至看得到燈火通明的夜晚!我們不必成為太空人,就能上太空看地球。

利用了開學前的寒假,全力投入的結晶,研究Three.js的物體包覆,以及Camera 的使用,搭配Raycaster已獲取滑鼠在3D視圖中的座標向量所指到的目標等。資料方面則收集了來自NASA官網的行星資訊,從Planet Pixel Emporium下載到大量高品質的地圖素材等,練習使用Require.js,另外由於圖檔較大,在預載之後用到了Microcache.js來做緩存,並且自行寫了函式僅在當下星球使用高畫質圖檔,以減緩瀏覽器渲染的負擔,使畫面更為流暢。

將陸續新增各個行星的資訊頁面,以提供更多精彩的行星故事。

Go to page