Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
Web3D系统课程视频
  • 1. 声明一个变量
  • 2. 声明一个常量const
  • 3. 数据类型—基本类型
  • 4. 数据类型-向量
    • 5. 数据类型-矩阵
    • 6. if-else语句和for语句
    • 7. 内置变量
    • 8. attribute、uniform、varying
    • 9. 顶点和片元着色器
    • 10. 取样器sampler2D
    • 11. 内置函数
    • 12. 着色器计算精度precision
    • 13. 函数
    • 14. 结构体
    • 15. discard舍弃片元
    • 16. 数组
    • 17. 预处理
    • ES GLSL着色器语言
    郭隆邦
    2026-05-22
    目录

    4. 数据类型-向量

    # 矢量/向量

    矢量或者说向量,可以通过2~4个分量表示一个向量,比如通过vec3(1,0,0)表示三维空间中一个沿着x轴正方向的三维方向向量,如果你有高中数学的基础,应该对向量有一定的了解,对于三维坐标的相关几何运算也有一定的概念。

    关键字 数据类型
    vec2 二维向量,具有xy两个分量,分量是浮点数
    vec3 三维向量 ,具有xyz三个分量,分量是浮点数
    vec4 四维向量 ,具有xyzw四个分量,分量是浮点数
    ivec2 二维向量,分量是整型数
    ivec3 三维向量 ,分量是整型数
    ivec4 四维向量 ,分量是整型数
    bvec2 二维向量,分量是布尔值bool
    bvec3 三维向量 ,分量是布尔值bool
    bvec4 四维向量 ,分量是布尔值bool

    # 声明变量

    关键子vec3声明一个三维向量变量

    vec3 direction;
    

    # 构造函数赋值

    向量类型数据需要通过相应的构造函数创建,vec3()构造函数创建一个三维向量赋值给direction变量。

    vec3 direction;
    // 赋值
    direction = vec3(1.0,0.0,0.0);
    
    // 声明一个整型二维向量,ivec2所有参数都是整型数
    ivec2 iv2 = ivec2(5,3);
    

    # 常见声明代码案例

    通过vec3等向量关键子声明一个变量,可以在着色器表示多种含义的向量,比如表示一个光源、相机等对象的位置坐标,比如光源的方向,比如光源或物体颜色值...

    // 声明一个三维向量,方向是x轴方向,注意vec3构造函数的参数是浮点数
    vec3 direction = vec3(1.0,0.0,0.0);
    // 声明一个位置变量pos,10.2,9.6,3.9分别表示三维坐标中xyz坐标
    vec3 pos = vec3(10.2,9.6,3.9)
    

    # 访问获取向量分量

    一个向量由多个不同分量构成,可以通过点符号.访问。

    你也可以把vec3、vec4等函数创建的向量类比为javascript语言的对象,.x、.y、.z、.w是向量对象的属性,可以获取属性值,也可以访问改变向量对象的属性值。

    向量vector 访问
    第1个分量 vector.x
    第2个分量 vector.y
    第3个分量 vector.z
    第4个分量 vector.w
    // 声明一个三维向量,假设向量表示三维坐标中一个位置坐标
    vec3 pos = vec3(10.2,9.6,3.9);
    // 访问x坐标
    float x = pos.x;//访问获取向量的x分量
    // 访问z坐标
    float z = pos.z;//访问获取向量的z分量
    
    // 声明一个三维向量,假设表示RGB颜色值,三个参数分别表示红色R、绿色G、蓝色B
    vec3 rgb = vec3(0.5,0.3,0.2);
    // 访问颜色值R分量
    float R = rgb.x;//访问获取向量的x分量
    // 访问颜色值G分量
    float G = rgb.z;//访问获取向量的z分量
    

    向量的分量可以获取赋值给其它的变量,也可以通过访问分量改变向量的值。

    // 声明一个三维向量,假设向量表示三维坐标中一个位置坐标
    vec3 pos = vec3(10.2,9.6,3.9);
    // 三维向量pos的x分量被改变,相当于在原来的基础上沿着x轴平移2.0
    pos.x = pos.x+2.0;
    // 直接改变三维向量的x分量,相当于把顶点的x坐标值直接设置为20.0
    pos.x = 20.0;
    

    # 向量分量更多灵活写法

    着色器编程的时候,为了更方面编写程序,着色器语法规定了更多向量灵活的写法。

    // 声明一个三维向量变量,并赋值
    vec3 v3 = vec3(10.0,9.0,3.0);
    // 声明一个二维向量
    vec2 v2;
    // 提取向量v3的xy两个分量赋值给二维向量v2
    v2 = v3.xy;//v3.xy相等于vec2(10.0,9.0);
    // v3的x分量赋值给v2的x分量,v3的z分量赋值给v2的y分量
    v2 = v3.xz;//获得zx分量  v3.xz等价于vec2(10.0,3.0)
    v2 = v3.yz;//获得yz分量
    //获得zx分量 v3的z分量赋值给v2的x分量,v3的x分量赋值给v2的y分量
    v2 = v3.zx;
    
    // 声明一个四维向量变量,并赋值
    vec4 v4 = vec4(10.0,9.0,3.0,1.0);
    // 提取v4前三个分量,并赋值给一个三维向量变量
    vec3 v3 = v4.xyz;
    
    // 声明一个四维向量变量,并赋值
    vec4 v4 = vec4(10.0,9.0,3.0,1.0);
    // 访问特定分量,使用构造函数重新构造一个向量
    vec3 v3 = vec3(v4.x,2.9,v4.y);
    vec2 v2 = vec2(v4.x,v4.z);
    

    # 数学运算(向量和数字)

    一个向量加一个数字,相当于每个分量加上该数字,注意向量分量是整型数还是浮点数,加上的数字保持数据类型一致。.

    vec3 pos = vec3(1.0,2.0,3.0);
    pos = pos+1.0;//pos新的值为vec3(2.0,3.0,4.0)
    vec3 pos2 = pos+1.0;//pos不改变,赋值给新的变量
    

    减法、乘法、除法运算规则和加法相似

    减法

    vec3 pos = vec3(1.0,2.0,3.0);
    pos = pos-1.0;//pos新的值为vec3(0.0,1.0,2.0)
    

    乘法

    vec3 pos = vec3(1.0,2.0,3.0);
    pos = pos*2.0;//pos新的值为vec3(2.0,4.0,6.0)
    

    除法

    vec3 pos = vec3(1.0,2.0,3.0);
    pos = pos/2.0;//pos新的值为vec3(0.5,1.0,1.5)
    

    # 数学运算(向量和向量)

    两个向量相加,就是两个向量的三个分量分别相加。

    vec3 v1 = vec3(1.0,2.0,3.0);
    vec3 v2 = vec3(-1.0,-2.0,-3.0);
    vec3 v3 = v1+v2;//结果为vec3(0.0,0.0,0.0)
    

    减法、乘法、除法运算规则和加法相似

    减法

    vec3 v1 = vec3(1.0,2.0,3.0);
    vec3 v2 = vec3(-1.0,-2.0,-3.0);
    vec3 v3 = v1-v2;//结果为vec3(2.0,4.0,6.0)
    

    乘法

    vec3 v1 = vec3(1.0,2.0,3.0);
    vec3 v2 = vec3(-1.0,-2.0,-3.0);
    vec3 v3 = v1*v2;//结果为vec3(-1.0,-4.0,-9.0)
    

    除法

    vec3 v1 = vec3(1.0,2.0,3.0);
    vec3 v2 = vec3(-1.0,-2.0,-3.0);
    vec3 v3 = v1/v2;//结果为vec3(-1.0,-1.0,-1.0)
    
    3. 数据类型—基本类型
    5. 数据类型-矩阵

    ← 3. 数据类型—基本类型 5. 数据类型-矩阵→

    Theme by Vdoing | Copyright © 2016-2026 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式