引言 在現代的網頁應用中，滑鼠和觸控的互動是增強用戶體驗的關鍵因素。無論是拖曳、縮放，還是手勢操作，都能讓網頁更加生動且易於操作。這篇文章將探討如何通過滑鼠和觸...
引言 昨天我們完成了茱莉亞合集的渲染，能夠根據滑鼠的位置改變常數 C，從而渲染不同的圖形，今天我們將探討另一個經典分形——曼德柏羅集，這個集合將初始值設為 0，...
引言 透過前兩天的範例，我們已經理解了頂點著色器和片段著色器的分工模式，頂點著色器負責處理頂點的空間定位，而片段著色器則專注於每個像素的渲染工作。接下來，我們將...
引言 接下來，我們來介紹如何用頂點著色器和片段著色器渲染圖形，程式碼的部分，只要是 glsl 我都會用截圖的形式。 頂點著色器 在使用著色器時，會用到兩種變數，...
引言 一直以來，我們在繪圖的時候要不管是用 2D 的 Canvas API 描繪形狀，或是用 3D 的 three.js 的幾何頂點描繪三角形片段，我們都離底層...
引言 昨天我們透過計算向量和頂點，完成了 3D 的頻譜圖形，接下來我們可以嘗試結合主題 C 的排序演算法，把 2D 的視覺化帶到 3D 場景。不過，在那之前，讓...
引言 在處理 3D 圖形的渲染時，「頂點」是一個至關重要的概念。頂點代表著 3D 空間中的一個點，它是所有幾何形狀的基本組成單位。無論是建立立方體、球體，還是更...
</body> <script> var camera, scene, renderer, geometry, materi...
Day29 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈 這裡是「Three.js學習日誌」的第29篇，這篇主要在講解如何把...
本篇內容 一、全視角的內光暈 二、內光暈在地球的應用 成品 一、全視角的內光暈 前一篇我們完成了具有內光暈的球體。 但是最大的問題，就是當鏡頭轉向時，會...
Day28 - 跟著甜甜圈大師~ 使用three.js + blender 一起製造甜甜圈 這裡是「Three.js學習日誌」的第27篇，這篇主要在講解如何把...
Shader是前端視覺特效的重要戰場，而本篇所介紹的shader，不僅只是說明怎麼辦到，還要解釋期原理，並且帶出我們在鐵人賽一開始所打下的重要基礎。 Shade...
下面我將介紹如何透過Shader製作一個光暈。 分三個階段： 用three.js製作Shader材質 在vertex shader加上vertexNormal...
Day25 - 打造質感系3D聊天室 - three.js + socket.io (三) 這裡是「Three.js學習日誌」的第25篇，這篇是在講解使用th...
Day24 - 打造質感系3D聊天室 - three.js + socket.io(二) 這裡是「Three.js學習日誌」的第24篇，這篇是在講解使用thr...
Day23 - 打造質感系3D聊天室 - three.js + socket.io(一) 這裡是「Three.js學習日誌」的第23篇，這篇是在講解使用thr...
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實作，...
Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇，本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...
陰影集合了3D視覺特效中相當核心、基礎、深奧的一面。它很好實作但又不好抓Bug，且時不時出現「怪怪的」地方。本篇將介紹陰影，他的強大就像鹿丸的影子模仿數一樣。閱...
Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇，這是Material章節的最後一篇，主旨是...
Day14 - 金屬球範例試作(1) - Material解密(四) 這裡是「Three.js學習日誌」的第14篇，本篇的主旨是要透過一個簡單的範例操作，來一...
Day13 - 「紋理&種類」- Material解密(三) 這裡是「Three.js學習日誌」的第13篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
Day12 - 「紋理&種類」- Material解密(二) 這裡是「Three.js學習日誌」的第12篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
Day11 - 「關於紋理」- Material解密(一) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹紋理與材質的關係，這系列的文章假設...
Day10 - 最後補充 - 幾何結構Geometry(四) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹Geometry的概念，這是Ge...
Day9 - 「點點到位」 - 幾何結構Geometry(三) 這裡是「Three.js學習日誌」的第9篇，本篇的主旨是要介紹Geometry的概念，還有一些...
jerrythepotato
Mizok
伍瑪斯
iThome鐵人賽
看影片追技術