目录：/V-1335：Three.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.向量

案例源码

顶点位置、UV、法向量

1.Geometry创建三角面设置UV坐标.html

Earth.png

.cross ()叉乘——任意几何体表面积计算.html

.dot()方法——计算三角形夹角余弦值.html

控制台查看向量对象数据结构.html

两点之间距离计算.html

知识点.html

Vector2.js

Vector3.js

Vector4.js

2.矩阵

0.了解矩阵对象.html

知识点.html

Matrix3.js

Matrix4.js

3.旋转、平移和缩放矩阵

0.变换矩阵.html

知识点.html

4.投影矩阵、视图矩阵

6.1正投影和透视投影相机

0.正投影相机.html

1.透视投影相机.html

lookat镜头来回晃动.html

lookat起作用.html

知识点.html

Camera.js

Object3D.js

OrthographicCamera.js

PerspectiveCamera.js

5.包围盒Box3、Box2、Sphere

案例源码

加载一个外部模型显示包围盒

0.可视化展示包围盒.html

1.考虑层级模型坐标.html

2.包围球情况.html

group.json

.setFromPoints().html

0.几何体居中.html

知识点.html

Box2.js

Box3.js

Geometry.js

Sphere.js

6.欧拉Euler和四元数Quaternion

0.测试.html

知识点.html

Euler.js

Object3D.js

Quaternion.js

7.几何计算Line3、Triangle、Ray、Plane

0.测试.html

知识点.html

Line3.js

Plane.js

Ray.js

Triangle.js

Three.js系统原理

1.场景、相机和渲染器

原生WebGL代码.html

知识点.html

threejs渲染一个3D场景.html

2.WebGL渲染器简介

源码案例

15.1-场景渲染结果网页局部显示

0.全屏渲染.html

1.插入局部div元素中.html

缓冲区相关

0.两帧叠加.html

1.清除深度缓冲区数据.html

渲染管线.png

知识点.html

3.renderers目录下渲染器相关代码块介绍

知识点.html

4.顶点数据封装

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

0.测试.html

1.原生WebGL代码.html

2.顶点索引绘制绘制线框立方体.html

知识点.html

BufferAttribute.js

BufferGeometry.js

Geometry.js

5.解析几何体提取顶点数据

示意图

几何体.png

解析规则.png

Threejs解析流程图.png

Geometry转化为BufferGeometry

5.设置Geometry顶点位置、顶点颜色数据

0.Vector3定义顶点数据.html

1.定义顶点颜色数据.html

6.Face3对象定义Geometry的三角面

0.设置Face3顶点索引、法向量.html

1Face3颜色和geometry的colors属性.html

BufferGeometry.js

DirectGeometry.js

JavaScript语法

测试.html

WeakMap.html

原生webgl代码.html

知识点.html

WebGLAttributes.js

WebGLGeometries.js

WebGLObjects.js

WebGLRenderer.js

6.层级模型封装和解析

6、层级模型、树结构

1.组对象Group、层级模型

组对象Group、层级模型.html

2.对象节点命名、查找、遍历

对象节点命名、查找、遍历.html

递归算法

0.html

层级模型.jpg

知识点.html

Object3D.js

WebGLRenderer.js

7.本地矩阵和世界矩阵

6.3本地位置坐标、世界位置坐标

本地位置坐标、世界位置坐标.html

本地矩阵和世界矩阵.jpg

知识点.html

Matrix4.js

Object3D.js

8.对象具体分类过程

示意图

对象分类.png

渲染器渲染函数.png

Threejs解析流程图.png

知识点.html

WebGLRenderLists.js

WebGLRenderStates.js

9.点线网格模型和绘制模式

点线网格模型对象

0.html

Line.js

LineLoop.js

LineSegments.js

Mesh.js

Points.js

SkinnedMesh.js

原生WebGL

0.绘制一个点.html

1.绘制一个线框立方体.html

2.立方体(每个面一种颜色).html

顶点索引绘制线框立方体.html

模型对应绘制模式.png

知识点.html

WebGLBufferRenderer.js

WebGLIndexedBufferRenderer.js

10.光源对象分类

