《编程真好玩:从零开始学网页设计及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 游戏场景