系列文章
Day11: three.js 前端3D視覺特效開發實戰：全球戰情室—實作地球
成品 看完這篇文章，你將能用three.js開發出地球。 如同前一篇所說，地球可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、...
Day12: three.js 3D地球特效開發實戰：留下飛雷神術式吧！—經緯度座標轉換
成品 為什麼要做地球？ 回顧原因，它可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、航太科技、GIS畫面等等。這些對於前端視覺特...
Day13: three.js 3D地球特效開發實戰：飛雷神之術走跳地球！—鏡頭追蹤與浮動文字
成品 「飛雷神之術！」鏡頭跳轉的重要性 圖片來源 上一篇我們實作城市的定位，但用戶仍必須手動轉動地球。手動轉動地球體驗不是很好，而這對簡報、展示來說是一大傷...
Day14: three.js 3D圖表特效開發實戰：繪畫就跟佐為下棋一樣簡單：線段原理
圖片來源 線段是什麼？ 點線面構成一切，而目前為止，我們都在花時間在點(Vector)跟面(Mesh)上。 線段由點產生，它也組成面，這之間需要轉換API。除...
Day15: three.js 3D圖表特效開發實戰：來人！餵公子吃餅：圓餅圖
我們既然都釐清了線段原理，那就應該要實作線段。我們是逃不了線段的實際應用的。來人！餵公子吃餅！ 圖片來源 準備程式碼 首先，我們先透過three.js範本開一...
Day16: three.js 3D圖表特效開發實戰：你爹只給個爛餅，大不了還你3D爛餅：用粉圓體做立體圓餅圖
前一篇我們透過線段，實作出面來，然而光這樣不夠。畢竟我們在學3D視覺特效，不能只給出了個2D，否則就像當年包龍星他爹給的爛餅一樣。不過沒關係，本篇將實作出3D立...
Day17: three.js GIS系統開發實戰：鄉鎮市區GIS系統：SVG、GeoJson的應用
前言 網頁視覺特效有一大塊領域在於GIS。GIS以視覺呈現地理資訊，視覺是不可或缺的元素。透過視覺特效，能夠更快速的釐清地理環境狀況。 例如Districgra...
Day18: three.js GIS系統開發實戰：成為網頁特效的鹿丸！影子模仿術：陰影的終極原理
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...
Day19: three.js 前端3D鏡面特效開發實戰：梅利奧達斯的全反射！—智慧工廠檢視器
圖片來源 七原罪中的梅利奧達斯有一招叫做「全反擊」，基本上可以把所有攻擊全部彈回去。招數有夠猛。而我們這次所做的特效也是相當兇猛，基本上用上，整個質感就不一樣...
Day20: three.js 前端3D視覺特效開發實戰——智慧工廠：倒影特效
鏡面特效能夠非常有效的讓畫面更加豐富。不僅讓物件更有真實感，也可以創造出空間感。 上一篇示範過如何做出鏡面反射。而本篇將介紹倒影特效。 上一篇提到鏡面反射的原理...