Day22 - 使用Webpack 5打造Three.js的Boilerplate(三) 這裡是「Three.js學習日誌」的第22篇，這篇的內容是要講解如何...
上一篇，我們用最快的方式，透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣，其球體範圍...
Shader是什麼 我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...
本篇將透過鏡頭追蹤實作，使得我們能夠建立一個第三人稱是角，捕捉拓海的蹤影。 鏡頭追蹤與飄移基本上綜合前面好幾篇多種原理組成。 鏡頭是網頁特效中重要的戰場。網頁由...
Day20 - 使用Webpack 5打造Three.js的Boilerplate(一) 這裡是「Three.js學習日誌」的第20篇，這篇的內容是要來講解使...
Day21 - 使用Webpack 5打造Three.js的Boilerplate(二) 這裡是「Three.js學習日誌」的第21篇，這篇的內容是要講解We...
Day19 - Three.js與滑鼠互動操作(三) 這裡是「Three.js學習日誌」的第19篇，這篇的內容是要來講解Raycasting的概念。這系列的文...
鏡面特效能夠非常有效的讓畫面更加豐富。不僅讓物件更有真實感，也可以創造出空間感。 上一篇示範過如何做出鏡面反射。而本篇將介紹倒影特效。 上一篇提到鏡面反射的原理...
Day18 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第18篇，這一篇主要是接續上一篇的簡易OrbitControl實作，...
圖片來源 七原罪中的梅利奧達斯有一招叫做「全反擊」，基本上可以把所有攻擊全部彈回去。招數有夠猛。而我們這次所做的特效也是相當兇猛，基本上用上，整個質感就不一樣...
前端介面的呈現我們使用Vue+three.js。 Vue我們不選用vue-cli來建置專案，而是使用Vite，以求更好的性能。 然後再利用Vue 3D plug...
Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇，本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...
three.js 官方除了釋出相關函式庫外，也提供了線上的編輯工具，讓使用者運用圖形化介面開發，可以透過官網左上角的 editor 進入，或是點擊這裡 Edit...
前言 網頁視覺特效有一大塊領域在於GIS。GIS以視覺呈現地理資訊，視覺是不可或缺的元素。透過視覺特效，能夠更快速的釐清地理環境狀況。 例如Districgra...
Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇，這是Material章節的最後一篇，主旨是...
前一篇我們透過線段，實作出面來，然而光這樣不夠。畢竟我們在學3D視覺特效，不能只給出了個2D，否則就像當年包龍星他爹給的爛餅一樣。不過沒關係，本篇將實作出3D立...
Day14 - 金屬球範例試作(1) - Material解密(四) 這裡是「Three.js學習日誌」的第14篇，本篇的主旨是要透過一個簡單的範例操作，來一...
我們既然都釐清了線段原理，那就應該要實作線段。我們是逃不了線段的實際應用的。來人！餵公子吃餅！ 圖片來源 準備程式碼 首先，我們先透過three.js範本開一...
圖片來源 線段是什麼？ 點線面構成一切，而目前為止，我們都在花時間在點(Vector)跟面(Mesh)上。 線段由點產生，它也組成面，這之間需要轉換API。除...
Day13 - 「紋理&種類」- Material解密(三) 這裡是「Three.js學習日誌」的第13篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
成品 「飛雷神之術！」鏡頭跳轉的重要性 圖片來源 上一篇我們實作城市的定位，但用戶仍必須手動轉動地球。手動轉動地球體驗不是很好，而這對簡報、展示來說是一大傷...
Day12 - 「紋理&種類」- Material解密(二) 這裡是「Three.js學習日誌」的第12篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
成品 為什麼要做地球？ 回顧原因，它可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、航太科技、GIS畫面等等。這些對於前端視覺特...
Day11 - 「關於紋理」- Material解密(一) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹紋理與材質的關係，這系列的文章假設...
成品 看完這篇文章，你將能用three.js開發出地球。 如同前一篇所說，地球可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、...
做到而家覺得每次改完都要save再睇過成果會好麻煩, 而家用dat.GUI去喺網頁道改邊個參數內直接睇唔同形狀嘅變化其實網上面仲有好多不同種類的GUI, 而da...
Day10 - 最後補充 - 幾何結構Geometry(四) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹Geometry的概念，這是Ge...
成品 本篇我們將完成圖中的地球畫面，從介紹貼圖開始。 做一個地球可以幹嘛？——地球的應用 地球的應用：B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...
Build in Geometries - 喺本身three.js 個library到已經有好多build in geometries PlaneGeometr...
Mizok
伍瑪斯
Ivan
Yingge170
Barry Lam
iThome鐵人賽
看影片追技術