引言 隨著電子商務的快速發展，消費者對在線購物體驗的期望不斷提高。虛擬試穿技術作為連接線上購物與實體店體驗的橋樑，正在徹底改變消費者購買服裝、美妝和配飾的方式。...
引言 今天花了一整天時間研究 Cannon 引擎，試圖將主題 C 中粒子系統從二維提升到三維，不過，由於效能方面一直無法取得突破，並未達成預期目標。本文純粹分享...
引言 昨天我們完成了資料結構的設計，並響應式數據擴充動畫物件，讓動畫執行時能夠呼叫 updateVertices，今天我們將把它完成， 建議先看過這三文章：...
引言 昨天我們學會了頂點數據的動態更新，通過動態創建和局部更新頂點屬性，來優化了渲染效能。接下來就讓我們結合排序演算法，實作三維場景中的動畫吧！ 建議先看過這兩...
引言 昨天我們透過計算向量和頂點，完成了 3D 的頻譜圖形，接下來我們可以嘗試結合主題 C 的排序演算法，把 2D 的視覺化帶到 3D 場景。不過，在那之前，讓...
引言 在處理 3D 圖形的渲染時，「頂點」是一個至關重要的概念。頂點代表著 3D 空間中的一個點，它是所有幾何形狀的基本組成單位。無論是建立立方體、球體，還是更...
引言 在 3D 圖形渲染和資料視覺化中，效能是關鍵問題之一。隨著資料量的增大，若繼續使用高階語言提供的內建陣列和資料結構，雖然靈活方便，通常會造成效能瓶頸。為了...
引言 在上一個主題中，我們用原生 JS 完成了基本的粒子系統和排序演算法的視覺化，然而，造輪子還是有一定的局限性，尤其是更複雜的圖形如 3D 的投影和座標轉換，...
延續前一天的成果，我們已經畫了一個簡單的場景、新增了動畫，但有沒有覺得少了些什麼？ 假設今天我們在看電影或玩遊戲，鏡位都只有一個，豈不是很無聊～所以我們今天就要...
回顧前一篇 昨天有跟著做的人可能會發現，怎麼寫出來的程式沒有畫面 XDD 可能經過一番掙扎後，才發現需要多加了一行 camera.position.z = 5...
上一篇介紹了 Three.js、render、還有 shader 的基本概念，今天我們馬上來把手弄髒吧！ 在學習任何語言都會有一個 Hello, World!...
看過來看過來！這邊的內容 (希望會) 很有趣 大家好～ 我最近即將來到我碩士學業的尾聲，雖然說念的是相關科系，並順利的在某 U 遊戲公司實習，但總覺得自己的創意...
前言 又過了幾個禮拜，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...
本篇內容 vertexNormal 是什麼？ 兩個Shader之間的傳值方式 WebGLProgram 添加變數的特性 vertexNormal 從哪裡來？...
Day26- 打造質感系3D聊天室- 部屬Websocket專案到Fly.io - three.js + socket.io(四) 這裡是「Three.js學...
下面我將介紹如何透過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...
到目前為止，我們都是用three.js製作shader。 但其實three.js並不是唯一的選項，我們的選項其實很多。為了幫助大家順利應用shader在thre...
前一篇我們初步修改Shader，並且介紹GLSL的型別、函式、程式進入點、程式最終任務。 本篇將繼續介紹： 實作即時變化的環境光 實作即時變化的環境光：回顧...
Day23 - 打造質感系3D聊天室 - three.js + socket.io(一) 這裡是「Three.js學習日誌」的第23篇，這篇是在講解使用thr...
jerrythepotato
miya850604
momochenisme
伍瑪斯
Mizok
iThome鐵人賽
看影片追技術