视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他

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度全景可视化展示

 

订阅课程 开始学习