甚麼？網頁也可以做派對遊戲？使用Vue和babylon.js打造3D派對遊戲吧！(好評熱銷版) (2版)

類似書籍推薦給您

【簡介】 \好評熱銷再上市/   甚麼？網頁也可以做派對遊戲！Σ(ˊДˋ;) 在3種風格迥異、搞笑有趣的遊戲中學習3D網頁開發。ᕕ( ﾟ ∀。)ᕗ 讓手機化作joy-con，即時連線控制遊戲人物。(/≧▽≦)/     ☆不只是網頁 隨著瀏覽器的蓬勃發展，現在網頁可以存取GPS、加速度計、照度計、麥克風、攝影機等等硬體訊號，還可以配合WebGPU、WebGL運行複雜的3D內容。 基於上述理由，網頁已可以成為遊戲機，手機瀏覽器甚至能像joy-con一般，作為搖桿使用，本書將帶領大家從頭打造一個可以使用手機遙控的派對遊戲。 ☆寓教於樂 本書將帶領大家如何建立3D遊戲並透過手機即時遙控，藉由遊戲與技術的連結，讓讀者能夠從底層了解運作原理且不會枯燥乏味。 ☆由淺入深 本書將依序介紹Vue、babylonjs、NestJS等等技術，讓讀者可以循序漸進的認識相關技術，接著整合這些技術與工具，透過功能與遊戲層層堆疊，最終淬鍊成一個完整的網頁應用程式。  【目錄】 ▌第1章　沒時間解釋了，快上車！ 1.1 原理與架構 1.2 開發工具 1.2.1 Visual Studio Code 1.2.2 Google Chrome 1.3 使用套件 1.3.1 TypeScript 1.3.2 Vue 3、Vue Router、Pinia 1.3.3 VueUse 1.3.4 Quasar 1.3.5 babylon.js 1.3.6 Tailwind CSS 1.3.7 NestJS 1.4 開發環境 1.4.1 Vue 前端專案 1.4.2 NestJS 後端專案   ▌第2章　Vue基本概念 2.1 基礎概念 2.1.1 響應式與資料綁定 2.1.2 條件渲染與事件 2.2 元件   ▌第3章　NestJS基礎概念 3.1 建立資源 3.2 驗證資料   ▌第4章　打造派對門面 4.1 打造背景 4.1.1 建立背景元件 4.1.2 建立可複用的多邊形元件 4.1.3 漂浮吧！多邊形 4.2 打造選單按鈕 4.3 打造標題Logo   ▌第5章　開趴前先 loading 一下 5.1 建立 loading 相關元件 5.2 載入就應該要有載入的樣子   ▌第6章　讓前後端接上線 6.1 後端提供連線 6.2 前端開始連線 6.3 開房間！開派對！ 6.3.1 伺服器建立房間資源 6.3.2 網頁建立派對   ▌第7章　歡迎光臨遊戲大廳 7.1 大廳頁面 7.2 建立遊戲選單場景 7.3 建立選單按鈕 7.4 顯示房間ID與玩家 7.5 加入遊戲 7.5.1 輸入房間ID視窗 7.5.2 加入遊戲API   ▌第8章　手機變搖桿 8.1 搖桿頁面 8.2 伺服器同步game-console狀態 8.3 完成跳轉大廳搖桿功能   ▌第9章　所以我說那個搖桿呢？ 9.1 傳輸搖桿資料 9.2 玩家一起粗乃玩！ 9.3 網頁偵測玩家更新事件 9.4 是誰偷按確定？ 9.4.1 對話泡泡 9.4.2 搖桿控制選單   ▌第10章　第一隻企鵝 10.1 完成遊戲選單 10.2 大海、浮冰、企鵝勒？ 10.3 企鵝登場 10.4 爆走企鵝 10.5 完全體企鵝 10.6 建立控制搖桿 10.7 一人一隻才公平 10.8 第一隻企鵝 10.9 完成大廳按鈕功能   ▌第11章　小雞快飛 11.1 建立小島 11.2 建立遊戲場景 11.3 起飛吧！小雞！ 11.4 完成天空 11.5 撞雞啦！ 11.6 Web API授權 11.6.1 伺服器同步permission資料 11.7 遊戲機接收資料 11.8 建立姿態控制搖桿 11.9 小雞快飛！ 11.10 增強遊戲體驗   ▌第12章　狐狸與老鼠 12.1 建立狐狸島 12.2 建立遊戲場景 12.3 加入老鼠 12.4 狐狸登場 12.5 建立控制搖桿 12.6 搖桿接收資料 12.6.1 伺服器同步console資料 12.7 一起抓老鼠！   ▌第13章　結束是另一個開始 13.1 重構企鵝遊戲 13.2 取消搖桿方向限制   ▌第14章　後記          

