大家好, 今日在講 object rotation 前先介紹一下scale, scale 就是將object按數值放大 如果我想將x-axis 長度放大1.5倍...
喺第三日介紹過攝錄機的不同位置, 但現在的object只是一個一種顏色的cube, 難以分辨它的形狀同位置 何謂X, Y, Z axis?X axis +1係指...
剛開始學前端視覺特效經常是這樣： 在開始Three.js之前，得先解釋清楚三者關係。接下來我也會不斷解釋三者關聯。 三者關係 Three.js 上層的API...
Day1 - 從webGL的基礎開始?(一) 這裡是「Three.js學習日誌」的第1篇，本篇的主旨是藉由描述一些簡單的webGL基礎，來做為引導three....
Day0 - 為什麼想要寫這個主題? 這裡是「Three.js學習日誌」的第0篇，本篇的主旨在於講述本次參賽的想法 心理的嚮往 四年前我剛成為前端工程師的時...
依照 github 上範例建立完後，嘗試加入參數控制物理引擎的碰撞效果 Dat.gui Github一種輕量型的圖型用戶介面，可以在 Javascript...
在多種 3D 物理引擎裡，決定使用同樣基於 js 所開發，學習成本相對較低且對新手較友善的 Cannon.js 做為開發工具 Github 範例 Githu...
身為3D網頁視覺特效工程師，深知此坑水深，我自己時常掉入陷阱。因此希望能夠幫助大家往網頁特效邁進。 前端視覺特效可以做什麼？ 很多，最常見的用途是網頁品牌形象、...
要令到3D物件呈現喺瀏覽器上最主要有四個必要元素 場景(Scene) 物件(Object) 攝錄機(Camera) 渲染器 (Renderer) 場景 場景...
透過渲染而成的動畫效果 透過物體位置並每隔一段時間重新渲染畫面，來達到使物體像動畫般動起來的效果 // 原地走動動畫 function UsagiJump()...
Three.js提供了各種輔助工具幫助開發 ArrowHelper 用於可視化方向的3D箭頭ArrowHelper(dir : Vector3, origi...
尋日寫錯咗今日先第三日 首先,我的電腦配置:11th Gen Intel(R) Core(TM) i5-1135G716GB Ram512 GB Hard Di...
我相信睇得呢一篇文章嘅人都知Three.js是用來做什麼但Three.js的結構是怎樣? 認識Three.js 之前一定要知 OpenGL 同WebGL Op...
了解 Geometry (幾何體) 與 Material (材質) 後就可以開始組成物件了 建立物件 先創建頭部及耳朵幾何體，並設定大小 const hea...
在3D的世界中，所有物件都是由 Geometry(幾何體)＋ Material(材質) 所組成。 幾何體種類 幾何體跟材質一樣分很多種類如常見的 種類...
在 3D 的世界中，所有物件都是由 Geometry(幾何體)＋ Material(材質) 所組成。 材質屬性 材質屬性有非常多可控制的項目如常見的...
Fps FPS（frame per second），每秒顯示幀數，一般用來描述遊戲或影片每秒撥放多少影格，而人眼每秒可處理約 10-12 個圖像，因此在 12f...
建立完物體，今天來建立軌道控制器及文字 軌道控制器OrbitControls 有了軌道控制器就可以使用鼠標對場景進行操作，使相機圍繞目標進行軌道運動，如旋轉...
先跟著官網簡單的範例創建第一個3D場景，連接到 Day3 新增的按鈕 index.js 修改 index.js 新增當 day3 按鈕按下時指定呈現 day...
安裝Node.js Node.js官網: https://nodejs.org/en/安裝完後可以透過node --version指令檢查是否安裝成功 安裝Ex...
在今年天時地利人和的情況下，與朋友們湊在一起組隊「來啊 ! 打摳啊 !」，秉持著取之於網路，回饋於網路的精神，從 0 開始經過反閘，將自己所學做一次整理並記錄...
使用的是three.js組件畫線條；每秒畫一次，一直畫下去；要先裝好three.js <!DOCTYPE html> <html> &...
完成作品 先附上這次鐵人賽完成的 3D 射擊遊戲專案及原始碼，後面寫得比較趕，如果有找到任何 bug 歡迎告訴我。 遊戲 Demo Github 原始...
本系列文也即將接近尾聲，此篇會帶各位讀者瀏覽整個系列文的大綱涵蓋了哪些內容，並且最後會分享這兩個月以來的學習資源，提供對 Three.js 有興趣的讀者做更進...
今天是專案的最後一個 Part 啦！要來加入背景音效、爆炸音效、射擊音效，並做場景中的草地貼圖、磚塊貼圖與光源調整，另外最後會試著練習載入外部模型做個完整的收...
昨天完成了計分機制的實作，今天要來將整個遊戲的流程串起來，完成進入遊戲、開始遊戲、遊戲結束、再玩一次的流程，並且實作遊戲中關於時間倒數及結束後的分數統計。...
昨天確定了遊戲內容的細節後，今天要先來實作計分機制的部分，並會套用上之前爆炸的特效，以及調整子彈威力參數與一些細節的優化。 Photo by rawpi...
在前面專案規劃內容中，已經在昨天完成了人物模型及物理射擊兩大部分，終於要來到最後的整合階段了，但其中的遊戲內容當初並沒有深入設計，所以今天花了一整天在做企劃與...
今天終於要來實作本專案的靈魂了！沒錯！就是射擊效果，一款射擊遊戲不能發射子彈完全是沒有靈魂啊，而除了完成射擊效果外，還要來把昨天沒做完的苦力怕剛體化及比例調整...
今天要來將 Cannon.js 的物理效果導入到專案中，讓場景中的物體都具有物理剛體效果，並且會做專案整合的工程，將前面所有開發的功能補齊，方便後續的開發。...
Barry Lam
伍瑪斯
Mizok
Yingge170
ckchuang
iThome鐵人賽
看影片追技術