Day17 - Three.js與滑鼠互動操作(一) 這裡是「Three.js學習日誌」的第17篇，本篇主旨是在講解要怎麼讓Three.js與滑鼠的動作相聯繫...
three.js 官方除了釋出相關函式庫外，也提供了線上的編輯工具，讓使用者運用圖形化介面開發，可以透過官網左上角的 editor 進入，或是點擊這裡 Edit...
前言 網頁視覺特效有一大塊領域在於GIS。GIS以視覺呈現地理資訊，視覺是不可或缺的元素。透過視覺特效，能夠更快速的釐清地理環境狀況。 例如Districgra...
Day16 - 金屬球範例試作(3) - Material解密(六) 這裡是「Three.js學習日誌」的第16篇，這是Material章節的最後一篇，主旨是...
前一篇我們透過線段，實作出面來，然而光這樣不夠。畢竟我們在學3D視覺特效，不能只給出了個2D，否則就像當年包龍星他爹給的爛餅一樣。不過沒關係，本篇將實作出3D立...
Day14 - 金屬球範例試作(1) - Material解密(四) 這裡是「Three.js學習日誌」的第14篇，本篇的主旨是要透過一個簡單的範例操作，來一...
我們既然都釐清了線段原理，那就應該要實作線段。我們是逃不了線段的實際應用的。來人！餵公子吃餅！ 圖片來源 準備程式碼 首先，我們先透過three.js範本開一...
因為已經有了夾娃娃機模型，今天將用不到的網格們刪除，並在加入一個物件供夾取 程式碼 設定物件位置 let piske_init_x = 1.5 let pi...
Day13 - 「紋理&種類」- Material解密(三) 這裡是「Three.js學習日誌」的第13篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
圖片來源 線段是什麼？ 點線面構成一切，而目前為止，我們都在花時間在點(Vector)跟面(Mesh)上。 線段由點產生，它也組成面，這之間需要轉換API。除...
有了夾娃娃機的外觀，夾爪也要像夾娃娃機一樣可以前後左右移動，並在夾取後回到原位 程式碼 .ejs 先在 ejs 處設定前後左右移動按鈕 <table&...
Day12 - 「紋理&種類」- Material解密(二) 這裡是「Three.js學習日誌」的第12篇，本篇的主旨是要介紹紋理的種類，這系列的文章...
成品 「飛雷神之術！」鏡頭跳轉的重要性 圖片來源 上一篇我們實作城市的定位，但用戶仍必須手動轉動地球。手動轉動地球體驗不是很好，而這對簡報、展示來說是一大傷...
基於 yting23 看不下去只有剛體的夾娃娃機台外型，熱心的用 blender 繪製了夾娃娃機的模型，今天就來匯入朋友的善意 程式碼 匯入夾娃娃機底座 f...
Day11 - 「關於紋理」- Material解密(一) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹紋理與材質的關係，這系列的文章假設...
成品 為什麼要做地球？ 回顧原因，它可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、航太科技、GIS畫面等等。這些對於前端視覺特...
既然都有夾娃娃機的效果了，就來蓋個夾娃娃機台吧，今天先建立機台的剛體 建立機台夾層地板剛體與網格 let machineBottom = new CANNO...
做到而家覺得每次改完都要save再睇過成果會好麻煩, 而家用dat.GUI去喺網頁道改邊個參數內直接睇唔同形狀嘅變化其實網上面仲有好多不同種類的GUI, 而da...
成品 看完這篇文章，你將能用three.js開發出地球。 如同前一篇所說，地球可以應用在很多場景上，例如：行銷網站、企業形象網站、活動網站、全球數位戰情室、...
Day10 - 最後補充 - 幾何結構Geometry(四) 這裡是「Three.js學習日誌」的第10篇，本篇的主旨是要介紹Geometry的概念，這是Ge...
今日嘗試根據建立好的夾爪剛體將利用 Tween.js 動畫將物件抓起，做到類似夾娃娃機的效果 程式碼 .ejs 在 ejs 處加入按鈕 <button...
Build in Geometries - 喺本身three.js 個library到已經有好多build in geometries PlaneGeometr...
Day9 - 「點點到位」 - 幾何結構Geometry(三) 這裡是「Three.js學習日誌」的第9篇，本篇的主旨是要介紹Geometry的概念，還有一些...
成品 本篇我們將完成圖中的地球畫面，從介紹貼圖開始。 做一個地球可以幹嘛？——地球的應用 地球的應用：B2C應用 B2C主要是行銷網站、企業形象網站、活動網站...
今日要講一講three.js 嘅 screen size, 之前一直用緊800x600 嘅 aspect ratio 方便之前測試再用以下的code來讀取wid...
今日嘗試建立夾取物件的夾爪剛體 程式碼 設定夾爪初始位置 let gripperR_init_x = 2 let gripperR_init_y = 4 let...
Day8 - 「面面俱到」 - 幾何結構Geometry(二) 這裡是「Three.js學習日誌」的第8篇，本篇的主旨是要介紹Geometry的概念，還有一些...
圖片來源 艾斯卡諾在正中午最強，就如同three.js的光。你可能會覺得： 圖片來源 我可不是瞎掰喔，聽我解釋。 中午光線最強，就像艾斯卡諾中午最猛，而這是...
在之前修改的 cannon 範例裡提過剛體，剛體才是實際互動的物件，網格只是套上去的皮，大多數剛體的形狀不會與網格相同，今日先建立剛體並與網格組合 程式碼 設定...
來到第九日,今日講一講mouse control, 即係用滑鼠去移動object嘅方法, 下圖就係今日要做嘅目標 第一我地係要諗點樣可以知道滑鼠喺螢幕上的位置...
Mizok
Yingge170
伍瑪斯
Barry Lam
iThome鐵人賽
看影片追技術