WebGL建構網頁中的3D遊戲 從基礎渲染原理、光影到應用(二版) (2版)

類似書籍推薦給您

【簡介】 ★★★【全台第一本繁體中文WebGL教學書】★★★ ★★★【好評再上市】★★★ ★★★【2021 iThome 鐵人賽 Modern Web 組 優選文章改寫】★★★ ★★★【536頁內容+全彩圖文解說=完整學習WebGL！】★★★ 　　本書由 2021 iThome 鐵人賽 Modern Web 組「如何在網頁中繪製 3D 場景？從 WebGL 的基礎開始說起」改寫並加入遊戲互動要素，除了波光粼粼的海面，現在更有遊玩性了！ 　　WebGL是一種JavaScript API，用於網頁呈現互動式2D和3D圖形，現今許多商家網頁展示自家商品，或讓顧客於線上預覽客製化商品時，都能看見其蹤影存在。 　　書中提供一系列連貫範例，帶領讀者透過 WebGL 在瀏覽器中學習電腦渲染 3D 的運作機制，一步步建構 3D 渲染流程，再到各種光線、陰影效果，最後加入遊戲機制與互動，製作成刺激好玩的遊戲！ 　　本書主要內容如下 　　★初步認識WebGL 　　★Texture&2D 　　★3D&物件 　　★Lighting 　　★Framebuffer&陰影 　　★帆船與海  【目錄】 1 - Hello WebGL 1-1 準備開發環境 1-2 畫一個三角形（上） 1-3 畫一個三角形（下） 1-4 Uniform – shader 之參數 1-5 畫多個三角形 1-6 Varying – fragment shader 之資料   2 - Texture & 2D 2-1 在 WebGL 取用、顯示圖片 – Textures 2-2 Texture 使用上的細節 2-3 互動 & 動畫 2-4 2D Transform 2-5 2D transform Continued   3 - 3D & 物件 3-1 Orthogonal 3D 投影 3-2 Perspective 3D 成像 3-3 視角 Transform 3-4 使相機看著目標 3-5 渲染多個物件   4 - Lighting 4-1 法向量（Normals）與散射光（Diffuse） 4-2 Indexed Element 4-3 請 TWGL 替程式碼減肥 4-4 Specular 反射光 4-5 點光源與自發光 4-6 Normal Map   5 - Framebuffer & 陰影 5-1 Framebuffer 是什麼？ 5-2 鏡面效果 5-3 陰影—拍攝深度資訊 5-4 陰影—深度 Framebuffer 與 Texture 5-5 陰影—計算是否產生陰影 5-6 毛玻璃效果—使用 Normal Map 的鏡面   6 - 帆船與海 6-1 主角『帆船』— obj 3D 模型檔案的讀取與繪製 6-2 Skybox 6-3 半透明的文字看板 6-4 使用 Shader 即時渲染波光粼粼的海面   7 - Catch The Wind 小遊戲 7-1 地形高度圖的產生 7-2 依照地形高度圖繪製島嶼 7-3 Set Sail! 航行帆船 7-4 遊戲標題與 UI 7-5 碰撞島嶼判定、結束遊戲 7-6 結語  

甚麼？網頁也可以做派對遊戲？使用Vue和babylon.js打造3D派對遊戲吧！ (1版)

類似書籍推薦給您

