你将学到的
  • ThreeJS 介绍
  • 绘制基础场景
  • 使用 Skybox 创建 3D 世界
  • 实现地月环绕系统
  • ThreeJS 基础与核心概念
  • 与 MVVM 框架结合使用
  • 实现 3D 地图
  • ThreeJS 粒子特效

图片描述

早在通信技术的 3G 时代,我们的技术人员就发现图片、视频存在加载缓慢等问题,虽然有几张图片能使网站看起来更加好看,但是那时大多数的网站还是以文字为主,在行业里也没有将 UI 设计师单独划为一个岗位的说法。直到到了 4G 时代,网速以及智能手机的普及使得我们可以做更多事情,例如较为流畅地进行直播、玩游戏、看视频等操作,同时 UI 等与美学设计相关的职位也进入到各个行业中,因为制作者逐渐发现好的设计方式往往能够留住更多的用户。这也是用户需求不断提升的体现。

可以看到,我们的网站从显示文字,再过渡到显示图片、视频、游戏等,再如今已经过渡到虚拟现实世界,浏览器在不断地支持更多的展现方式。例如,你不满足于 2D 游戏在网页上带来的体验,想开发一款 3D 游戏增加用户的视觉体验,那么 WebGL 技术的诞生便可以支持 Web 开发人员借助系统 GPU 的能力,在浏览器中展示各种 3D 场景和模型。如下图所示,是用 WebGL 编写的魔方,你可以对它进行拖拽交互完成方块的旋转 (点击 rubikscube ,进行访问)。

图片描述

我们从这个魔方可以看到,搭建这样的一个模型,首先要画出点、线和面,形成一个正方体。然后,对它进行上色,添加视角的转动等等。

除了搭建简单的几何体,你还可根据业务复杂程度绘制更加复杂的模型。我们再来看一个场景,下图是一个水族馆场景,里面游动着数量很多的鱼类( 点击 aquarium ,进行访问)。

图片描述

为了加速 Web 3D 应用的开发,ThreeJS 这样便利的类库迅速被人们接受。ThreeJS 是 Github 上的开源项目。通常在 WebGL 中,如果你要通过矩阵变换坐标,将三维坐标转变为屏幕上的二维坐标,是要自己去完成的。而在 ThreeJS 中,它能帮我们自动计算矩阵,将三维坐标转换为二维坐标,这就简化了很多复杂的工作。再例如,WebGL 学习到深入阶段,需要掌握 Javascript 和 GLSL 两种语言才能进行着色器的开发。但是,使用 ThreeJS 显然可以跳过这些难懂的底层知识。

本课程将带领你入门 Three.js 的使用,然后编写一些实战项目进行巩固强化。

  • 实现地月环绕

图片描述

  • 实现粒子特效

图片描述

先学课程

课程信息

  • 学习周期:课程有效期 2 个月,2 个月后无法进行在线实验,但可查看文档内容。高级会员有效期内可一直学习,到期后课程失效,且无法查看文档。部分云主机实验环境因成本较高,存在开启次数限制。关于课程退款等相关注意事项说明,请阅读 用户付费协议
  • 版权说明:课程内容为蓝桥云课原创或蓝桥云课在原作者授权下制作。未经书面同意,擅自爬取、转载和再分发课程内容,均将受到严肃追责。
  • 企业团报:企业购买,请点击 企业用户咨询
课程教师

wind 前端技术专家 知名外企 | 世界100强 共发布过 2 门课程

腳踏實地,潛下心,塑造生命

查看老师的所有课程 >
会员
开通会员,即刻开始学习