求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
 
 
 
开班计划 | 技术学院 | 管理学院 | 嵌入式学院 | 机械 | 军工学院 | 定向培养 | 专家指导  
 电话 English
成功案例   品质保证
 
   
成功案例
航天信息 Java EE 5
中科院研 J2EE高级开发
赛迪时代 “J2EE设计模式
福富软件 J2EE设计模式和
上海盛趣 J2EE架构设计
信城通 J2EE体系架构设
北大方正 Java中级&J2

相关课程  
Struts+Spring+Hibernate
基于J2EE的Web 2.0应用开发
J2EE设计模式和性能调优
Java EE 5企业级架构设计
Java单元测试方法与技术
Java编程方法与技术
 

全部课程 >web开发  
Three.js 3D 引擎详解与应用开发
1380 次浏览  54 次
赵老师
某软件公司前端负责人
 
时间地点: 在线、北京、上海、深圳根据报名开班
课程费用: 5000元/人
企业内训:可以根据企业需求,定制内训,详见 内训学习手册
   


认证方式:
培训前了解能力模型。
培训后进行能力评测:
  • 在线考试
  • 能力分析,给出学习建议
  • 合格者颁发证书,作为职业技能资格证明


    课程简介:

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。

    本课程通过一个完整项目开发流程,带领学员熟悉,掌握涉及到3D展示的前端项目设计,开发,Three.js各常用API的使用,Debugger,以及学会如何通过社区,其他手册类工具不断提高自身对Three.js深度内容的学习和掌握。同时简单介绍一些前端知识和开发体系,强化业务能力,提高开发效率。

    培训目标
    • 掌握前端开发重点内容,熟悉WebGL基本原理
    • 熟悉WebGL基本原理,尝试动手完成一个WebGL项目
    • 熟悉Threejs基本原理,重点了解场景,相机,顶点等概念
    • 熟悉Threejs基本原理,重点了解光源,层级模型,几何体等概念,通过当日内容进行课堂实践,加深理解
    • 熟悉Threejs基本原理,重点了解纹理贴图,相机。
    • 熟悉Threejs基本原理,通过两天内容可以独立完成Threejs项目开发
    培训对象:web开发工程师。
    学员基础:熟悉Javascript编程
    授课方式:定制课程 + 案例讲解 + 小组讨论,60%案例讲解,40%实践演练

    培训内容:2天

    WebGL 基础巩固:主要全面巩固WebGL 基础内容,全面梳理WebGL基础知识点,Three.js是基于WebGl API的封装,全面了解WebGL有助于更好的理解Threejs各项API背后逻辑和基本概念。
    目标: 掌握前端开发重点内容,熟悉WebGL基本原理 1. 前端基础
    • 前端重点内容
    • 项目搭建
    2.WebGL 基础
    • WebGL 基本原理
    • WebGL 是如何工作的
    • WebGL 着色器和 GLSL
    3.图像处理:
    • WebGL 图像处理
    4.2D 转换、旋转、伸缩、矩阵
    • WebGL 2D 图像转换
    • WebGL 2D 图像旋转
    • WebGL 2D 图像伸缩
    • WebGL 2D 矩阵
    目标: 熟悉WebGL基本原理,尝试动手完成一个WebGL项目 1. 3D
    • WebGL 3D 正交
    • WebGL 3D 透视
    • WebGL 3D 摄像机
    2.结构与组织
    • WebGL 更少代码,更多乐趣
    • WebGL 绘制多个东西
    • WebGL 场景图
    3. WebGL实践
    WebGL 基础巩固:主要全面巩固WebGL 基础内容,全面梳理WebGL基础知识点,Three.js是基于WebGl API的封装,全面了解WebGL有助于更好的理解Threejs各项API背后逻辑和基本概念。
    目标: 熟悉Threejs基本原理,重点了解场景,相机,顶点等概念 1. Threejs第一个3D场景(HTML框架文件)
    • 创建HTML
    • 旋转动画、requestAnimationFrame周期性渲染
    • 鼠标操作三维场景旋转缩放
    • 场景插入新的几何体
    • 设置材质效果
    • 光照效果设置
    2. 顶点概念、几何体结和
    • 顶点位置数据解析渲染
    • 顶点颜色数据插值计算
    • 顶点法向量数据光照计算
    • 顶点索引复用顶点数据
    • 设置Geometry顶点位置、顶点颜色数据
    • Face3对象定义Geometry的三角面
    • 访问几何体对象的数据
    • 几何体旋转、缩放、平移变换
    3. 材质对象
    • 1.常用材质介绍
    • 2.材质共有属性、私有属性
    目标: 熟悉Threejs基本原理,重点了解光源,层级模型,几何体等概念,通过当日内容进行课堂实践,加深理解 1. 点线面模型对象
    • 点、线、网格模型介绍
    • 模型对象旋转平移缩放变换
    • 对象克隆clone复制copy
    2. 光源对象
    • 光照原理和常见光源类型
    • 阴影投影计
    • 基类Light和Object3D
    3. 层级模型、树结构
    • 组对象Group、层级模型
    • 对象节点命名、查找、遍历
    • 本地位置坐标、世界位置坐标
    4. 几何体对象、曲线、三维建模
    • 常见几何体和曲线API介绍
    • 圆弧线绘制(直线、椭圆、圆弧)、基类Curve
    • 样条曲线、贝赛尔曲线
    • 多个线条组合曲线CurvePath
    • 曲线路径管道成型TubeGeometry
    • 旋转成型LatheGeometry
    • Shape对象和轮廓填充ShapeGeometry
    • 拉伸扫描成型ExtrudeGeometry
    • Threejs
    Threejs 详解 :第三天主要进入Threejs收尾内容 详解Threejs剩余API,结合第二天内容完成第一个Threejs项目制作
    目标: 熟悉Threejs基本原理,重点了解纹理贴图,相机。 1. 纹理贴图
    • 创建纹理贴图
    • UV映射原理(顶点纹理坐标)
    • 数组材质、材质索引materialIndex
    • 纹理对象Texture(阵列、偏移、旋转...)
    • canvas画布、视频作为纹理贴图
    • 凹凸贴图、法线贴图(压缩模型)
    • 光照贴图添加阴影
    • 高光贴图
    • 环境贴图
    • 10.数据纹理对象DataTexture
    2. 相机对象(投影方式)
    • 正投影和透视投影相机
    • 窗口变化自适应渲染
    3. 精灵模型、粒子系统
    • 精灵模型对象Sprite
    • 中国城市PM2.5可视化案例
    • 树林效果
    • 下雨场景效果模拟
    目标: 熟悉Threejs基本原理,通过两天内容可以独立完成Threejs项目开发 1. 帧动画模块
    • 编辑关键帧并解析播放
    • 解析外部模型的的帧动画
    • 播放设置(暂停、时间段、时间点)
    2. 骨骼动画、变形动画
    • 骨骼动画原理
    • 加载外部模型骨骼动画
    • 变形目标动画原理
    • 解析外部模型变形目标数据
    3. 模型文件加载
    • Three.js数据结构、导入导出
    • 加载stl文件并解析
    • 加载obj文件(几何体、材质、贴图)
    • 加载FBX并解析骨骼动画
    • 手镯在线预览(商品展示)
    4. Threejs 项目实践 完成DIY项目
    5. Threejs 社区分享,优秀插件介绍
     
     
    1380 次浏览  54 次
    其他人还看了课程
    Node.js高级应用开发  2911 次浏览
    Node+Vue3.0前端全栈开发实战  380 次浏览
    Web应用开发(基于LAMP架构)  2821 次浏览
    Node.js开发原理与应用  2322 次浏览
    基于Nginx构建强大的Web服务器  3001 次浏览
    ASP.NET企业级应用开发  2053 次浏览
    定制内训


    课程计划
    面向对象业务分析与系统设计 10-16[线上]
    嵌入式软件架构设计-高级实践 10-17[线上]
    Qlik Sense数据分析技术 10-17线上]
    基于 UML 和EA进行分析设计 10-22[北京]
    用户研究与用户建模 10-24[北京]
    QT应用开发 10-24[北京]