WebGL 可视化3D绘图框架：Three.js 零基础上手实战
网名风舞烟，中国科技大学计算机专业、微软认证讲师（MCE）、微软数据分析讲师。10多年软件行业从业经验，参与过数百万的企业级ERP系统，在大数据处理、富客户端技术、项目管理、数据分析等领域有着深刻的理解和实战经验，曾任某在线教育机构副总裁，主编过BF-TECH系列等品牌就业课程，可谓中国IT在线教育第一人。
童金浩
¥298.00
立即订阅
扫码下载「CSDN程序员学院APP」，1000+技术好课免费看
APP订阅课程，领取优惠，最少立减5元 ↓↓↓
订阅后：请点击此处观看视频课程
视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他
学习有效期：永久观看
学习时长：818分钟
学习计划：14天
难度：低
「口碑讲师带队学习，让你的问题不过夜」
讲师姓名：童金浩
CEO/董事长/总经理
讲师介绍：网名风舞烟，中国科技大学计算机专业、微软认证讲师（MCE）、微软数据分析讲师。10多年软件行业从业经验，参与过数百万的企业级ERP系统，在大数据处理、富客户端技术、项目管理、数据分析等领域有着深刻的理解和实战经验，曾任某在线教育机构副总裁，主编过BF-TECH系列等品牌就业课程，可谓中国IT在线教育第一人。
☛点击立即跟老师学习☚
「你将学到什么？」
相对于Flash,Flex，Silverlight等富客户端技术，WebGL之ThreeJS：通过OpenGL ES 2.0，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。这是未来的网游趋势，如果你想做可视化动画三维企业应用，又不想用复杂的C++程序，那么 Three.js 将会是你最好的选择。
本课程主要的功效就是让你学习完本教程后，能够写出在浏览器上流畅运行的3D程序，包括但不限于：大数据可视化，360度全景展示，3D游戏，完成这些事情，会比c++用更少的代码。而且更容易，更酷。 在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。课程共十三章，大大小小贯穿了近10个案例，只要你具备基础的HTML和JavaScript基础即可学习。
「课程学习目录」
| 第1章：课程概述 |
| 1.课程概述 |
| 第2章：编写第一个 ThreeJS 应用 |
| 1.WebGL、OpenGL ES规范及浏览器3D绘制 |
| 2.WebGL 精彩案例展示 |
| 3.WebGL之ThreeJS |
| 4.ThreeJS下载、目录及如何运行？ |
| 5.第一个ThreeJS案例：旋转的小球 |
| 6.重构第一个ThreeJS案例 |
| 7.补充：WebGL浏览器检测函数 |
| 8.本章小结 |
| 第3章：3D 世界的密秘 – Three.js中的点、线、面 |
| 1.ThreeJS右手坐标系及点的定义 |
| 2.ThreeJS中画线的原理与思路 |
| 3.ThreeJS中画线案例代码实现（上） |
| 4.ThreeJS中画线案例代码实现（中） |
| 5.ThreeJS中画线案例代码实现（下） |
| 6.ThreeJS中如何去绘制一个面 |
| 7.关于绘制平面的两个思考题 |
| 8.本章小结 |
| 第4章：相机 camera 的 up、lookat、position 几个向量之间的关系 |
| 1.相机中的position、lookAt、up 之间的关系 |
| 2.利用camera的up向量设置坐标轴的正方向 |
| 3.ThreeJS中如何绘制一个平面(重构) |
| 4.本章小结 |
| 第5章：如何让ThreeJS场景中的物体动起来 |
| 1.ThreeJS中如何让场景动起来_基本原理 |
| 2.ThreeJS中让场景中物体动起来的第一种方式_代码实现 |
| 3.ThreeJS中让场景中物体动起来的第二种方式_代码实现 |
| 4.利用Stats对ThreeJS中动画进行性能监控 |
| 5.重构让场景中的物件动起来_加入性能监控 |
| 6.本章小结 |
| 第6章：正交投影相机与透视相机原理与实现 |
| 1.照像机之正交投影与透视投影的区别与使用场景 |
| 2.正投影相机在Three.js中的定义 |
| 3.正投影相机在Three.js中的实现 |
| 4.什么是透视相机及在Three.js中的定义 |
| 5.透视投影相机在Three.js中的使用 |
| 6.本章小结 |
| 第7章：使用 Three.js 中的各种光源 |
| 1.ThreeJS中的光源概述 |
| 2.ThreeJS四种基础光源 01- 环境光的基本使用方法与场景 |
| 3.ThreeJS四种基础光源 01 – 环境光的使用案例 |
| 4.ThreeJS四种基础光源 02 – 点光源的基本使用方法与场景 |
| 5.ThreeJS四种基础光源 02 – 点光源的使用案例 |
| 6.ThreeJS四种基础光源 03 – 聚光灯的基本使用方法与场景 |
| 7.ThreeJS四种基础光源 04 – 方向光的基本使用方法、场景、案例 |
| 8.ThreeJS四种基础光源的综合应用案例 |
| 9.ThreeJS中多种光源混合示例：方向光与环境光混合 |
| 10.ThreeJS中多种光源混合示例：方向光与点光源混合 |
| 11.本章小结 |
| 第8章：Three.js 中的3D 纹理 |
| 1.ThreeJS中的3D纹理概念 |
| 2.ThreeJS中加载图片纹理的方法与原理 |
| 3.ThreeJS中的图片纹理加载实例 |
| 4.ThreeJS中Canvas纹理与图片纹理的区别 |
| 5.ThreeJS中加载Canvas纹理思路与方法 |
| 6.ThreeJS中加载Canvas纹理实例解析 |
| 7.本章小结 |
| 第9章：3D 模型加载与使用 |
| 1.了解3D模型的基本原理 |
| 2.ThreeJS中3D模型的加载原理 |
| 3.VTK 3D模型文件源码解读 |
| 4.理解 ThreeJS 中顶点与索引面的关系 |
| 5.顶点示例01_顶点位置数据解析渲染 |
| 6.顶点示例02_每个顶点显示一种颜色 |
| 7.顶点示例03_顶点法向量光照计算 |
| 8.顶点示例04_矩形非索引绘制 |
| 9.顶点示例05_矩形索引绘制 |
| 10.ThreeJS加载并使用VTK 3D模型 |
| 11.本章小结 |
| 第10章：让网络模型动起来 |
| 1.让网络模型动起来_案例素材准备 |
| 2.让网络模型动起来_重构案例素材加入鼠标第三方控制 |
| 3.让网格模型动起来_如何让物体围绕着坐标轴旋转 |
| 4.让网格模型动起来_如何让物体沿坐标轴平移+旋转 |
| 5.让网格模型动起来_如何让物体根据设定的向量方向来进行自由旋转 |
| 6.本章小结 |
| 第11章：实战Three.js中的音乐模块 |
| 1.实战ThreeJS中的语音模块_本章目标 |
| 2.实战ThreeJS中的语音模块_非位置音频（Audio）示例 |
| 3.实战ThreeJS中的语音模块_位置音频（PositionalAudio）示例 |
| 4.实战ThreeJS中的语音模块_音乐可视化01 |
| 5.实战ThreeJS中的语音模块_音乐可视化02 |
| 6.本章小结 |
| 第12章：实战 Three.js 中的点精灵、粒子系统 |
| 1.实战 Three.js 中的点精灵、粒子系统 |
| 2.实战 Three.js 中的点精灵、粒子系统_第一个示例 |
| 3.中国城市PM2.5可视化案例01_利用Sprite精灵实现 |
| 4.中国城市PM2.5可视化案例02_利用Points模型实现 |
| 5.中国城市PM2.5可视化案例03_利用Geomertry模型实现 |
| 6.经典案例_森林草地效果模拟 |
| 7.实战 Three.js 中的点精灵、粒子系统_经典案例_下雨场景效果模拟 |
| 8.本章小结 |
| 第13章：实战 Three.js 360度 3D 全景展示 |
| 1.实战 Three.js 360度 3D 全景展示_案例01_商品在线（上） |
| 2.实战 Three.js 360度 3D 全景展示_案例01_商品在线（下） |
| 3.实战 Three.js 360度 3D 全景展示_案例02_人体医学器官展示 |
| 第14章：项目：实战 Three.js 手枪射击游戏 |
| 1.实战 Three.js 手枪射击游戏_游戏效果展示 |
| 2.实战 Three.js 手枪射击游戏_游戏涉及知识点 |
| 3.实战 Three.js 手枪射击游戏_step01_搭建游戏场景基本架构 |
| 4.实战 Three.js 手枪射击游戏_step02_为旋转的盒子加入阴影效果 |
| 5.实战 Three.js 手枪射击游戏_step03_在场景中加入带有阴影的箱子 |
| 6.实战 Three.js 手枪射击游戏_step04_游戏场景之键盘控制物体移动 |
| 7.实战 Three.js 手枪射击游戏_step05_给场景添加人物及为人物添加阴影 |
| 8.实战 Three.js 手枪射击游戏_step06_游戏场景中模拟多场景交换 |
| 9.实战 Three.js 手枪射击游戏_step07_游戏场景中加入多人与僵尸 |
| 10.实战 Three.js 手枪射击游戏_step08_游戏场景中加入玩家武器 |
| 11.实战 Three.js 手枪射击游戏_step09_游戏场景中为武器产生子弹 |
| 12.实战 Three.js 手枪射击游戏_step10_让游戏场景中的子弹开枪射击 |
| 第15章：授课素材与代码 |
| 1.课程总体介绍 |
| 2.授课素材与代码打包 |
「7项超值权益，保障学习质量」
大咖讲解
技术专家系统讲解传授编程思路与实战。
答疑服务
专属社群随时沟通与讲师答疑，扫清学习障碍，自学编程不再难。
课程资料+课件
超实用资料，覆盖核心知识，关键编程技能，方便练习巩固。（部分讲师考虑到版权问题，暂未上传附件，敬请谅解）
常用开发实战
企业常见开发实战案例，带你掌握Python在工作中的不同运用场景。
大牛技术大会视频
2019Python开发者大会视频免费观看，送你一个近距离感受互联网大佬的机会。
APP+PC随时随地学习
满足不同场景，开发编程语言系统学习需求，不受空间、地域限制。
「什么样的技术人适合学习？」
想进入互联网技术行业，但是面对多门编程语言不知如何选择，0基础的你掌握开发、编程技术单一、冷门，迫切希望能够转型的你想进入大厂，但是编程经验不够丰富，没有竞争力，程序员找工作难。
「悉心打造精品好课，14天学到大牛3年项目经验」
【完善的技术体系】
技术成长循序渐进，帮助用户轻松掌握
掌握其他知识，扎实编码能力
【清晰的课程脉络】
浓缩大牛多年经验，全方位构建出系统化的技术知识脉络，同时注重实战操作。
【仿佛在大厂实习般的课程设计】
课程内容全面提升技术能力，系统学习大厂技术方法论，可复用在日后工作中。
「你可以收获什么？」
能够利用ThreeJS快速实现游戏场景搭建
能够利有ThreeJS编写大数据可视化效果展示
能够利用ThreeJS实现360度全景可视化展示
订阅课程 开始学习
相关文章
赣公网安备36020002000448号