光源对象封装

lights

AmbientLight.js

DirectionalLight.js

DirectionalLightShadow.js

HemisphereLight.js

Light.js

LightShadow.js

PointLight.js

RectAreaLight.js

SpotLight.js

SpotLightShadow.js

0.html

光源对象分类.png

知识点.html

WebGLLights.js

WebGLRenderStates.js

11.Material对应的Shader

材质对象封装

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

0.JavaScript语法.html

知识点.html

Material与shader.jpg

WebGLPrograms.js

12.处理shader代码

原生WebGL代码.html

着色器处理流程.jpg

知识点.html

WebGLProgram.js

WebGLPrograms.js

WebGLShader.js

13.着色器字符串处理—材质属性、光源数量

着色器字符串处理.png

知识点.html

14.火狐查看Three.js合成的着色器shader

处理后顶点shader.glsl

处理后片元shader.glsl

meshphong_frag.glsl

meshphong_vert.glsl

threejs程序.html

15.传值-attribute

原生WebGL代码.html

知识点.html

BufferGeometry与attribute变量名.png

gl.getProgramParameter.html

WebGLProgram.js

16.uniform变量传值

原生WebGL

0.原生WebGL代码.html

1.批量获得uniform变量索引地址.html

2.结构体uniform变量传值.html

3.获得结构体的索引地址.html

4.uniform数组变量.html

5.数组+结构体.html

知识点.html

lights_fragment_begin.glsl

lights_pars_begin.glsl

map_pars_fragment.glsl

normalmap_pars_fragment.glsl

WebGLUniforms.js

17.着色器材质对象ShaderMaterial

知识点.html

Three.js着色器教程

1.第一个three.js着色器程序

0.WebGL.html

1.ShaderMaterial.html

2.线条绘制模式.html

3.三角形绘制模式.html

4.RawShaderMaterial.html

知识点.html

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

知识点.html

Earth.png

7.着色器——彩色图处理为灰度图

0.彩色图处理为灰度图.html

Earth.png

panda.png

8.着色器——UV动画

0.着色器——太阳纹理贴图.html

1.着色器——UV动画.html

2.纹理对象offset属性.html

大气.png

知识点.html

Earth.png

EarthNormal.png

EarthSpec.png

9.着色器——着色器模块.glsl调用

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

知识点.html

10.着色器——系统uniforms模块调用UniformsLib

0.uniforms设置.html

1.UniformsLib.html

知识点.html

Earth.png

UniformsLib.js

UniformsUtils.js

11.着色器——模仿系统的材质对象

0.实现点材质.html

1.实现网格材质MeshPhongMaterial.html

知识点.html

ShaderChunk.js

ShaderLib.js

12.着色器——自动提取光源对象信息

0.直接定义光源相关uniform变量值.html

1.从threejs光源对象自动提取值.html

2.通过THREE.ShaderChunk调用着色器代码块.html

知识点.html

bsdfs.glsl

common.glsl

lights_pars_begin.glsl

13.着色器——phong网格材质二次开发

0.Phong片元着色器插入灰度图代码.html

知识点.html

Earth.png

EarthNormal.png

meshphong_frag.glsl

meshphong_vert.glsl

14.WebGLRenderTarget(离屏渲染)

0.立方体场景.html

1.渲染一个场景结果作为另一个场景网格模型贴图.html

知识点.html

15.WebGLRenderTarget实现灰度图后处理功能

0.渲染一个立方体然后处理为灰度图.html

1.后处理结果作为纹理贴图(2个渲染目标对象).html

知识点.html

16.后处理EffectComposer—自定义着色器

扩展库

postprocessing

EffectComposer.js

RenderPass.js

ShaderPass.js

shaders

CopyShader.js

0.自定义后处理着色器.html

1.提取R分量.html

2.多个后处理通道.html

知识点.html

earth.png

17.后处理EffectComposer——直接调用常见通道

postprocessing

EffectComposer.js

FilmPass.js

RenderPass.js

ShaderPass.js

shaders

CopyShader.js

FilmShader.js

0.GlitchPass.html

1.FilmPass.html

2.OutlinePass.html

知识点.html