今日嘗試根據建立好的夾爪剛體將利用 Tween.js 動畫將物件抓起，做到類似夾娃娃機的效果 程式碼 .ejs 在 ejs 處加入按鈕 <button...
這裡是「Three.js學習日誌」的第4篇，本篇的主旨是透過試做一個Three.js的Hello World案例，來讓讀者對於Three.js有基本的認識，這...
Day24 - 打造質感系3D聊天室 - three.js + socket.io(二) 這裡是「Three.js學習日誌」的第24篇，這篇是在講解使用thr...
Day23 - 打造質感系3D聊天室 - three.js + socket.io(一) 這裡是「Three.js學習日誌」的第23篇，這篇是在講解使用thr...
今日會延續昨天講的animation, 會用到gsap library喺 terminal 輸入 npm install –save gsap@3.5.1就會自...
透過渲染而成的動畫效果 透過物體位置並每隔一段時間重新渲染畫面，來達到使物體像動畫般動起來的效果 // 原地走動動畫 function UsagiJump()...
Day7 - 「就像在玩摺紙一樣」 - 幾何結構Geometry(一) 這裡是「Three.js學習日誌」的第7篇，本篇的主旨是要介紹Geometry的概念，...
Day13 - 「紋理&種類」- Material解密(三) 這裡是「Three.js學習日誌」的第13篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
在多種 3D 物理引擎裡，決定使用同樣基於 js 所開發，學習成本相對較低且對新手較友善的 Cannon.js 做為開發工具 Github 範例 Githu...
做到而家覺得每次改完都要save再睇過成果會好麻煩, 而家用dat.GUI去喺網頁道改邊個參數內直接睇唔同形狀嘅變化其實網上面仲有好多不同種類的GUI, 而da...
Day14 - 金屬球範例試作(1) - Material解密(四) 這裡是「Three.js學習日誌」的第14篇，本篇的主旨是要透過一個簡單的範例操作，來一...
Day8 - 「面面俱到」 - 幾何結構Geometry(二) 這裡是「Three.js學習日誌」的第8篇，本篇的主旨是要介紹Geometry的概念，還有一些...
因為已經有了夾娃娃機模型，今天將用不到的網格們刪除，並在加入一個物件供夾取 程式碼 設定物件位置 let piske_init_x = 1.5 let pi...
Day22 - 使用Webpack 5打造Three.js的Boilerplate(三) 這裡是「Three.js學習日誌」的第22篇，這篇的內容是要講解如何...
Day20 - 使用Webpack 5打造Three.js的Boilerplate(一) 這裡是「Three.js學習日誌」的第20篇，這篇的內容是要來講解使...
在之前修改的 cannon 範例裡提過剛體，剛體才是實際互動的物件，網格只是套上去的皮，大多數剛體的形狀不會與網格相同，今日先建立剛體並與網格組合 程式碼 設定...
有了夾娃娃機的外觀，夾爪也要像夾娃娃機一樣可以前後左右移動，並在夾取後回到原位 程式碼 .ejs 先在 ejs 處設定前後左右移動按鈕 <table&...
依照 github 上範例建立完後，嘗試加入參數控制物理引擎的碰撞效果 Dat.gui Github一種輕量型的圖型用戶介面，可以在 Javascript...
Day10 - 最後補充 - 幾何結構Geometry(四) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹Geometry的概念，這是Ge...
由於之前淨色的object比較難睇, 現在會用wireframe: true 去令到圖形更加易理解 wireframe: true 而將第六日最後的一張圖改...
今日要講一講three.js 嘅 screen size, 之前一直用緊800x600 嘅 aspect ratio 方便之前測試再用以下的code來讀取wid...
前言 又過了幾個禮拜，Caco我從零基礎開始學習Three，我必須承認，頭好痛呀!!在2D平面畫一條線，到了3D要多複雜有多複雜，如果你跟我一樣缺乏建模的知識，...
Yingge170
Mizok
Barry Lam
iThome鐵人賽
看影片追技術