內容簡介 甚麼？網頁也可以做派對遊戲！Σ(ˊДˋ;) 在3種風格迥異、搞笑有趣的遊戲中學習3D網頁開發。ᕕ( ﾟ ∀。)ᕗ 讓手機化作joy-con，即時連線控制遊戲人物。(/≧▽≦)/ 　　☆不只是網頁 　　隨著瀏覽器的蓬勃發展，現在網頁可以存取GPS、加速度計、照度計、麥克風、攝影機等等硬體訊號，還可以配合WebGPU、WebGL運行複雜的3D內容。 　　基於上述理由，網頁已可以成為遊戲機，手機瀏覽器甚至能像joy-con一般，作為搖桿使用，本書將帶領大家從頭打造一個可以使用手機遙控的派對遊戲。 　　☆寓教於樂 　　本書將帶領大家如何建立3D遊戲並透過手機即時遙控，藉由遊戲與技術的連結，讓讀者能夠從底層了解運作原理且不會枯燥乏味。 　　☆由淺入深 　　本書將依序介紹Vue、babylonjs、NestJS等等技術，讓讀者可以循序漸進的認識相關技術，接著整合這些技術與工具，透過功能與遊戲層層堆疊，最終淬鍊成一個完整的網頁應用程式。 目錄 第1章 沒時間解釋了，快上車！ 1.1 原理與架構 1.2 開發工具 1.2.1 Visual Studio Code 1.2.2 Google Chrome 1.3 使用套件 1.3.1 TypeScript 1.3.2 Vue 3、Vue Router、Pinia 1.3.3 VueUse 1.3.4 Quasar 1.3.5 babylon.js 1.3.6 Tailwind CSS 1.3.7 NestJS 1.4 開發環境 1.4.1 Vue 前端專案 1.4.2 NestJS 後端專案 第2章 Vue基本概念 2.1 基礎概念 2.1.1 響應式與資料綁定 2.1.2 條件渲染與事件 2.2 元件 第3章 NestJS基礎概念 3.1 建立資源 3.2 驗證資料 第4章 打造派對門面 4.1 打造背景 4.1.1 建立背景元件 4.1.2 建立可複用的多邊形元件 4.1.3 漂浮吧！多邊形 4.2 打造選單按鈕 4.3 打造標題Logo 第5章 開趴前先 loading 一下 5.1 建立 loading 相關元件 5.2 載入就應該要有載入的樣子 第6章 讓前後端接上線 6.1 後端提供連線 6.2 前端開始連線 6.3 開房間！開派對！ 6.3.1 伺服器建立房間資源 6.3.2 網頁建立派對 第7章 歡迎光臨遊戲大廳 7.1 大廳頁面 7.2 建立遊戲選單場景 7.3 建立選單按鈕 7.4 顯示房間ID與玩家 7.5 加入遊戲 7.5.1 輸入房間ID視窗 7.5.2 加入遊戲API 第8章 手機變搖桿 8.1 搖桿頁面 8.2 伺服器同步game-console狀態 8.3 完成跳轉大廳搖桿功能 第9章 所以我說那個搖桿呢？ 9.1 傳輸搖桿資料 9.2 玩家一起粗乃玩！ 9.3 網頁偵測玩家更新事件 9.4 是誰偷按確定？ 9.4.1 對話泡泡 9.4.2 搖桿控制選單 第10章 第一隻企鵝 10.1 完成遊戲選單 10.2 大海、浮冰、企鵝勒？ 10.3 企鵝登場 10.4 爆走企鵝 10.5 完全體企鵝 10.6 建立控制搖桿 10.7 一人一隻才公平 10.8 第一隻企鵝 10.9 完成大廳按鈕功能 第11章 小雞快飛 11.1 建立小島 11.2 建立遊戲場景 11.3 起飛吧！小雞！ 11.4 完成天空 11.5 撞雞啦！ 11.6 Web API授權 11.6.1 伺服器同步permission資料 11.7 遊戲機接收資料 11.8 建立姿態控制搖桿 11.9 小雞快飛！ 11.10 增強遊戲體驗 第12章 狐狸與老鼠 12.1 建立狐狸島 12.2 建立遊戲場景 12.3 加入老鼠 12.4 狐狸登場 12.5 建立控制搖桿 12.6 搖桿接收資料 12.6.1 伺服器同步console資料 12.7 一起抓老鼠！ 第13章 結束是另一個開始 13.1 重構企鵝遊戲 13.2 取消搖桿方向限制 第14章 後記