519资源网 [编程语言]Three.js进阶教程
Three.js进阶教程 资源介绍
有一定的Threejs基础和WebGL基础，希望能够深入理解Three.js引擎，想了解Threejs是如何对WebGL API和着色器封装的，想了解Threejs向量、矩阵等数学知识，在实际的项目中需要使用Threejs自定义着色器代码。
资源目录：
│
├─Threejs高级进阶素材
│ │ 个人博客地址.txt
│ │
│ ├─Three.js数学相关内容
│ │ ├─1.向量
│ │ │ │ Vector2.js
│ │ │ │ Vector3.js
│ │ │ │ Vector4.js
│ │ │ │ 知识点.html
│ │ │ │
│ │ │ └─案例源码
│ │ │ │ .cross ()叉乘——任意几何体表面积计算.html
│ │ │ │ .dot()方法——计算三角形夹角余弦值.html
│ │ │ │ 两点之间距离计算.html
│ │ │ │ 控制台查看向量对象数据结构.html
│ │ │ │
│ │ │ └─顶点位置、UV、法向量
│ │ │ 1.Geometry创建三角面设置UV坐标.html
│ │ │ Earth.png
│ │ │
│ │ ├─2.矩阵
│ │ │ 0.了解矩阵对象.html
│ │ │ Matrix3.js
│ │ │ Matrix4.js
│ │ │ 知识点.html
│ │ │
│ │ ├─3.旋转、平移和缩放矩阵
│ │ │ 0.变换矩阵.html
│ │ │ 知识点.html
│ │ │
│ │ ├─4.投影矩阵、视图矩阵
│ │ │ │ Camera.js
│ │ │ │ Object3D.js
│ │ │ │ OrthographicCamera.js
│ │ │ │ PerspectiveCamera.js
│ │ │ │ 知识点.html
│ │ │ │
│ │ │ └─6.1正投影和透视投影相机
│ │ │ 0.正投影相机.html
│ │ │ 1.透视投影相机.html
│ │ │ lookat起作用.html
│ │ │ lookat镜头来回晃动.html
│ │ │
│ │ ├─5.包围盒Box3、Box2、Sphere
│ │ │ │ 0.几何体居中.html
│ │ │ │ Box2.js
│ │ │ │ Box3.js
│ │ │ │ Geometry.js
│ │ │ │ Sphere.js
│ │ │ │ 知识点.html
│ │ │ │
│ │ │ └─案例源码
│ │ │ │ .setFromPoints().html
│ │ │ │
│ │ │ └─加载一个外部模型显示包围盒
│ │ │ 0.可视化展示包围盒.html
│ │ │ 1.考虑层级模型坐标.html
│ │ │ 2.包围球情况.html
│ │ │ group.json
│ │ │
│ │ ├─6.欧拉Euler和四元数Quaternion
│ │ │ 0.测试.html
│ │ │ Euler.js
│ │ │ Object3D.js
│ │ │ Quaternion.js
│ │ │ 知识点.html
│ │ │
│ │ └─7.几何计算Line3、Triangle、Ray、Plane
│ │ 0.测试.html
│ │ Line3.js
│ │ Plane.js
│ │ Ray.js
│ │ Triangle.js
│ │ 知识点.html
│ │
│ ├─Three.js着色器教程
│ │ ├─1.第一个three.js着色器程序
│ │ │ 0.WebGL.html
│ │ │ 1.ShaderMaterial.html
│ │ │ 2.线条绘制模式.html
│ │ │ 3.三角形绘制模式.html
│ │ │ 4.RawShaderMaterial.html
│ │ │ 知识点.html
│ │ │
│ │ ├─10.着色器——系统uniforms模块调用UniformsLib
│ │ │ 0.uniforms设置.html
│ │ │ 1.UniformsLib.html
│ │ │ Earth.png
│ │ │ UniformsLib.js
│ │ │ UniformsUtils.js
│ │ │ 知识点.html
│ │ │
│ │ ├─11.着色器——模仿系统的材质对象
│ │ │ 0.实现点材质.html
│ │ │ 1.实现网格材质MeshPhongMaterial.html
│ │ │ ShaderChunk.js
│ │ │ ShaderLib.js
│ │ │ 知识点.html
│ │ │
│ │ ├─12.着色器——自动提取光源对象信息
│ │ │ 0.直接定义光源相关uniform变量值.html
│ │ │ 1.从threejs光源对象自动提取值.html
│ │ │ 2.通过THREE.ShaderChunk调用着色器代码块.html
│ │ │ bsdfs.glsl
│ │ │ common.glsl
│ │ │ lights_pars_begin.glsl
│ │ │ 知识点.html
│ │ │
│ │ ├─13.着色器——phong网格材质二次开发
│ │ │ 0.Phong片元着色器插入灰度图代码.html
│ │ │ Earth.png
│ │ │ EarthNormal.png
│ │ │ meshphong_frag.glsl
│ │ │ meshphong_vert.glsl
│ │ │ 知识点.html
│ │ │
│ │ ├─14.WebGLRenderTarget(离屏渲染)
│ │ │ 0.立方体场景.html
│ │ │ 1.渲染一个场景结果作为另一个场景网格模型贴图.html
│ │ │ 知识点.html
│ │ │
│ │ ├─15.WebGLRenderTarget实现灰度图后处理功能
│ │ │ 0.渲染一个立方体然后处理为灰度图.html
│ │ │ 1.后处理结果作为纹理贴图(2个渲染目标对象).html
│ │ │ 知识点.html
│ │ │
│ │ ├─16.后处理EffectComposer—自定义着色器
│ │ │ │ 0.自定义后处理着色器.html
│ │ │ │ 1.提取R分量.html
│ │ │ │ 2.多个后处理通道.html
│ │ │ │ earth.png
│ │ │ │ 知识点.html
│ │ │ │
│ │ │ └─扩展库
│ │ │ ├─postprocessing
│ │ │ │ EffectComposer.js
│ │ │ │ RenderPass.js
│ │ │ │ ShaderPass.js
│ │ │ │
│ │ │ └─shaders
│ │ │ CopyShader.js
│ │ │
│ │ ├─17.后处理EffectComposer——直接调用常见通道
│ │ │ │ 0.GlitchPass.html
│ │ │ │ 1.FilmPass.html
│ │ │ │ 2.OutlinePass.html
│ │ │ │ 知识点.html
│ │ │ │
│ │ │ ├─postprocessing
│ │ │ │ EffectComposer.js
│ │ │ │ FilmPass.js
│ │ │ │ RenderPass.js
│ │ │ │ ShaderPass.js
│ │ │ │
│ │ │ └─shaders
│ │ │ CopyShader.js
│ │ │ FilmShader.js
│ │ │
│ │ ├─2.着色器——矩阵变换
│ │ │ 0.不进行矩阵变换.html
│ │ │ 1.模型变换.html
│ │ │ 2.相机视图、投影变换.html
│ │ │ 知识点.html
│ │ │
│ │ ├─3.着色器——Uniform
│ │ │ 0.自定义color变量.html
│ │ │ 1.定义一个变换矩阵.html
│ │ │ 知识点.html
│ │ │
│ │ ├─4.着色器——光照计算
│ │ │ 0.无光照计算.html
│ │ │ 1.自定义光照uniform.html
│ │ │ 2.RawShaderMaterial.html
│ │ │ 知识点.html
│ │ │
│ │ ├─5.着色器——颜色插值计算
│ │ │ 0.着色器——顶点颜色插值计算.html
│ │ │ 知识点.html
│ │ │
│ │ ├─6.着色器——纹理贴图
│ │ │ 0.纹理贴图.html
│ │ │ Earth.png
│ │ │ 知识点.html
│ │ │
│ │ ├─7.着色器——彩色图处理为灰度图
│ │ │ 0.彩色图处理为灰度图.html
│ │ │ Earth.png
│ │ │ panda.png
│ │ │
│ │ ├─8.着色器——UV动画
│ │ │ 0.着色器——太阳纹理贴图.html
│ │ │ 1.着色器——UV动画.html
│ │ │ 2.纹理对象offset属性.html
│ │ │ Earth.png
│ │ │ EarthNormal.png
│ │ │ EarthSpec.png
│ │ │ 大气.png
│ │ │ 知识点.html
│ │ │
│ │ └─9.着色器——着色器模块.glsl调用
│ │ │ 知识点.html
│ │ │
│ │ ├─1.顶点矩阵变换着色器块project_vertex.glsl的调用
│ │ │ 0.顶点投影、视图、模型矩阵变换.html
│ │ │ 1.project_vertex.glsl的调用.html
│ │ │ begin_vertex.glsl
│ │ │ project_vertex.glsl
│ │ │
│ │ └─2.颜色贴图模块着色器代码调用
│ │ 0.纹理贴图.html
│ │ 1.调用map_pars_fragment.html
│ │ 2.调用map_pars_fragment.html
│ │ Earth.png
│ │ map_pars_fragment.glsl
│ │ uv_pars_fragment.glsl
│ │
│ └─Three.js系统原理
│ ├─1.场景、相机和渲染器
│ │ threejs渲染一个3D场景.html
│ │ 原生WebGL代码.html
│ │ 知识点.html
│ │
│ ├─10.光源对象分类
│ │ │ WebGLLights.js
│ │ │ WebGLRenderStates.js
│ │ │ 光源对象分类.png
│ │ │ 知识点.html
│ │ │
│ │ └─光源对象封装
│ │ │ 0.html
│ │ │
│ │ └─lights
│ │ AmbientLight.js
│ │ DirectionalLight.js
│ │ DirectionalLightShadow.js
│ │ HemisphereLight.js
│ │ Light.js
│ │ LightShadow.js
│ │ PointLight.js
│ │ RectAreaLight.js
│ │ SpotLight.js
│ │ SpotLightShadow.js
│ │
│ ├─11.Material对应的Shader
│ │ │ 0.JavaScript语法.html
│ │ │ Material与shader.jpg
│ │ │ WebGLPrograms.js
│ │ │ 知识点.html
│ │ │
│ │ └─材质对象封装
│ │ └─materials
│ │ LineBasicMaterial.js
│ │ LineDashedMaterial.js
│ │ Material.js
│ │ Materials.js
│ │ MeshBasicMaterial.js
│ │ MeshDepthMaterial.js
│ │ MeshDistanceMaterial.js
│ │ MeshLambertMaterial.js
│ │ MeshNormalMaterial.js
│ │ MeshPhongMaterial.js
│ │ MeshPhysicalMaterial.js
│ │ MeshStandardMaterial.js
│ │ MeshToonMaterial.js
│ │ PointsMaterial.js
│ │ RawShaderMaterial.js
│ │ ShaderMaterial.js
│ │ ShadowMaterial.js
│ │ SpriteMaterial.js
│ │
│ ├─12.处理shader代码
│ │ WebGLProgram.js
│ │ WebGLPrograms.js
│ │ WebGLShader.js
│ │ 原生WebGL代码.html
│ │ 着色器处理流程.jpg
│ │ 知识点.html
│ │
│ ├─13.着色器字符串处理—材质属性、光源数量
│ │ 着色器字符串处理.png
│ │ 知识点.html
│ │
│ ├─14.火狐查看Three.js合成的着色器shader
│ │ meshphong_frag.glsl
│ │ meshphong_vert.glsl
│ │ threejs程序.html
│ │ 处理后片元shader.glsl
│ │ 处理后顶点shader.glsl
│ │
│ ├─15.传值-attribute
│ │ BufferGeometry与attribute变量名.png
│ │ gl.getProgramParameter.html
│ │ WebGLProgram.js
│ │ 原生WebGL代码.html
│ │ 知识点.html
│ │
│ ├─16.uniform变量传值
│ │ │ lights_fragment_begin.glsl
│ │ │ lights_pars_begin.glsl
│ │ │ map_pars_fragment.glsl
│ │ │ normalmap_pars_fragment.glsl
│ │ │ WebGLUniforms.js
│ │ │ 知识点.html
│ │ │
│ │ └─原生WebGL
│ │ 0.原生WebGL代码.html
│ │ 1.批量获得uniform变量索引地址.html
│ │ 2.结构体uniform变量传值.html
│ │ 3.获得结构体的索引地址.html
│ │ 4.uniform数组变量.html
│ │ 5.数组+结构体.html
│ │
│ ├─17.着色器材质对象ShaderMaterial
│ │ 知识点.html
│ │
│ ├─2.WebGL渲染器简介
│ │ │ 渲染管线.png
│ │ │ 知识点.html
│ │ │
│ │ └─源码案例
│ │ ├─15.1-场景渲染结果网页局部显示
│ │ │ 0.全屏渲染.html
│ │ │ 1.插入局部div元素中.html
│ │ │
│ │ └─缓冲区相关
│ │ 0.两帧叠加.html
│ │ 1.清除深度缓冲区数据.html
│ │
│ ├─3.renderers目录下渲染器相关代码块介绍
│ │ 知识点.html
│ │
│ ├─4.顶点数据封装
│ │ │ 0.测试.html
│ │ │ 1.原生WebGL代码.html
│ │ │ 2.顶点索引绘制绘制线框立方体.html
│ │ │ BufferAttribute.js
│ │ │ BufferGeometry.js
│ │ │ Geometry.js
│ │ │ 知识点.html
│ │ │
│ │ └─2、顶点概念、几何体结构
│ │ ├─1.顶点位置数据解析渲染
│ │ │ 顶点位置数据解析渲染.html
│ │ │
│ │ ├─2.顶点颜色数据插值计算
│ │ │ 0.每个顶点显示一种颜色.html
│ │ │ 1.彩色线条.html
│ │ │ 2.彩色三角面.html
│ │ │
│ │ ├─3.顶点法向量数据光照计算
│ │ │ 顶点法向量光照计算.html
│ │ │
│ │ ├─4.顶点索引复用顶点数据
│ │ │ 0.矩形非索引绘制.html
│ │ │ 1.矩形索引绘制.html
│ │ │
│ │ ├─5.设置Geometry顶点位置、顶点颜色数据
│ │ │ 0.Vector3定义顶点数据.html
│ │ │ 1.定义顶点颜色数据.html
│ │ │
│ │ ├─6.Face3对象定义Geometry的三角面
│ │ │ 0.设置Face3顶点索引、法向量.html
│ │ │ 1Face3颜色和geometry的colors属性.html
│ │ │
│ │ ├─7.访问几何体对象的数据
│ │ │ 0.访问几何体对象的数据.html
│ │ │ 1.设置立方体顶点颜色.html
│ │ │ 2.删除立方体一个面.html
│ │ │
│ │ └─8.旋转平移缩放变换、复制、克隆
│ │ 0.几何体旋转、平移、缩放变换.html
│ │
│ ├─5.解析几何体提取顶点数据
│ │ │ WebGLAttributes.js
│ │ │ WebGLGeometries.js
│ │ │ WebGLObjects.js
│ │ │ WebGLRenderer.js
│ │ │ 原生webgl代码.html
│ │ │ 知识点.html
│ │ │
│ │ ├─Geometry转化为BufferGeometry
│ │ │ │ BufferGeometry.js
│ │ │ │ DirectGeometry.js
│ │ │ │
│ │ │ ├─5.设置Geometry顶点位置、顶点颜色数据
│ │ │ │ 0.Vector3定义顶点数据.html
│ │ │ │ 1.定义顶点颜色数据.html
│ │ │ │
│ │ │ └─6.Face3对象定义Geometry的三角面
│ │ │ 0.设置Face3顶点索引、法向量.html
│ │ │ 1Face3颜色和geometry的colors属性.html
│ │ │
│ │ ├─JavaScript语法
│ │ │ WeakMap.html
│ │ │ 测试.html
│ │ │
│ │ └─示意图
│ │ Threejs解析流程图.png
│ │ 几何体.png
│ │ 解析规则.png
│ │
│ ├─6.层级模型封装和解析
│ │ │ Object3D.js
│ │ │ WebGLRenderer.js
│ │ │ 层级模型.jpg
│ │ │ 知识点.html
│ │ │
│ │ ├─6、层级模型、树结构
│ │ │ ├─1.组对象Group、层级模型
│ │ │ │ 组对象Group、层级模型.html
│ │ │ │
│ │ │ └─2.对象节点命名、查找、遍历
│ │ │ 对象节点命名、查找、遍历.html
│ │ │
│ │ └─递归算法
│ │ 0.html
│ │
│ ├─7.本地矩阵和世界矩阵
│ │ │ Matrix4.js
│ │ │ Object3D.js
│ │ │ 本地矩阵和世界矩阵.jpg
│ │ │ 知识点.html
│ │ │
│ │ └─6.3本地位置坐标、世界位置坐标
│ │ 本地位置坐标、世界位置坐标.html
│ │
│ ├─8.对象具体分类过程
│ │ │ WebGLRenderLists.js
│ │ │ WebGLRenderStates.js
│ │ │ 知识点.html
│ │ │
│ │ └─示意图
│ │ Threejs解析流程图.png
│ │ 对象分类.png
│ │ 渲染器渲染函数.png
│ │
│ └─9.点线网格模型和绘制模式
│ │ WebGLBufferRenderer.js
│ │ WebGLIndexedBufferRenderer.js
│ │ 模型对应绘制模式.png
│ │ 知识点.html
│ │
│ ├─原生WebGL
│ │ 0.绘制一个点.html
│ │ 1.绘制一个线框立方体.html
│ │ 2.立方体(每个面一种颜色).html
│ │ 顶点索引绘制线框立方体.html
│ │
│ └─点线网格模型对象
│ 0.html
│ Line.js
│ LineLoop.js
│ LineSegments.js
│ Mesh.js
│ Points.js
│ SkinnedMesh.js
│
├─第1章 学习必看
│ 0 Three.js中文文档 .mp4
│
├─第2章 数学Math
│ 02 向量.mp4
│ 03 矩阵.mp4
│ 04 旋转、平移和缩放矩阵.mp4
│ 05 投影矩阵、视图矩阵.mp4
│ 06 包围盒Box3、Box2、Sphere.mp4
│ 07 欧拉Euler和四元数Quaternion.mp4
│ 08 几何计算Line3、Triangle、Ray、Plane.mp4
│
├─第3章 Threejs系统原理
│ 09 场景、相机和渲染器.mp4
│ 10 WebGL渲染器简介.mp4
│ 11 renderers目录下渲染器相关代码块介绍-1.mp4
│ 11 renderers目录下渲染器相关代码块介绍-2.mp4
│ 12 顶点数据封装.mp4
│ 13 解析几何体提取顶点数据.mp4
│ 14 层级模型封装和解析.mp4
│ 15 本地矩阵和世界矩阵.mp4
│ 16 对象具体分类过程.mp4
│ 17 点线网格模型和绘制模式.mp4
│ 18 光源对象分类.mp4
│ 19 Material对应的Shader.mp4
│ 20 处理shader代码.mp4
│ 21 着色器字符串处理—材质属性、光源数量.mp4
│ 22 火狐查看Three.js合成的着色器shader.mp4
│ 23 传值-attribute.mp4
│ 24 uniform变量传值.mp4
│ 25 着色器材质对象ShaderMaterial.mp4
│
└─第4章 Threejs自定义着色器
26 第一个three.js着色器程序.mp4
27 着色器——矩阵变换.mp4
28 着色器——Uniform.mp4
29 光照计算.mp4
30 颜色插值计算.mp4
31 纹理贴图.mp4
32 彩色图处理为灰度图.mp4
33 UV动画.mp4
34 着色器模块.glsl调用.mp4
35 系统uniforms模块调用UniformsLib.mp4
36 模仿系统的材质对象.mp4
37 自动提取光源对象信息.mp4
38 phong网格材质二次开发.mp4
39 WebGLRenderTarget(离屏渲染).mp4
40 WebGLRenderTarget实现灰度图后处理功能.mp4
41 后处理EffectComposer—自定义着色器.mp4
42 后处理EffectComposer——直接调用常见通道.mp4
Three.js进阶教程 下载地址
1. 本站所有资源来源于用户上传和网络，如侵犯到您的权益请使用邮件联系管理员！
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好资源，可以到审核区发布，分享有积分奖励和额外收入！
4. 如有链接无法下载、失效或广告，请留言或联系管理员处理！
Kindle电子书mobi、epub、azw3、PDF电子书免费下载推送 » [编程语言]Three.js进阶教程
2. 分享目的仅供大家学习和交流，请不要用于商业用途！
3. 如果你也有好资源，可以到审核区发布，分享有积分奖励和额外收入！
4. 如有链接无法下载、失效或广告，请留言或联系管理员处理！
Kindle电子书mobi、epub、azw3、PDF电子书免费下载推送 » [编程语言]Three.js进阶教程
![[编程语言]2020年最新尚硅谷ES6教程](https://i2.wp.com/imgs.ipv6yun.com/images/2021/04/11/35cc1bffdc3dc457d603d51b42358e02.png?w=150&resize=150,150&ssl=1 "[编程语言]2020年最新尚硅谷ES6教程")
![[前端编程]2019最新JavaScript培训(前鹅厂大牛)](https://i1.wp.com/imgs.ipv6yun.com/images/2020/11/26/e55771275c6497675605479424340f09.png?w=150&resize=150,150&ssl=1 "[前端编程]2019最新JavaScript培训(前鹅厂大牛)")
![[编程语言]高级前端成长训练营大前端69期](https://i1.wp.com/imgs.ipv6yun.com/images/2021/02/15/60223d742d99b34e9a1055052ef66e93.png?w=150&resize=150,150&ssl=1 "[编程语言]高级前端成长训练营大前端69期")
