前言 又過了幾個禮拜，Caco我從零基礎開始學習Three，我必須承認，頭好痛呀!!在2D平面畫一條線，到了3D要多複雜有多複雜，如果你跟我一樣缺乏建模的知識，...
在前幾天的準備之後，我們終於要開始規劃APP的畫面了。首先，根據【Day - 1】所設立的目標，第一步就是要在首頁中央放置一個3D模型機器人。提到3D模型，我們...
</body> <script> var camera, scene, renderer, geometry, materi...
這是對自己負責的比賽 這一路走來真的非常辛苦，而且很多時候是對自己負責任。 我當然可以每篇寫一點點，然後分成好幾篇寫，但我不要灌水。我希望可以把一直以來所學習的...
Day29 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈 這裡是「Three.js學習日誌」的第29篇，這篇主要在講解如何把...
有時候我們會需要給一個物件邊框。無論是要讓物件在背景中突出、點選物件時有選中的感覺，或是在綠幕上有比較好裁切，物件邊框都能達到我們所需要的需求。 本篇介紹邊框，...
Day28 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈 這裡是「Three.js學習日誌」的第27篇，這篇主要在講解如何把...
本篇內容 一、全視角的內光暈 二、內光暈在地球的應用 成品 一、全視角的內光暈 前一篇我們完成了具有內光暈的球體。 但是最大的問題，就是當鏡頭轉向時，會...
Day27 - 打造質感系3D聊天室 - three.js + socket.io(五) 這裡是「Three.js學習日誌」的第27篇，這篇是「打造質感系3D...
Shader是前端視覺特效的重要戰場，而本篇所介紹的shader，不僅只是說明怎麼辦到，還要解釋期原理，並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...
Day26- 打造質感系3D聊天室- 部屬Websocket專案到Fly.io - three.js + socket.io(四) 這裡是「Three.js學...
本篇內容 vertexNormal 是什麼？ 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來？...
下面我將介紹如何透過Shader製作一個光暈。 分三個階段： 用three.js製作Shader材質 在vertex shader加上vertexNormal...
Day25 - 打造質感系3D聊天室 - three.js + socket.io (三) 這裡是「Three.js學習日誌」的第25篇，這篇是在講解使用th...
到目前為止，我們都是用three.js製作shader。 但其實three.js並不是唯一的選項，我們的選項其實很多。為了幫助大家順利應用shader在thre...
Day24 - 打造質感系3D聊天室 - three.js + socket.io(二) 這裡是「Three.js學習日誌」的第24篇，這篇是在講解使用thr...
前一篇我們初步修改Shader，並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹： 實作即時變化的環境光 實作即時變化的環境光：回顧...
Day23 - 打造質感系3D聊天室 - three.js + socket.io(一) 這裡是「Three.js學習日誌」的第23篇，這篇是在講解使用thr...
Day22 - 使用Webpack 5打造Three.js的Boilerplate(三) 這裡是「Three.js學習日誌」的第22篇，這篇的內容是要講解如何...
上一篇，我們用最快的方式，透過shader製作了球體。基本上這個球體就跟MeshBasicMaterial({color: 0x4c99ff})一樣，其球體範圍...
Day21 - 使用Webpack 5打造Three.js的Boilerplate(二) 這裡是「Three.js學習日誌」的第21篇，這篇的內容是要講解We...
Shader是什麼 我們所稱呼的Shader，其實是Fragment Shader以及Vertex Shader的合稱。這兩個出現在Program上，使得我們最...
本篇將透過鏡頭追蹤實作，使得我們能夠建立一個第三人稱是角，捕捉拓海的蹤影。 鏡頭追蹤與飄移基本上綜合前面好幾篇多種原理組成。 鏡頭是網頁特效中重要的戰場。網頁由...
Day20 - 使用Webpack 5打造Three.js的Boilerplate(一) 這裡是「Three.js學習日誌」的第20篇，這篇的內容是要來講解使...
Day19 - Three.js與滑鼠互動操作(三) 這裡是「Three.js學習日誌」的第19篇，這篇的內容是要來講解Raycasting的概念。這系列的文...
鏡面特效能夠非常有效的讓畫面更加豐富。不僅讓物件更有真實感，也可以創造出空間感。 上一篇示範過如何做出鏡面反射。而本篇將介紹倒影特效。 上一篇提到鏡面反射的原理...
Day18 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第18篇，這一篇主要是接續上一篇的簡易OrbitControl實作，...
圖片來源 七原罪中的梅利奧達斯有一招叫做「全反擊」，基本上可以把所有攻擊全部彈回去。招數有夠猛。而我們這次所做的特效也是相當兇猛，基本上用上，整個質感就不一樣...
前端介面的呈現我們使用Vue+three.js。 Vue我們不選用vue-cli來建置專案，而是使用Vite，以求更好的性能。 然後再利用Vue 3D plug...
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...
momochenisme
伍瑪斯
Mizok
Ivan
iThome鐵人賽
看影片追技術