《編程真好玩:從零開始學網頁設計及3D編程》從網頁開發的基礎知識HTML5、CSS、JavaScript開始,以項目實戰的方式詳細介 紹如何構建自適應網頁,并通過工具免費發布自己的網站。在后面的章節中,以主流的3D框架ThreeJS為技術支撐,在網頁中編寫JavaScript代碼,讓讀者深入淺出地構建完整的3D應用場景。
《編程真好玩:從零開始學網頁設計及3D編程》由少兒編程網核心成員編寫,作者都具有多年軟件開發經驗,書中案例中包含很多優秀的軟件工程思想,強調編程實戰,采用項目驅動和目標導向的思維方法去學習最前沿的計算機編程技術。
《編程真好玩:從零開始學網頁設計及3D編程》適合對網頁設計和3D編程感興趣的讀者,特別是對前端開發(網站、小程序、3D模型展示、3D游戲原理、數據可視化、虛擬現實等應用方向)有興趣的青少年。無論是初學者還是有一定基礎的愛好者,都能從《編程真好玩:從零開始學網頁設計及3D編程》中獲益匪淺。
任務分解:由大化小,掌握設計要點
接近生活:案例真實,力求學以致用
由淺入深:漸進模式,激發學與練興趣
亦玩亦學:在玩中學,在學中練,輕松學會
收獲滿滿:體驗編程快樂,獲得滿滿成就感
Web 發展至今已有 30 多個年頭了,它從一個僅能連接少數計算機的局限性系統,發展成為全球計算機緊密相連的龐大網絡,是一個個計算機科學家不懈努力的成果。在移動互聯網時代到來之前,Web 早已風靡全球,在瀏覽器日漸成熟、普及和國際標準的助推之下,其一度成為互聯網最大的應用體系。
近年來,隨著 HTML5 的普及,WebGL(Web Graphics Library,Web 圖形庫)技術日趨成熟,Web 得到了快速的發展,網頁的表現能力越來越強大,利用 WebGL 技術在網頁上創建各種復雜的 3D 可視化效果已然成為一個新的流行趨勢。WebGL 廣泛應用于互動式可視化(3D 產品展示)、游戲開發、虛擬現實(Virtual Reality,VR)和增強現實(Augmented Reality,AR)、在線教育、影視動畫、建筑設計可視化、數字展會等多種領域。
科技是第一生產力,而軟件編程也是科技發展重要的推動力量。目前,中小學生常用的編程語言主要是 Scratch、Python、C 。編程的教學內容也主要是以興趣培養和應試算法為主,偏重于知識理論學習。然而,學習這些到底能做些什么?這是很多學生的困惑,主要是因為缺少完整系統的軟件項目的開發實踐。
本書編寫人員均在軟件開發一線工作多年,有豐富的軟件項目開發實戰經驗。本書以軟件工程中項目式開發為主線,學習如何從零開始搭建自己的第一個網站,并能夠結合面向對象編程的思想,采用當今最流行的 WebGL 技術在瀏覽器中構建出真正的 3D 場景。本書語言通俗易懂,不僅有詳細的文字描述,還結合源代碼和大量的圖表來解釋一些抽象的編程概念,應用探究式學習方法,通過生活案例引領讀者一步一步了解 JavaScript 和 HTML5,由淺入深學習 3D場景的構建和渲染過程。在實踐中探究學習和成長,并引導和激發讀者對編程的興趣,是本書重要的目標。
本書的內容強調實戰式學習,以項目驅動的方式來串聯相關的知識點,開發工具用的是軟件行業非常流行的 VS Code,并引用流行的 Bootstrap 前端開發框架及開源的 3D 圖形庫 ThreeJS,讓讀者了解前沿的軟件開發技術。在書中融合了許多軟件工程中的優秀編程思路,比如自頂向下對象的拆解過程,在程序設計中巧妙地應用類的繼承性、多態性、封裝性來提升代碼質量。
本書編寫過程中,山東省實驗中學李梓菡同學對所編寫的案例及程序進行了校驗,并對程序案例適用對象給出了有價值的建議,同時在科技項目公益活動中進行了應用和推廣。
少兒編程網學員珠海市第九中學楊長杰同學、西安市碑林區實驗小學王笠丞同學也都主動參與學習體驗,對本書后期的優化與改進提供了很大幫助,在此向以上同學表示感謝。如果廣大讀者朋友在學習過程中有好的想法、建議、意見,歡迎隨時與我們聯系。
少兒編程網(kidscode.cn)成立于2014年,是國內最早專門從事少兒編程教育宣傳、推廣、普及的公益平臺,網站提供了大量的免費圖文和視頻教程,并有QQ群和微信群提供在線指導和答疑。網站的創始及運營團隊均來自于軟件開發一線,具有豐富的程序設計開發經驗,也有多年的青少年編程教學實踐經驗,曾編寫出版了《帶你步入編程世界 :Scratch 2.0 零基礎入門》、《Scratch2.0 少兒編程奇幻之旅》及《從 Scratch 進階到 Python(基礎篇)》。
第1章 小試牛刀認識網頁設計
1.1 認識網頁三劍客
1.1.1 網頁是什么
1.1.2 HTML、CSS 和 JS 的效果對比
1.2 嘗試寫個程序吧
1.2.1 創建網站目錄
1.2.2 創建自己的第一個網頁
1.2.3 HTML 頁面結構
第2章 整裝待發升級裝備
2.1 VS Code 下載與安裝
2.2 VS Code 安裝擴展
2.2.1 安裝中文語言包
2.2.2 安裝 Live Server
2.2.3 安裝 Code Runner
2.2.4 VS Code 初體驗
2.2.5 創建代碼片段
2.2.6 Live Server 本地服務
2.2.7 本地服務啟動與關閉
第3章 免費搭建網站
3.1 注冊賬號,創建隧道
3.1.1 注冊賬號、登錄
3.1.2 創建隧道
3.2 啟動隧道,網站上線
3.2.1 下載客戶端
3.2.2 啟動客戶端
3.2.3 網站上線
3.2.4 流程總結
第4章 網頁設計制作
4.1 召集助手
4.2 設計草圖
4.3 導航欄
4.3.1 創建導航欄框架
4.3.2 給導航添加 Logo 圖片
4.3.3 添加導航文字
4.3.4 折疊導航欄
4.4 輪播圖
4.4.1 圖片切換輪播
4.4.2 添加指示按鈕
4.4.3 左右切換按鈕
4.4.4 添加圖片信息
4.5 校園要聞
4.5.1 搭建框架
4.5.2 填充內容
4.6 視頻播放
4.6.1 搭建框架
4.6.2 填充內容
4.6.3 自定義 CSS 樣式
4.6.4 裁剪出梯形背景
4.7 照片圖集
4.7.1 搭建框架
4.7.2 填充圖片
4.7.3 圖片溢出隱藏
4.8 表單
4.8.1 創建表單
4.8.2 添加背景圖
4.9 底部頁腳
4.10 頁面動畫
第5章 探尋 JavaScript 的世界
5.1 JavaScript 基礎知識
5.1.1 第一行 JavaScript 代碼
5.1.2 執行 JavaScript 程序
5.1.3 JavaScript 注釋
5.1.4 變量和常量
5.1.5 運算符
5.2 流程控制
5.2.1 條件語句
5.2.2 循環語句
5.3 函數
5.3.1 函數的定義
5.3.2 帶參數的函數
5.3.3 帶返回值的函數
5.3.4 遞歸函數
5.4 面向對象編程
5.4.1 JavaScript 類
5.4.2 構造方法
5.4.3 類的繼承
5.4.4 類的方法重寫
5.5 JS 與 HTML
5.5.1 JS 程序對 HTML 的控制
5.5.2 事件
5.5.3 燈光開關
5.5.4 使用幫助手冊
第6章 用 JavaScript 構建 3D 世界
6.1 認識 ThreeJS
6.1.1 ThreeJS 框架下載
6.1.2 ThreeJS 中的一些概念
6.2 創建第一個 3D 場景
6.2.1 準備工作
6.2.2 代碼實現
6.2.3 三維坐標系
6.2.4 旋轉物體
6.3 場景升級
6.3.1 更換材質
6.3.2 添加光源
6.3.3 軌道控制器
6.3.4 ThreeJS 中的顏色
6.3.5 添加多個物體
6.4 面向對象編程構建 3D 場景
6.4.1 自定義類
6.4.2 使用自定義類創建 3D 場景
6.5 Minecraft 場景搭建
6.5.1 Minecraft 中的方塊
6.5.2 創建 Minecraft 方塊
6.5.3 創建 Minecraft 草坪
6.5.4 封裝 BlockGround 類
6.5.5 創建 Minecraft 樹
6.5.6 創建一片森林
6.5.7 創建 Minecraft 花
6.5.8 天空盒子
6.5.9 高效地創建地面
6.5.10 創建 Minecraft 草原
6.6 加載 3D 動畫模型
6.6.1 加載 GLB 動畫模型
6.6.2 加載 FBX 動畫模型
6.6.3 加載 Minecraft 游戲玩家
6.7 模擬 Minecraft 游戲場景