Day9 - 「點點到位」 - 幾何結構Geometry(三) 這裡是「Three.js學習日誌」的第9篇，本篇的主旨是要介紹Geometry的概念，還有一些...
Day8 - 「面面俱到」 - 幾何結構Geometry(二) 這裡是「Three.js學習日誌」的第8篇，本篇的主旨是要介紹Geometry的概念，還有一些...
圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...
Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一) 這裡是「Three.js學習日誌」的第7篇，本篇的主旨是要介紹Geometry的概念，...
three.js的光 圖片來源 有看過航海王的人，應該對這句話非常有印象：「你有被光速踢過嗎？」。 身為海軍三大將的黃猿，最能利用光速打敗對手。跟我們的視覺特...
因為已經有了夾娃娃機模型，今天將用不到的網格們刪除，並在加入一個物件供夾取 程式碼 設定物件位置 let piske_init_x = 1.5 let pi...
有了夾娃娃機的外觀，夾爪也要像夾娃娃機一樣可以前後左右移動，並在夾取後回到原位 程式碼 .ejs 先在 ejs 處設定前後左右移動按鈕 <table&...
基於 yting23 看不下去只有剛體的夾娃娃機台外型，熱心的用 blender 繪製了夾娃娃機的模型，今天就來匯入朋友的善意 程式碼 匯入夾娃娃機底座 f...
既然都有夾娃娃機的效果了，就來蓋個夾娃娃機台吧，今天先建立機台的剛體 建立機台夾層地板剛體與網格 let machineBottom = new CANNO...
今日嘗試根據建立好的夾爪剛體將利用 Tween.js 動畫將物件抓起，做到類似夾娃娃機的效果 程式碼 .ejs 在 ejs 處加入按鈕 <button...
圖片出處 我們都要有矢量（向量）操作能力 只是差別是，我們不需要像一方通行那樣，吸入必要的氧氣防止能力消失，我們學會了就可以操作！ 向量一般來說，是指一個同時...
它解決了什麼問題？ Three.js 是 WebGL 的高階封裝，讓開發者能夠專注在開發應用，而不用浪費太多心思在操作 WebGL。 WebGL OpenGL...
Day6 - 事前健身操 - 顏色/動畫循環/群組 這裡是「Three.js學習日誌」的第6篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作...
今日要講一講three.js 嘅 screen size, 之前一直用緊800x600 嘅 aspect ratio 方便之前測試再用以下的code來讀取wid...
Day5 - 事前健身操 - 向量與形變 這裡是「Three.js學習日誌」的第5篇，本篇的主旨是要介紹一些在Three.js中，一些常用的基礎操作，這系列的...
圖片來源 每個場景都有OrbitControl，就好像每個賽道都有彎道一樣。要是你沒有Orbitcontrol，那就像你沒有「圓弧的藝術家」或是「弧線的教授」...
圖片來源 當我們在場景空間裡面對物體旋轉時，它到底是怎麼旋轉的呢？又怎麼儲存旋轉資訊呢？這是因為Three.js召喚了替身——歐拉角與四元數！ 它們代替我們在...
這裡是「Three.js學習日誌」的第4篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來讓讀者對於Three.js有基本的認識，這...
今日嘗試建立夾取物件的夾爪剛體 程式碼 設定夾爪初始位置 let gripperR_init_x = 2 let gripperR_init_y = 4 let...
在之前修改的 cannon 範例裡提過剛體，剛體才是實際互動的物件，網格只是套上去的皮，大多數剛體的形狀不會與網格相同，今日先建立剛體並與網格組合 程式碼 設定...
在昨天透過 console.log 的輸出，可以觀察到 gltf 裡有關於 animations 的屬性該模型包含了 standing、sitting、shak...
透過 Sketchfab 下載完 3D 模型後就可以在 three.js 的世界裡匯入 先在 ejs 處匯入函式庫，要注意的是 GLTFLoader 的版本...
除了自行建立3D模型以外，也可以透過下載網路上製作好的 3D 模型匯入 three.js 的世界裡 Sketchfab 官網一套面向建築師、遊戲開發者、電影...
來到第九日,今日講一講mouse control, 即係用滑鼠去移動object嘅方法, 下圖就係今日要做嘅目標 第一我地係要諗點樣可以知道滑鼠喺螢幕上的位置...
圖片來源 「矩陣」是最強大的空間扭曲招數。 它比其他「空間忍數」：位移、縮放、旋轉這三個加起來都強！因為他一次就可以作掉這三個，而且解決了這三個的致命缺點——順...
Day3 - 進入Three.js的領域 這裡是「Three.js學習日誌」的第3篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來...
今日會延續昨天講的animation, 會用到gsap library喺 terminal 輸入 npm install –save gsap@3.5.1就會自...
由於之前淨色的object比較難睇, 現在會用wireframe: true 去令到圖形更加易理解 wireframe: true 而將第六日最後的一張圖改...
Day2 - 從webGL的基礎開始?(二) 這裡是「Three.js學習日誌」的第2篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
在HTML我們有X與Y。 但在Three.js的座標系中是三維空間：不僅有XY，還有Z。一切都複雜起來。 我會介紹3D的樹狀結構，這個不只是Three.js，在...
Mizok
伍瑪斯
Yingge170
Wei Ji
Barry Lam
iThome鐵人賽
看影片追技術