WebGL 可视化3D绘图框架:Three.js 零基础上手实战

WebGL 可视化3D绘图框架:Three.js 零基础上手实战
共99节 7693人在学 课程详情
  • 课程概述

    • 课程概述
  • 编写第一个 ThreeJS 应用

    • WebGL、OpenGL ES规范及浏览器3D绘制
    • WebGL 精彩案例展示
    • WebGL之ThreeJS
    • ThreeJS下载、目录及如何运行?
    • 第一个ThreeJS案例:旋转的小球
    • 重构第一个ThreeJS案例
    • 补充:WebGL浏览器检测函数
    • 本章小结
  • 3D 世界的密秘 – Three.js中的点、线、面

    • ThreeJS右手坐标系及点的定义
    • ThreeJS中画线的原理与思路
    • ThreeJS中画线案例代码实现(上)
    • ThreeJS中画线案例代码实现(中)
    • ThreeJS中画线案例代码实现(下)
    • ThreeJS中如何去绘制一个面
    • 关于绘制平面的两个思考题
    • 本章小结
  • 相机 camera 的 up、lookat、position 几个向量之间的关系

    • 相机中的position、lookAt、up 之间的关系
    • 利用camera的up向量设置坐标轴的正方向
    • ThreeJS中如何绘制一个平面(重构)
    • 本章小结
  • 如何让ThreeJS场景中的物体动起来

    • ThreeJS中如何让场景动起来_基本原理
    • ThreeJS中让场景中物体动起来的第一种方式_代码实现
    • ThreeJS中让场景中物体动起来的第二种方式_代码实现
    • 利用Stats对ThreeJS中动画进行性能监控
    • 重构让场景中的物件动起来_加入性能监控
    • 本章小结
  • 正交投影相机与透视相机原理与实现

    • 照像机之正交投影与透视投影的区别与使用场景
    • 正投影相机在Three.js中的定义
    • 正投影相机在Three.js中的实现
    • 什么是透视相机及在Three.js中的定义
    • 透视投影相机在Three.js中的使用
    • 本章小结
  • 使用 Three.js 中的各种光源

    • ThreeJS中的光源概述
    • ThreeJS四种基础光源 01- 环境光的基本使用方法与场景
    • ThreeJS四种基础光源 01 - 环境光的使用案例
    • ThreeJS四种基础光源 02 - 点光源的基本使用方法与场景
    • ThreeJS四种基础光源 02 - 点光源的使用案例
    • ThreeJS四种基础光源 03 - 聚光灯的基本使用方法与场景
    • ThreeJS四种基础光源 04 - 方向光的基本使用方法、场景、案例
    • ThreeJS四种基础光源的综合应用案例
    • ThreeJS中多种光源混合示例:方向光与环境光混合
    • ThreeJS中多种光源混合示例:方向光与点光源混合
    • 本章小结
  • Three.js 中的3D 纹理

    • ThreeJS中的3D纹理概念
    • ThreeJS中加载图片纹理的方法与原理
    • ThreeJS中的图片纹理加载实例
    • ThreeJS中Canvas纹理与图片纹理的区别
    • ThreeJS中加载Canvas纹理思路与方法
    • ThreeJS中加载Canvas纹理实例解析
    • 本章小结
  • 3D 模型加载与使用

    • 了解3D模型的基本原理
    • ThreeJS中3D模型的加载原理
    • VTK 3D模型文件源码解读
    • 理解 ThreeJS 中顶点与索引面的关系
    • 顶点示例01_顶点位置数据解析渲染
    • 顶点示例02_每个顶点显示一种颜色
    • 顶点示例03_顶点法向量光照计算
    • 顶点示例04_矩形非索引绘制
    • 顶点示例05_矩形索引绘制
    • ThreeJS加载并使用VTK 3D模型
    • 本章小结
  • 让网络模型动起来

    • 让网络模型动起来_案例素材准备
    • 让网络模型动起来_重构案例素材加入鼠标第三方控制
    • 让网格模型动起来_如何让物体围绕着坐标轴旋转
    • 让网格模型动起来_如何让物体沿坐标轴平移+旋转
    • 让网格模型动起来_如何让物体根据设定的向量方向来进行自由旋转
    • 本章小结
  • 实战Three.js中的音乐模块

    • 实战ThreeJS中的语音模块_本章目标
    • 实战ThreeJS中的语音模块_非位置音频(Audio)示例
    • 实战ThreeJS中的语音模块_位置音频(PositionalAudio)示例
    • 实战ThreeJS中的语音模块_音乐可视化01
    • 实战ThreeJS中的语音模块_音乐可视化02
    • 本章小结
  • 实战 Three.js 中的点精灵、粒子系统

    • 实战 Three.js 中的点精灵、粒子系统
    • 实战 Three.js 中的点精灵、粒子系统_第一个示例
    • 中国城市PM2.5可视化案例01_利用Sprite精灵实现
    • 中国城市PM2.5可视化案例02_利用Points模型实现
    • 中国城市PM2.5可视化案例03_利用Geomertry模型实现
    • 经典案例_森林草地效果模拟
    • 实战 Three.js 中的点精灵、粒子系统_经典案例_下雨场景效果模拟
    • 本章小结
  • 实战 Three.js 360度 3D 全景展示

    • 实战 Three.js 360度 3D 全景展示_案例01_商品在线(上)
    • 实战 Three.js 360度 3D 全景展示_案例01_商品在线(下)
    • 实战 Three.js 360度 3D 全景展示_案例02_人体医学器官展示
  • 项目:实战 Three.js 手枪射击游戏

    • 实战 Three.js 手枪射击游戏_游戏效果展示
    • 实战 Three.js 手枪射击游戏_游戏涉及知识点
    • 实战 Three.js 手枪射击游戏_step01_搭建游戏场景基本架构
    • 实战 Three.js 手枪射击游戏_step02_为旋转的盒子加入阴影效果
    • 实战 Three.js 手枪射击游戏_step03_在场景中加入带有阴影的箱子
    • 实战 Three.js 手枪射击游戏_step04_游戏场景之键盘控制物体移动
    • 实战 Three.js 手枪射击游戏_step05_给场景添加人物及为人物添加阴影
    • 实战 Three.js 手枪射击游戏_step06_游戏场景中模拟多场景交换
    • 实战 Three.js 手枪射击游戏_step07_游戏场景中加入多人与僵尸
    • 实战 Three.js 手枪射击游戏_step08_游戏场景中加入玩家武器
    • 实战 Three.js 手枪射击游戏_step09_游戏场景中为武器产生子弹
    • 实战 Three.js 手枪射击游戏_step10_让游戏场景中的子弹开枪射击
  • 授课素材与代码

    • 课程总体介绍
    • 授课素材与代码打包

    订阅失败

    WebGL 可视化3D绘图框架:Three.js 零基础上手实战
    WebGL 可视化3D绘图框架:Three.js 零基础上手实战 ...

    订阅列表已满,请先移出部分订阅内容。

    当前章节需购买后观看
    开通超级会员免费看!专家精选系列课程,满足你从入门到精通!更有问答月卡免费送,你的问题有问必答!
    提交答案

    购买课程

    扫码完成付费,可继续学习全部课程内容

    加载中...
    播放页问题反馈
    视频学习中有任何产品建议都可由此反
    馈,我们将及时处理!

    课时介绍

    实战 Three.js 中的点精灵、粒子系统_中国城市PM2.5可视化案例02_利用Points模型实现

    课程介绍

    相对于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基础即可学习。

    推荐课程

    信息系统项目管理师自考笔记

    李明 · 723人在学

    python从0到1:期货量化交易系统(CTP实战,高频及合成K线数据

    王先生 · 22105人在学

    手把手搭建Java超市管理系统【附源码】(毕设)

    汤小洋 · 4205人在学

    Java毕设springboot外卖点餐系统 毕业设计毕设源码 使用教

    黄菊华 · 788人在学

    基于SSM酒店管理系统(毕设)

    小尼老师 · 842人在学

    java项目实战之购物商城(java毕业设计)

    Long · 5154人在学

    手把手搭建Java求职招聘系统【附源码】(毕设)

    汤小洋 · 1506人在学

    Python Django 深度学习 小程序

    钟翔 · 2319人在学

    城管局门前三包管理系统+微信小程序(vue+springboot)

    赖国荣 · 598人在学

    Vue+Uni-app(uniapp)入门与实战+赠送仿美团点餐小程序

    李杰 · 3985人在学

    正在试验
    后自动删除环境
    课程实验
    本次实验时间已到期 00:00:00
    课件正在飞速打包中,请耐心等待几秒钟~