Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一) 這裡是「Three.js學習日誌」的第7篇，本篇的主旨是要介紹Geometry的概念，...
three.js的光 圖片來源 有看過航海王的人，應該對這句話非常有印象：「你有被光速踢過嗎？」。 身為海軍三大將的黃猿，最能利用光速打敗對手。跟我們的視覺特...
在昨天透過 console.log 的輸出，可以觀察到 gltf 裡有關於 animations 的屬性該模型包含了 standing、sitting、shak...
今日會延續昨天講的animation, 會用到gsap library喺 terminal 輸入 npm install –save gsap@3.5.1就會自...
Day6 - 事前健身操 - 顏色/動畫循環/群組 這裡是「Three.js學習日誌」的第6篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作...
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
它解決了什麼問題？ Three.js 是 WebGL 的高階封裝，讓開發者能夠專注在開發應用，而不用浪費太多心思在操作 WebGL。 WebGL OpenGL...
由於之前淨色的object比較難睇, 現在會用wireframe: true 去令到圖形更加易理解 wireframe: true 而將第六日最後的一張圖改...
透過 Sketchfab 下載完 3D 模型後就可以在 three.js 的世界裡匯入 先在 ejs 處匯入函式庫，要注意的是 GLTFLoader 的版本...
Day5 - 事前健身操 - 向量與形變 這裡是「Three.js學習日誌」的第5篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作，這系列的...
圖片來源 每個場景都有OrbitControl，就好像每個賽道都有彎道一樣。要是你沒有Orbitcontrol，那就像你沒有「圓弧的藝術家」或是「弧線的教授」...
除了自行建立3D模型以外，也可以透過下載網路上製作好的 3D 模型匯入 three.js 的世界裡 Sketchfab 官網一套面向建築師、遊戲開發者、電影...
大家好, 今日在講 object rotation 前先介紹一下scale, scale 就是將object按數值放大 如果我想將x-axis 長度放大1.5倍...
圖片來源 當我們在場景空間裡面對物體旋轉時，它到底是怎麼旋轉的呢？又怎麼儲存旋轉資訊呢？這是因為Three.js召喚了替身——歐拉角與四元數！ 它們代替我們在...
這裡是「Three.js學習日誌」的第4篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來讓讀者對於Three.js有基本的認識，這...
喺第三日介紹過攝錄機的不同位置, 但現在的object只是一個一種顏色的cube, 難以分辨它的形狀同位置 何謂X, Y, Z axis?X axis +1係指...
Day3 - 進入Three.js的領域 這裡是「Three.js學習日誌」的第3篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來...
圖片來源 「矩陣」是最強大的空間扭曲招數。 它比其他「空間忍數」：位移、縮放、旋轉這三個加起來都強！因為他一次就可以作掉這三個，而且解決了這三個的致命缺點——順...
依照 github 上範例建立完後，嘗試加入參數控制物理引擎的碰撞效果 Dat.gui Github一種輕量型的圖型用戶介面，可以在 Javascript...
Day2 - 從webGL的基礎開始?(二) 這裡是「Three.js學習日誌」的第2篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
在HTML我們有X與Y。 但在Three.js的座標系中是三維空間：不僅有XY，還有Z。一切都複雜起來。 我會介紹3D的樹狀結構，這個不只是Three.js，在...
在多種 3D 物理引擎裡，決定使用同樣基於 js 所開發，學習成本相對較低且對新手較友善的 Cannon.js 做為開發工具 Github 範例 Githu...
尋日寫錯咗今日先第三日 首先,我的電腦配置:11th Gen Intel(R) Core(TM) i5-1135G716GB Ram512 GB Hard Di...
Day1 - 從webGL的基礎開始?(一) 這裡是「Three.js學習日誌」的第1篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
剛開始學前端視覺特效經常是這樣： 在開始Three.js之前，得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。 三者關係 Three.js 上層的API...
要令到3D物件呈現喺瀏覽器上最主要有四個必要元素 場景(Scene) 物件(Object) 攝錄機(Camera) 渲染器 (Renderer) 場景 場景...
Day0 - 為什麼想要寫這個主題? 這裡是「Three.js學習日誌」的第0篇，本篇的主旨在於講述本次參賽的想法 心理的嚮往 四年前我剛成為前端工程師的時...
身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼？ 很多，最常見的用途是網頁品牌形象、...
透過渲染而成的動畫效果 透過物體位置並每隔一段時間重新渲染畫面，來達到使物體像動畫般動起來的效果 // 原地走動動畫 function UsagiJump()...
我相信睇得呢一篇文章嘅人都知Three.js是用來做什麼但Three.js的結構是怎樣? 認識Three.js 之前一定要知 OpenGL 同WebGL Op...
Mizok
伍瑪斯
Yingge170
Barry Lam
Wei Ji
iThome鐵人賽
看影片追技術