课程目录
0001-导学+附赠资料-1-1-导学.mp4
0004-导学+附赠资料-4-1-计算机图形学第四版.pdf
0005-导学+附赠资料-5-1-WebGL编程指南.pdf
0007-webgl入门-1-1-webgl课程介绍 – 副本.mp4
0007-webgl入门-1-1-webgl课程介绍.mp4
0008-webgl入门-1-2-概述.mp4
0009-webgl入门-1-3-webgl 最短教程.mp4
0010-webgl入门-1-4-css颜色转webgl颜色.mp4
0011-webgl入门-1-5-多姿多彩的画布.mp4
0012-webgl入门-1-6-webgl坐标系.mp4
0013-webgl入门-1-7-webgl绘图原理.mp4
0014-webgl入门-1-8-画一个点.mp4
0015-webgl入门-1-9-归纳总结.mp4
0017-webgl入门-2-1-用js控制点位.mp4
0018-webgl入门-2-2-webgl函数命名规律.mp4
0019-webgl入门-2-3-用鼠标控制点位.mp4
0020-webgl入门-2-4-webgl同步绘图原理.mp4
0021-webgl入门-2-5-用js修改顶点尺寸.mp4
0023-webgl入门-3-1-用js修改顶点颜色.mp4
0024-webgl入门-3-2-绘制圆点.mp4
0025-webgl入门-3-3-鼠标绘制随机透明度的星星.mp4
0026-webgl入门-3-4-架构补间动画.mp4
0027-webgl入门-3-5-星星向你眨眼睛.mp4
0029-webgl入门-4-1-绘制多点.mp4
0030-webgl入门-4-2-绘制线.mp4
0031-webgl入门-4-3-绘制面.mp4
0032-webgl入门-4-4-绘制矩形面.mp4
0035-webgl入门-5-1-图形封装.mp4
0036-webgl入门-5-2-鼠标绘制线条.mp4
0037-webgl入门-5-3-鼠标绘制多线.mp4
0038-webgl入门-5-4-狮子座整体思路.mp4
0039-webgl入门-5-5-狮子座案例.mp4
0041-webgl入门-6-1-图形转面的原理.mp4
0042-webgl入门-6-2-图形转面的实现.mp4
0043-webgl入门-6-3-mac系统兼容性的坑.mp4
0045-webgl入门-7-1-位移.mp4
0046-webgl入门-7-2-旋转.mp4
0047-webgl入门-7-3-缩放.mp4
0048-webgl入门-7-4-矩阵旋转.mp4
0049-webgl入门-7-5-矩阵位移和缩放.mp4
0050-webgl入门-7-6-矩阵库.mp4
0052-webgl入门-8-1-矩阵乘法.mp4
0053-webgl入门-8-2-复合变换.mp4
0054-webgl入门-8-3-视图矩阵.mp4
0055-webgl入门-8-4-模型矩阵.mp4
0056-webgl入门-8-5-一池春水.mp4
0058-webgl入门-9-1-多点异色.mp4
0059-webgl入门-9-2-attribute数据合一.mp4
0060-webgl入门-9-3-一抹绿意.mp4
0061-webgl入门-9-4-一片春色.mp4
0062-webgl入门-9-5-纹理之基础概念.mp4
0063-webgl入门-9-6-纹理贴图.mp4
0064-webgl入门-9-7-纹理容器.mp4
0065-webgl入门-9-8-分子贴图.mp4
0066-webgl入门-9-9-魔方.mp4
0067-webgl入门-9-10-纹理模块化.mp4
0068-webgl入门-9-11-多图加载和片元相乘.mp4
0069-webgl入门-9-12-纹理混合.mp4
0070-webgl入门-9-13-花样转场.mp4
0071-webgl入门-9-14-换装达人.mp4
0072-webgl入门-9-15-跨域贴图.mp4
0073-webgl入门-9-15-跨域贴图.mp4
0074-webgl入门-9-16-视频贴图.mp4
0076-webgl入门-10-1-视图矩阵的本质.mp4
0078-webgl入门-11-1-打印向量.mp4
0079-webgl入门-11-2-打印多个向量.mp4
0080-webgl入门-11-3-变量.mp4
0081-webgl入门-11-4-向量.mp4
0082-webgl入门-11-5-矩阵.mp4
0083-webgl入门-11-6-运算符与向量运算.mp4
0084-webgl入门-11-7-矩阵运算.mp4
0085-webgl入门-11-8-struct与数组.mp4
0086-webgl入门-11-9-for循环.mp4
0087-webgl入门-11-10-函数.mp4
0088-webgl入门-11-11-变量的作用域.mp4
0089-webgl入门-11-12-渐变.mp4
0090-webgl入门-11-13-多节点渐变.mp4
0091-webgl入门-11-14-用js设置渐变节点.mp4
0092-webgl入门-11-15-径向渐变和极坐标渐变.mp4
0093-webgl入门-11-16-三点渐变.mp4
0094-webgl入门-11-17-肌理.mp4
0095-webgl入门-11-18-极坐标.mp4
0096-webgl入门-11-19-放射旋转与闪烁.mp4
0097-webgl入门-11-20-多极点放射动画.mp4
0098-webgl入门-11-21-全景图的极坐标扭曲.mp4
0099-webgl入门-11-22-磨砂金属按钮.mp4
0100-webgl入门-11-23-element3+webgl.mp4
0102-webgl入门-12-1-世界坐标系和本地坐标系.mp4
0103-webgl入门-12-2-本地坐标位转世界坐标位.mp4
0104-webgl入门-12-3-绕坐标轴逆时针旋转.mp4
0105-webgl入门-12-4-欧拉.mp4
0106-webgl入门-12-5-四元数.mp4
0107-webgl入门-12-6-正交投影矩阵.mp4
0108-webgl入门-12-7-用正交投影矩阵解决图形拉伸问题.mp4
0109-webgl入门-12-8-视图位移.mp4
0110-webgl入门-12-9-世界坐标系.mp4
0111-webgl入门-12-10-逆矩阵.mp4
0112-webgl入门-12-11-视图旋转.mp4
0113-webgl入门-12-12-透视投影矩阵基础知识.mp4
0114-webgl入门-12-13-透视投影矩阵深度剖析.mp4
0115-webgl入门-12-14-透视投影矩阵牛刀小试.mp4
0116-webgl入门-12-15-投影视图模型矩阵共冶一炉.mp4
0117-webgl入门-12-16-正交相机位移轨道.mp4
0118-webgl入门-12-17-正交相机缩放轨道.mp4
0119-webgl入门-12-18-正交相机旋转轨道的概念.mp4
0120-webgl入门-12-19-正交相机旋转轨道代码实现.mp4
0121-webgl入门-12-20-正交相机旋转轨道限制旋转轴和极角.mp4
0122-webgl入门-12-21-正交相机轨迹球旋转.mp4
0123-webgl入门-12-22-透视相机位移轨道.mp4
0124-webgl入门-12-23-透视相机缩放轨道.mp4
0125-webgl入门-12-24-透视相机旋转轨道.mp4
0126-webgl入门-12-25-相机轨道封装.mp4
0127-webgl入门-12-26-顶点索引.mp4
0128-webgl入门-12-27-多着色器绘图.mp4
0129-webgl入门-12-28-多着色器绘图动画.mp4
0130-webgl入门-12-29-webgl框架-几何体对象.mp4
0131-webgl入门-12-30-webgl框架-材质对象.mp4
0132-webgl入门-12-31-webgl框架-三维对象和场景对象.mp4
0133-webgl入门-12-32-webgl框架测试-多着色器.mp4
0134-webgl入门-12-33-webgl框架测试-顶点索引.mp4
0135-webgl入门-12-34-基点变换原理.mp4
0136-webgl入门-12-35-基点变换示例.mp4
0137-webgl入门-12-36-鼠标变换图片-前期准备.mp4
0138-webgl入门-12-37-鼠标变换图片-拖拽.mp4
0139-webgl入门-12-38-鼠标变换图片-旋转.mp4
0140-webgl入门-12-39-鼠标变换图片-缩放.mp4
0141-webgl入门-12-40-鼠标变换图片-保留初始点位.mp4
0142-webgl入门-12-41-射线与平面的交点-数学解.mp4
0143-webgl入门-12-42-射线与平面的交点-代码.mp4
0144-webgl入门-12-43-在空间中判断点是否在三角形中.mp4
0145-webgl入门-12-44-鼠标选择立方体.mp4
0146-webgl入门-12-45-优化webgl框架.mp4
0147-webgl入门-12-46-别墅楼层布局图.mp4
0148-webgl入门-12-47-优化相机轨道控制器.mp4
0149-webgl入门-12-48-相机轨道补间动画.mp4
0151-webgl入门-13-1-认识光.mp4
0152-webgl入门-13-2-着色原理.mp4
0153-webgl入门-13-3-漫反射.mp4
0154-webgl入门-13-4-镜面反射.mp4
0155-webgl入门-13-5-环境反射.mp4
0156-webgl入门-13-6-显示法线.mp4
0157-webgl入门-13-7-着色频率的概念.mp4
0158-webgl入门-13-8-自建球体.mp4
0159-webgl入门-13-9-逐三角形着色.mp4
0160-webgl入门-13-10-世界坐标系里的法线和顶点.mp4
0161-webgl入门-13-11-逐顶点着色.mp4
0162-webgl入门-13-12-逐片元着色.mp4
0163-webgl入门-13-13-筒灯.mp4
0164-webgl入门-13-14-锥形灯.mp4
0165-webgl入门-13-15-扩展案例-泉.mp4
0166-webgl入门-13-16-帧缓冲区的建立.mp4
0167-webgl入门-13-17-帧缓冲区的显示.mp4
0168-webgl入门-13-18-帧缓冲区深度测试.mp4
0169-webgl入门-13-19-投影贴图.mp4
0170-webgl入门-13-20-投影.mp4
0171-webgl入门-13-21-提高深度数据存储精度.mp4
0172-webgl入门-13-22-帧缓冲区的封装.mp4
0173-webgl入门-13-23-帧缓冲区实例化.mp4
0174-webgl入门-13-24-等距圆柱投影贴图.mp4
0175-webgl入门-13-25-地球.mp4
0176-webgl入门-13-26-地球-标记点.mp4
0177-webgl入门-13-27-VR.mp4
0178-webgl入门-13-28-陀螺仪测试.mp4
0179-webgl入门-13-29-VR+陀螺仪.mp4
0180-webgl入门-13-30-VR开场动画.mp4
0181-webgl入门-13-31-VR标记点-射线与球体的交点.mp4
0182-webgl入门-13-32-VR标记点-代码实现.mp4
0183-webgl入门-13-33-VR场景切换.mp4
0184-webgl入门-13-34-VR场景过度.mp4
0185-webgl入门-13-35-认识宽度线.mp4
0186-webgl入门-13-36-宽度线的绘制原理.mp4
0187-webgl入门-13-37-绘制宽度线.mp4
0188-webgl入门-13-38-宽度线贴图.mp4
0190-three-1-1-01-three概述.mp4
0191-three-1-2-02-牛刀小试.mp4
0192-three-1-3-03-用webpack+ts开发three.mp4
0194-three-2-1-01-三维机房项目简介.mp4
0195-three-2-2-02-构建react+ts+threejs项目.mp4
0196-three-2-3-03-三维机房对象的封装.mp4
0197-three-2-4-04-修改模型材质.mp4
0198-three-2-5-05-鼠标选择IT机柜.mp4
0199-three-2-6-06-机柜信息面板.mp4
0200-three-2-7-07-Apifox接口调试.mp4
0202-three-3-1-01-threejs渲染结构.mp4
0203-three-3-2-02-canvas画布响应式布局.mp4
0204-three-3-3-03-canvas自适应设备分辨率.mp4
0206-three-4-1-01-threejs内置二维几何体.mp4
0207-three-4-2-02-threejs内置三维几何体.mp4
0208-three-4-3-03-threejs内置路径合成几何体.mp4
0209-three-4-4-04-threejs内置线性几何体.mp4
课件.zip
开课吧-高薪webGL工程师-2022年-价值2899元-重磅首发-完结无秘
——更多资源,课程更新在 智圣商学院 www.jiaoshengxi.com
用一顿早餐钱，改变余生。你还在等什么？
零成本倍增中小企业净利润
5倍提升你的成交率
教你更聪明地赚钱
—智圣商学院 ·焦圣希 18818568866
#营销# #管理# #商业# #创业# #话术# #咨询#
#销售# #运营# #微商# #策划# #实体店# #引流#
?1000节免费公开课?
百度搜索：焦圣希
微信：18818568866（每天前3位免费咨询）
抖音：焦圣希 （每晚 9 点~12 点 直播，商业领域，有问必答）
电话咨询：1000元/小时
私企定制：2999起/年
企业培训：10000起/课
官网：https://www.jiaoshengxi.com
SEO 编辑导读：以下内容依据原文公开信息重新整理，用于补充主题说明、阅读路线和常见问题。
内容简介与核心价值
本课程是面向高薪WebGL工程师的进阶教程，系统梳理了从图形学基础到商业级项目实战的全套知识体系。课程不仅包含计算机图形学第四版等经典理论，更通过大量代码案例演示了如何利用JS控制点位、实现矩阵变换、处理纹理贴图及跨域加载。内容深入剖析视图矩阵、投影矩阵本质，并封装相机轨道控制器，支持VR与陀螺仪交互。后半段引入Three.js框架，结合React+TS构建三维机房项目，涵盖模型材质修改、API接口调试及响应式布局优化。学习后您将具备独立开发复杂3D网页应用的能力，掌握从底层原理到上层框架的完整技术栈，是前端开发者转型3D领域的优质资源。
本文重点内容
- 传统前端开发缺乏三维视觉表现力，难以满足现代Web应用对沉浸式体验的需求。
- 计算机图形学理论晦涩难懂，缺乏系统性的数学推导与代码实践结合的教学路径。
- WebGL底层编程门槛高，矩阵运算、着色器编写及性能优化常成为开发者瓶颈。
- 市面上Three.js教程多为碎片化内容，缺少从原理到商业项目落地的完整闭环案例。
- 缺乏对相机轨道、射线检测、深度测试等高级交互技术的深入讲解与实战演练。
适合什么人
- 希望转型Web 3D开发的前端工程师或全栈开发者。
- 需要提升产品视觉表现力，构建沉浸式H5页面的产品经理或设计师。
- 从事游戏开发、数字孪生、VR/AR应用开发的初级技术人员。
- 对计算机图形学数学原理（矩阵、向量、四元数）感兴趣的学习者。
- 希望掌握Three.js框架并具备自定义渲染能力的高级开发者。
- 需要从零开始构建三维机房、虚拟展厅等商业项目的技术团队。
哪些情况暂时不适合
- 完全没有编程基础，且无法接受数学公式推导的零基础小白。
- 仅需简单使用现成3D插件，不愿深入理解底层渲染原理的用户。
- 追求快速变现但拒绝投入时间学习复杂图形学知识的投机者。
建议阅读、学习或使用路线
- 第一步：观看导学与资料包，建立计算机图形学与WebGL编程指南的理论框架。
- 第二步：完成WebGL入门章节，掌握画布初始化、坐标系、绘图原理及基础几何体绘制。
- 第三步：深入学习矩阵变换与着色器，理解视图、模型、投影矩阵的本质与应用。
- 第四步：攻克纹理贴图、跨域加载、帧缓冲区及VR交互等高级渲染技术难点。
- 第五步：进入Three.js框架学习，掌握React+TS开发模式及内置几何体与材质封装。
- 第六步：完成三维机房项目实战，整合API接口调试、响应式布局及性能优化技巧。
内容结构与重点解析
课程目录结构清晰，分为导学资料、WebGL入门、Three.js框架及项目实战四大模块。导学部分提供图形学与编程指南PDF；WebGL入门章节从画布初始化到矩阵变换、纹理贴图、帧缓冲区等核心知识点层层递进，包含大量如'绘制圆点''鼠标控制点位''狮子座案例'等生动演示；随后深入探讨视图/模型/投影矩阵本质及相机轨道封装；Three.js部分则聚焦React+TS开发模式，涵盖三维机房项目构建、材质修改及API调试；最后通过别墅布局图、地球VR等综合案例整合所有技能。整体内容覆盖从底层原理到上层框架的全链路技术栈，适合系统学习Web 3D开发。
阅读后可以重点获得什么
- 能够独立编写WebGL代码实现自定义着色器、纹理混合及动态光照效果。
- 熟练掌握矩阵运算与四元数旋转，能解决图形拉伸与坐标变换中的常见问题。
- 具备封装相机轨道控制器能力，支持鼠标拖拽、缩放及旋转的流畅交互体验。
- 能够使用Three.js快速构建三维场景，并实现模型加载、材质修改及事件监听。
- 掌握从底层GLSL到上层框架的完整技术栈，能优化渲染性能与内存管理。
- 具备开发VR应用的能力，包括射线检测、标记点交互及场景切换逻辑实现。
实用提示与注意事项
- 区别于普通前端教程，本课程深入讲解计算机图形学第四版核心数学原理，而非仅停留在API调用层面。
- 提供大量原创代码案例，如狮子座绘制、磨砂金属按钮、全景图极坐标扭曲等，增强实战理解。
- 系统梳理视图矩阵与投影矩阵的数学本质，帮助开发者从根本上解决3D空间变换难题。
- 结合商业项目需求，强调性能优化、跨域处理及VR设备兼容性测试等工程化实践细节。
阅读与使用建议
建议先通读导学资料与编程指南PDF，建立图形学理论基础后再进入视频学习。WebGL入门部分需边看代码边动手实验，特别是矩阵变换与着色器编写环节，务必理解数学原理而非仅复制粘贴。Three.js框架部分可结合React项目实战，尝试修改内置几何体与材质参数。若遇到跨域或性能问题，参考课程中的优化章节与相机轨道封装案例。注意Mac系统兼容性坑及VR设备测试环境搭建，确保开发环境稳定。
原文发布日期：2022年08月24日 原文分类：个人成长
常见问题
课程是否包含Three.js框架的完整项目实战？
是的，课程后半段专门介绍Three.js渲染结构、React+TS项目构建及三维机房案例，涵盖模型材质修改、API接口调试与响应式布局优化。
学习本课程需要哪些前置知识？
建议具备JavaScript基础及HTML5 Canvas经验，对线性代数（矩阵、向量）有一定了解会更轻松，但课程导学部分会补充必要数学概念。
课程是否支持VR与陀螺仪交互开发？
支持，课程包含VR标记点、射线与球体交点计算、陀螺仪测试及场景切换等完整VR应用开发案例，适合构建沉浸式体验项目。
导读最近更新时间：2026年10月13日
算算这笔账，你就知道怎么选更划算
你正在尝试购买单门课程（¥19.00）。
但在您支付前，请先看一眼这笔账：
买 1 门课 = ¥ 19
买 5 门课 = ¥ 95
解锁全站 500000+ 课程 (永久SVIP) = 仅需 ¥ 99 🤯
🤔 还在到处找资源？
别浪费时间了！全网热门课程，这里都有。
外面卖 299、1999 的割韭菜课， 这里通通包含在SVIP 里。
☕️ 少喝 3 杯奶茶 (¥99)
换一个终身学习/搞钱的资源库。
今日仅需 99 元，解锁全站终身钻石SVIP
💎 SVIP 永久会员
- 全站 500000+ 课程永久免费下
- 每日 更新热门课程50+(站内没有可联系站长帮你找)
- 送 AI/N8N 自动化资源库
- 每门课程 不到 0.01元/门
