three.js的光 圖片來源 有看過航海王的人，應該對這句話非常有印象：「你有被光速踢過嗎？」。 身為海軍三大將的黃猿，最能利用光速打敗對手。跟我們的視覺特...
安裝Node.js Node.js官網: https://nodejs.org/en/安裝完後可以透過node --version指令檢查是否安裝成功 安裝Ex...
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
前言 網頁視覺特效有一大塊領域在於GIS。GIS以視覺呈現地理資訊，視覺是不可或缺的元素。透過視覺特效，能夠更快速的釐清地理環境狀況。 例如Districgra...
Day0 - 為什麼想要寫這個主題? 這裡是「Three.js學習日誌」的第0篇，本篇的主旨在於講述本次參賽的想法 心理的嚮往 四年前我剛成為前端工程師的時...
Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇，這是Material章節的最後一篇，主旨是...
Day26- 打造質感系3D聊天室- 部屬Websocket專案到Fly.io - three.js + socket.io(四) 這裡是「Three.js學...
大家好, 今日在講 object rotation 前先介紹一下scale, scale 就是將object按數值放大 如果我想將x-axis 長度放大1.5倍...
Three.js提供了各種輔助工具幫助開發 ArrowHelper 用於可視化方向的3D箭頭ArrowHelper(dir : Vector3, origi...
Day25 - 打造質感系3D聊天室 - three.js + socket.io (三) 這裡是「Three.js學習日誌」的第25篇，這篇是在講解使用th...
先跟著官網簡單的範例創建第一個3D場景，連接到 Day3 新增的按鈕 index.js 修改 index.js 新增當 day3 按鈕按下時指定呈現 day...
我們既然都釐清了線段原理，那就應該要實作線段。我們是逃不了線段的實際應用的。來人！餵公子吃餅！ 圖片來源 準備程式碼 首先，我們先透過three.js範本開一...
在前幾天的準備之後，我們終於要開始規劃APP的畫面了。首先，根據【Day - 1】所設立的目標，第一步就是要在首頁中央放置一個3D模型機器人。提到3D模型，我們...
成品 為什麼要做地球？ 回顧原因，它可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、航太科技、GIS畫面等等。這些對於前端視覺特...
到目前為止，我們都是用three.js製作shader。 但其實three.js並不是唯一的選項，我們的選項其實很多。為了幫助大家順利應用shader在thre...
前端介面的呈現我們使用Vue+three.js。 Vue我們不選用vue-cli來建置專案，而是使用Vite，以求更好的性能。 然後再利用Vue 3D plug...
在今年天時地利人和的情況下，與朋友們湊在一起組隊「來啊 ! 打摳啊 !」，秉持著取之於網路，回饋於網路的精神，從 0 開始經過反閘，將自己所學做一次整理並記錄...
尋日寫錯咗今日先第三日 首先,我的電腦配置:11th Gen Intel(R) Core(TM) i5-1135G716GB Ram512 GB Hard Di...
Shader是什麼 我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...
成品 本篇我們將完成圖中的地球畫面，從介紹貼圖開始。 做一個地球可以幹嘛？——地球的應用 地球的應用：B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...
Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇，本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...
Day12 - 「紋理&種類」- Material解密(二) 這裡是「Three.js學習日誌」的第12篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
來到第九日,今日講一講mouse control, 即係用滑鼠去移動object嘅方法, 下圖就係今日要做嘅目標 第一我地係要諗點樣可以知道滑鼠喺螢幕上的位置...
圖片來源 七原罪中的梅利奧達斯有一招叫做「全反擊」，基本上可以把所有攻擊全部彈回去。招數有夠猛。而我們這次所做的特效也是相當兇猛，基本上用上，整個質感就不一樣...
上一篇，我們用最快的方式，透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣，其球體範圍...
在3D的世界中，所有物件都是由 Geometry(幾何體)＋ Material(材質) 所組成。 幾何體種類 幾何體跟材質一樣分很多種類如常見的 種類...
本篇將透過鏡頭追蹤實作，使得我們能夠建立一個第三人稱是角，捕捉拓海的蹤影。 鏡頭追蹤與飄移基本上綜合前面好幾篇多種原理組成。 鏡頭是網頁特效中重要的戰場。網頁由...
圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...
這是對自己負責的比賽 這一路走來真的非常辛苦，而且很多時候是對自己負責任。 我當然可以每篇寫一點點，然後分成好幾篇寫，但我不要灌水。我希望可以把一直以來所學習的...
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...
伍瑪斯
Yingge170
Mizok
Barry Lam
momochenisme
Ivan
iThome鐵人賽
看影片追技術