视频课 手把手带你玩转Three.js数字孪生3D开发
手把手带你玩转Three.js数字孪生3D开发
72节课 | 时长 802:03
收藏
¥499.00         46已购买
立即购买
  • 课程概述
  • 目录
  • 评论(0)

3D时代来袭,Three JS 技术最值钱:

1. 从文字到图片,再到视频、游戏、虚拟现实世界等,浏览器在不断地支持更多的展现方式。例如,你不满足于 2D 游戏在网页上带来的体验,想开发一款 3D 游戏增加用户的视觉体验,那么 WebGL 技术的诞生便可以支持 Web 开发人员借助系统 GPU 的能力,在浏览器中展示各种 3D 场景和模型。

2.使用基于 WebGL 的技术,目前的应用已经越来越丰富了。不仅仅在游戏,在家居、虚拟现实、城市地图等领域也在发挥它的作用。并且,随着 WebGL 规范的完善,越来越多浏览器已经全方位地支持 WebGL 了,如今已经有大量丰富的例子供开发者学习,好的 3D 应用在腾讯开放平台上能够带来不错的广告投放和访问量,也会收到不错的回报。

3.Three.js 是 Github 上的开源项目。通常在 WebGL 中,如果你要通过矩阵变换坐标,将三维坐标转变为屏幕上的二维坐标,是要自己去完成的。而在 Three.js 中,它能帮我们自动计算矩阵,将三维坐标转换为二维坐标,这就简化了很多复杂的工作。再例如,WebGL 学习到深入阶段,需要掌握 Javascript 和 GLSL 两种语言才能进行着色器的开发。但是,使用 Three.js 显然可以跳过这些难懂的底层知识。Three.js 作为一款前端 3D 引擎,其应用范围越来越广,不管是房产网站的 3D 看房,还是购物网站的 3D 模型预览,都能用到 Three.js。

4.《手把手带你玩转Three.js数字孪生3D开发》本套课程,你快速学习 Three.js,拥有开发三维动画和游戏、三维地图的能力。在本门课程中,我们提供了大量的案例,这些案例能帮助你快速学习 Three.js ,并掌握其中的基础知识。Three.js 已成为前端工程师的一项特殊技能,在面试过程中能让面试官眼前一亮,助你升职加薪!


课程技术点:Html+Css+JavaScript+Three.js

 

授课讲师

 

课程适合对象:

适合零基础入门3D开发的同学

该课程需要有前端开发基础

 

课程优势:

1. 适合零基础学员:课程由浅入深,技术点内容数量由小到大,逐步掌握技术在项目场景下的应用。

2. 企业级项目实战:整体课程以案例的形式授课,帮助学生将理论和实践相结合,达到学以致用,举一反三的功效。

3. 课程提供全程指导:课程授课中,讲师答疑辅导,实时帮助学生解决学习过程中遇到的问题。

4. 一线大咖讲师,提高技术思维:中地数码一线工程师亲授技术精华、剖析前沿案例,直击技术要点 ;


课程服务:

1. 答疑服务:讲师答疑,答你所疑——项目课程授课中,讲师答疑辅导,实时帮助学生解决学习过程中遇到的问题。

2. 笔记巩固:边学边记,随用随查——总结出专属于你自己的技术手册,项目方案

3. 资料总结:让你的学习“丰富”又“便捷”——配套教辅一样不少:讲师源码、工具素材、配套教辅、Git仓库

4. 课程回放:一次购买可以重复学习——提供课程全部视频课程,学员可在司马云平台重复学习

 

课程收获:



课程成果展示:

选中播放
1.1 课程介绍 08:22
试看
2.1 three.js官网部署 02:41
试看
2.2 three.js官网部署 04:11
试看
2.3 搭建开发环境介绍 04:17
2.4 搭建开发环境-演示 09:33
3.1 起步案例-基础概念 06:14
3.2 起步案例-实现思路 03:55
3.4 起步案例-演示(上) 12:58
3.5 起步案例-演示(下) 11:37
3.6 起步案例-渲染优化 03:52
4.1 显示坐标系-介绍 04:55
4.2 显示坐标系-演示 12:24
4.3 轨道控制器-介绍 05:57
4.4 轨道控制器-演示 08:50
4.5 自适应画布 05:44
5.1 网格辅助工具 04:38
5.2 网格辅助工具-演示 09:04
5.3 基础变换-介绍 05:24
5.4 基础变换-演示 08:39
5.5 集成GUI工具 23:18
6.1 物体网格概述 06:04
7.1 立方体介绍 27:51
7.2 立方体代码演示 27:51
7.3 基本球体实现 10:07
7.4 Gui工具封装 28:53
7.5 基础平面实现 10:05
7.6 缓冲区几何体 11:35
8.1 基础材质 17:59
8.2 Gui扩展-支持材质设置 12:29
8.3 法向材质 06:53
8.4 PBR材质 18:26
9.1 普通纹理贴图 12:09
9.2 凹凸纹理贴图 08:14
9.3 法向纹理贴图 06:49
9.4 环境纹理贴图 21:23
10.1 场景概述 04:39
10.2 背景颜色 06:32
10.3 单一图片 04:39
10.4全景图 05:57
10.5 HDR图 14:44
10.6 环境属性 13:27
10.7 雾化 14:26
11.1 相机概述 08:34
11.2 相机参数 15:55
11.3 调整视点 05:09
11.4 调整观察点 04:03
11.5 实时渲染 14:45
11.6 正交相机参数 06:29
11.7 正交相机实时渲染 05:28
12.1 光线与阴影概述 06:40
12.2 环境光 09:11
12.3 聚光灯属性 09:42
12.4 聚光灯阴影效果 12:46
12.5 点光源属性 06:26
12.6 点光源阴影效果 03:38
12.7 平行光属性 05:42
12.8 平行光阴影效果 07:48
13.1 3D模型格式介绍 14:23
13.2 加载obj文件 15:18
13.3 加载gltf文件 13:24
14.1 精灵与粒子简介 03:47
14.2 精灵对象 09:04
14.3 粒子对象 15:51
14.4 模拟下雨-基本逻辑 17:33
14.5 模拟下雨-添加纹理 08:01
14.6 模拟飘雪 12:44
15.1 setInterval实现动画 12:19
15.2 request Animation Frame实现动画 18:51
15.3 tween js体验 19:14
15.4 tween js集成到项目 07:15
15.5 骨骼动画 42:08
15.6 加载外部动画 22:10
综合评分:
好评(0) 中评(0) 差评(0)
暂无数据