[Day2] 為什麼是webGL 與Three.js？ - iT 邦幫忙

3D 的世界：我們所看見的物體是如何構成的？ 這一個章節，我們會來談談3D 的基礎，包含影像如何形成的，以及光線、camera、scene 等等在3D ... 2017iT邦幫忙鐵人賽 DAY 2 3 ModernWeb WebGL與Three.js初探系列第 2篇 [Day2]為什麼是webGL與Three.js？ 2017鐵人賽 webgl threejs 愷開 2016-12-1611:44:3811831瀏覽 為什麼是webGL 我知道，es6語法簡介的迷人、react的火紅、webpack...框架不斷竄出，從今年的鐵人幫大賽就看得出來。

不過，前端的可能性絕對不是如此而已，對我來說，儘管React生態圈非常熱絡，而且社群也逐漸趨於成熟，大幅度的提升前端工程化的可能性，但我們始終會面對到最純粹的問題，「畫面的呈現」。

所以這次既然都挑戰鐵人賽了，不如來講一些自己比較不擅長的部分。

儘管學習這些技術，對一位前端工程師來講並沒辦法在前端開發或是工程化上有太大的幫助。

不過，能夠自己動手創造一些有趣的圖像、動畫、互動，不就是當初我們傻傻踏入這行的初衷嗎？ 前置條件 為了之後良好的閱讀體驗，在繼續之前，我希望各位有： HTML基本語法 基本的javascript語法了解：由於本系列文都會圍繞在three.js跟webGL之上，所以盡量有js的基礎會比較容易看懂程式碼，當然如果你熟悉其他程式語言，其實也能很快地了解 不怕數學：系列文章中期會介紹一些數學概念，畢竟3D世界多了一個維度，用到數學的機會也無可避免地變多了 本系列簡介 由於3D所涵蓋的範圍實在太廣了，每一項都要細講30天絕對不夠。

不過，這邊我會把我所理解的部分列出來，讓不得其門而入的初學者們（包含自己）也有個大概的方向。

3D的世界：我們所看見的物體是如何構成的？ 這一個章節，我們會來談談3D的基礎，包含影像如何形成的，以及光線、camera、scene等等在3D繪圖當中常常用到的概念。

某些概念可能會需要一些數學基礎（像是微積分、矩陣、三角函數），別擔心，我們只會用到基礎，不會有太複雜的公式出現 FPS camera Scene webGL語法簡介：原本想說直接從three.js開始講的，但想了想，讓自己（和各位）接觸一下webGL語法也不錯，畢竟當three.js的API不滿足你的需求時，我們一樣可以透過webGL來擴充自己想要的功能。

three.js語法簡介：這邊會是本系列文的重點，我會盡我所能地介紹常用的Three.jsAPI，並且使用這些API來做一些應用 基本動畫與互動 基本影像處理：如果時間上來得及，我會介紹一些影像處理常見的技巧，並且用three.js或是單純操作imageData來做處理。

一起踏入3D的世界吧！ 留言 追蹤 檢舉 上一篇 [Day1]WebGL及three.js簡介 下一篇 [Day3]影像、GPU、webGL 系列文 WebGL與Three.js初探 共30篇 目錄 RSS系列文 訂閱系列文 95人訂閱 26 [Day26]aframeECS概覽 27 [Day27]aframe範例實作 28 [Day28]webGL番外篇-為什麼你該關注VR 29 [Day29]Aframe範例-3D與d3.js 30 [Day30]aframe常見API&完賽心得 完整目錄 尚未有邦友留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20447篇 完賽人數 572人 鐵人賽最新文章 淺談DevOps&Observability 以Ardiuno控制CPU散熱器呼吸燈 超深度鐵人賽後自我審視 建立表與表之間的關聯(Day28) 【Day?(31)】測試環境無法登入 使用程式來管理資料庫(DBMigrate)(Day27) Day31-遲來的鐵人賽心得 STM32CubeMX專案配置詳細教學，點亮LED 撰寫httprequest的複雜一點的測試(Day26) 2022/02/12更新 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce [Day03]tinyML開發板介紹 [Day01]在享受tinyML這道美食之前 永豐金融API測試員 [Day3]使用ta-lib製作指標 [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:HashID 計算API所需要的參數:IV 前往鐵人賽 熱門問題 將現有系統中心化架構改為去中心化 Windows10設定遠端多人多工要怎麼弄壓 請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏 手提電腦加入DOMAIN後,回家幾日後就不能LOGIN 加入網域後的筆電，登入問題。

關於UPS及停電大樓柴油緊急發電接法的問題 關於Python與Excel Vmware4.0上的VM要轉移至Vmware7.0無法轉移 Fortigate做WAKEONLAN Reactvite部屬到gh-pagestatusof404()main.jsx IT邦幫忙 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows python php windowsserver linux c# 資訊安全 程式設計 css vue.js sql mysql 熱門回答 請問怎麼把C:\Users\XXXXX使用者目錄移到D槽捏 將現有系統中心化架構改為去中心化 VBA只複製數字 Vue3+VueRouter如何在Composables中互相傳值? SQL2000升級SQL2008R2資料庫發生錯誤? 3combaseline2250plus交換器預設IP和初始連接 HPP4300G2系統重灌 O365SMTP寄發系統信件 工作管理員記錄程序cpu問題 Win10滑鼠沒反應 熱門文章 計算機概論-網路通訊與網際網路Networkingandtheinternet(上) 【HTML】【CSS】如何處理inline-block元素之間的空白 DeepLink/DeferredDeepLink深度連結 ISO27001資訊安全管理系統【解析】(十二) Python入門Day6:#WhileTrue的用法 YouTube轉換為MP3 桌面端YouTube影片下載器-10款最佳 OpenProject安裝在ubuntu20.04LTS Apple音樂下載到電腦5個方法輕鬆做到【必學】 【學習筆記】Gitbranch 一週點數排行 更多點數排行 ㊣浩瀚星空㊣(yoching) 居然解出來了(partyyaya) raytracy(raytracy) 天黑(horace_work) 尼克(nickliao1) 海綿寶寶(antijava) Han(c0952199517) juck30808(juck30808) cloudeasy(cloudeasy) haward79(haward79) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