WebGL 选中一个表面

已于 2023-09-23 14:41:45 修改
阅读量250 收藏 2
点赞数 1
分类专栏： WebGL 文章标签： webgl 3d 图形渲染
于 2023-09-21 22:22:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dabaooooq/article/details/133150683
版权

目录

选中一个表面 

示例程序（PickFace.js）

代码详解

gl.readPixels()见126行效果

gl.UNSIGNED_BYTE注意点

示例效果

选中一个表面 

​​​​​​​WebGL 选中物体_山楂树の的博客-CSDN博客可以使用同样的方法来选中物体的某一个表面。这一节在PickObject程序的基础上编写了PickFace程序，后者同样包含一个立方体，但用户可以选中立方体的某一个表面，被选中的表面会变成白色。下图显示了PickFace的运行效果。

如果你理解了PickObject的程序原理，那么PickFace就很简单了。PickObject用户在点击鼠标时，将立方体重绘为红色，然后读取鼠标点击位置的像素颜色，根据其是红色或是黑色来判断点击时鼠标是否在立方体上，即是否选中了立方体。而PickFace则更进一步，在用户点击鼠标时重绘立方体，并将“每个像素属于哪个面”的信息写入到颜色缓冲区的α分量中。下面来看一下示例程序。 

示例程序（PickFace.js）

PickFace.js的代码如下所示。为了简洁，略去了与前例相同的部分，如顶点着色器等。 

var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'attribute float a_Face;\n' +   // 曲面编号（不能将int用于属性变量）
  'uniform mat4 u_MvpMatrix;\n' +
  'uniform int u_PickedFace;\n' + // 选定面的曲面编号
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = u_MvpMatrix * a_Position;\n' +
  '  int face = int(a_Face);\n' + // 转换为int   1.0 -> 1
  '  vec3 color = (face == u_PickedFace) ? vec3(1.0) : a_Color.rgb;\n' +
  '  if(u_PickedFace == 0) {\n' + // 如果为0，则将面编号插入alpha
  '    v_Color = vec4(color, a_Face/255.0);\n' + // 6.0/255.0 = 6
  '  } else {\n' +
  '    v_Color = vec4(color, a_Color.a);\n' +
  '  }\n' +
  '}\n';
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' +
  '}\n';

var ANGLE_STEP = 20.0; // 旋转角度（20度/秒）
function main() {
  var canvas = document.getElementById('webgl');
  var gl = getWebGLContext(canvas);
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) return
  var n = initVertexBuffers(gl);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  var u_PickedFace = gl.getUniformLocation(gl.program, 'u_PickedFace');
  var viewProjMatrix = new Matrix4();
  viewProjMatrix.setPerspective(30.0, canvas.width / canvas.height, 1.0, 100.0);
  viewProjMatrix.lookAt(0.0, 0.0, 7.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
  gl.uniform1i(u_PickedFace, -1); // 默认不匹配面

  var currentAngle = 0.0; // 当前旋转角度
  canvas.onmousedown = function(ev) {   // 按下鼠标
    var x = ev.clientX, y = ev.clientY;
    var rect = ev.target.getBoundingClientRect();
    if (rect.left <= x && x < rect.right && rect.top <= y && y < rect.bottom) {
      // 如果按下的位置在＜canvas＞内，则更新表面
      var x_in_canvas = x - rect.left, y_in_canvas = rect.bottom - y;
      var face = checkFace(gl, n, x_in_canvas, y_in_canvas, currentAngle, u_PickedFace, viewProjMatrix, u_MvpMatrix);
      gl.uniform1i(u_PickedFace, face); // 将曲面编号传递给uPickedFace
      draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
    }
  }

  var tick = function() {   // Start drawing
    currentAngle = animate(currentAngle);
    draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
    requestAnimationFrame(tick, canvas);
  };
  tick();
}

function initVertexBuffers(gl) {
  //    v6----- v5
  //   /|      /|
  //  v1------v0|
  //  | |     | |
  //  | |v7---|-|v4
  //  |/      |/
  //  v2------v3
  var vertices = new Float32Array([   // Vertex coordinates
     1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,    // v0-v1-v2-v3 front
     1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,    // v0-v3-v4-v5 right
     1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,    // v0-v5-v6-v1 up
    -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,    // v1-v6-v7-v2 left
    -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,    // v7-v4-v3-v2 down
     1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0     // v4-v7-v6-v5 back
  ]);
  var colors = new Float32Array([   // Colors
    0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56,  0.32, 0.18, 0.56, // v0-v1-v2-v3 front
    0.5, 0.41, 0.69,   0.5, 0.41, 0.69,   0.5, 0.41, 0.69,   0.5, 0.41, 0.69,  // v0-v3-v4-v5 right
    0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84,  0.78, 0.69, 0.84, // v0-v5-v6-v1 up
    0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,   0.0, 0.32, 0.61,  // v1-v6-v7-v2 left
    0.27, 0.58, 0.82,  0.27, 0.58, 0.82,  0.27, 0.58, 0.82,  0.27, 0.58, 0.82, // v7-v4-v3-v2 down
    0.73, 0.82, 0.93,  0.73, 0.82, 0.93,  0.73, 0.82, 0.93,  0.73, 0.82, 0.93, // v4-v7-v6-v5 back
   ]);
  var faces = new Uint8Array([   // Faces
    1, 1, 1, 1,     // v0-v1-v2-v3 front
    2, 2, 2, 2,     // v0-v3-v4-v5 right
    3, 3, 3, 3,     // v0-v5-v6-v1 up
    4, 4, 4, 4,     // v1-v6-v7-v2 left
    5, 5, 5, 5,     // v7-v4-v3-v2 down
    6, 6, 6, 6,     // v4-v7-v6-v5 back
  ]);
  var indices = new Uint8Array([   // Indices of the vertices
     0, 1, 2,   0, 2, 3,    // front
     4, 5, 6,   4, 6, 7,    // right
     8, 9,10,   8,10,11,    // up
    12,13,14,  12,14,15,    // left
    16,17,18,  16,18,19,    // down
    20,21,22,  20,22,23     // back
  ]);
  var indexBuffer = gl.createBuffer();
  if (!initArrayBuffer(gl, vertices, gl.FLOAT, 3, 'a_Position')) return -1; // Coordinates Information
  if (!initArrayBuffer(gl, colors, gl.FLOAT, 3, 'a_Color')) return -1;      // Color Information
  if (!initArrayBuffer(gl, faces, gl.UNSIGNED_BYTE, 1, 'a_Face')) return -1;// Surface Information
  gl.bindBuffer(gl.ARRAY_BUFFER, null);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  return indices.length;
}

function checkFace(gl, n, x, y, currentAngle, u_PickedFace, viewProjMatrix, u_MvpMatrix) {
  var pixels = new Uint8Array(4); // 存储像素值的数组
  gl.uniform1i(u_PickedFace, 0);  // 将表面编号写入a分量
  draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix);
  /* 
    在WebGL中，gl.readPixels()函数用于从帧缓冲区中读取像素数据（而非颜色缓冲区中）。该函数的第六个参数用于指定返回的像素数据的数据类型。
    当将第六个参数设置为gl.UNSIGNED_BYTE时，表示希望返回的像素数据以无符号字节的形式表示。每个像素将用一个8位无符号整数（即一个字节）来表示。
    使用gl.UNSIGNED_BYTE可以获得每个像素的红、绿、蓝和透明度通道的值（RGB或RGBA）的整数表示，取值范围在0到255之间。
    当将gl.readPixels()函数的第六个参数设置为gl.UNSIGNED_BYTE时，返回的每个像素的RGBA值都会以0到255的范围内的整数表示。
    每个颜色通道（红、绿、蓝和透明度）都用一个8位无符号整数（即一个字节）来表示
    这样的设置通常用于读取像素数据后进行图像处理、纹理操作或其他需要使用整数表示的场景。
  */
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // 读取单击位置的像素值。pixels[3]是曲面数
  console.log(pixels); // [128, 105, 176, 2]
  return pixels[3];
}

var g_MvpMatrix = new Matrix4(); // 模型视图投影矩阵
function draw(gl, n, currentAngle, viewProjMatrix, u_MvpMatrix) {
  // 计算模型视图投影矩阵并将其传递给u_MvpMatrix
  g_MvpMatrix.set(viewProjMatrix); 
  g_MvpMatrix.rotate(currentAngle, 1.0, 0.0, 0.0); // 适当旋转
  g_MvpMatrix.rotate(currentAngle, 0.0, 1.0, 0.0);
  g_MvpMatrix.rotate(currentAngle, 0.0, 0.0, 1.0);
  gl.uniformMatrix4fv(u_MvpMatrix, false, g_MvpMatrix.elements);

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);   
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);  
}

var last = Date.now();  // 上次调用此函数的时间
function animate(angle) {
  var now = Date.now(); // 计算运行时间
  var elapsed = now - last;
  last = now;
  // 更新当前旋转角度（根据经过的时间进行调整）
  var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
  return newAngle % 360;
}

function initArrayBuffer (gl, data, type, num, attribute) {
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
  var a_attribute = gl.getAttribLocation(gl.program, attribute);
  gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
  gl.enableVertexAttribArray(a_attribute);
  return true;
}

代码详解

首先，顶点着色器中添加了attribute变量a_Face，它表示立方体各表面的编号，即当前顶点属于哪个表面（第4行）。鼠标被点击时，这个值就会被“编码”成颜色值的α分量。initVertexBuffers（）函数（第63行）建立了表面编号数组faces，数组中的每个元素对应一个顶点（第87行）。比如，顶点v0-v1-v2-v3定义了1号表面，而顶点v0-v3-v4-v5定义了2号表面，等等。数组faces前4个元素都是1，表示前4个顶点都属于1号表面，以此类推（第88行）。

当某个表面被选中时，就通过u_PickedFace变量来通知顶点着色器这个表面被选中了（第6行）。这样顶点着色器就可以将这个表面绘制成白色，用户就获得了反馈，知道这个表面确实被选中了。

在正常情况下（即不在鼠标被点击的那一刻），顶点着色器会比较当前被选中的表面编号u_PickedFace和当前顶点的表面编号a_Face，如果它们相等，即当前顶点属于被选中的表面，就将color赋为白色，如果不相等，就将其赋为顶点原来的颜色a_Color。此处必须将float类型的a_Face转化为int类型，再与u_PickedFace进行比较，因为attribute变量只能是float类型的。在鼠标点击的那一刻，u_PickedFace被设为0，我们将a_Face的值写入到颜色的α分量中。

main（）函数为u_PickedFace指定初始值-1（第40行）。按照faces变量的定义（第87行），立方体各表面中没有哪一个编号是-1，所以一开始没有任何表面被选中，每一个面的颜色都是初始颜色。

gl.readPixels()见126行效果

鼠标被点击时，u_PickedFace变量变为了0，顶点着色器就在颜色缓冲区中将每个面绘制成非1的α值，并且α的值取决于表面编号。最关键的逻辑发生在鼠标点击事件的响应函数中：在获取了鼠标点击位置后，调用checkFace（）函数并传入u_PickedFace变量，也就是着色器中同名变量的存储地址（第49行）。

checkFace（）函数的任务是，根据点击位置返回选中表面的编号（第113行）。该函数首先将u_PickedFace变量设为0（第115行），然后立刻调用draw（）函数（在颜色缓冲区中，最终没有显示在屏幕上）进行绘制，此时每个表面的α值就取决于表面的编号。然后，从颜色缓冲区获取鼠标点击处的像素值（第125行），通过pixels［3］获取表面编号（即α分量，索引为3）。checkFace（）函数返回选中的表面编号，执行流程回到鼠标点击事件响应函数中，用选中的表面编号重新绘制立方体（第50～51行），并在屏幕上显示出来，如前所述。

gl.UNSIGNED_BYTE注意点

    在WebGL中，gl.readPixels()函数用于从帧缓冲区中读取像素数据（而非颜色缓冲区中）。该函数的第六个参数用于指定返回的像素数据的数据类型。

    当将第六个参数设置为gl.UNSIGNED_BYTE时，表示希望返回的像素数据以无符号字节的形式表示。每个像素将用一个8位无符号整数（即一个字节）来表示。

    使用gl.UNSIGNED_BYTE可以获得每个像素的红、绿、蓝和透明度通道的值（RGB或RGBA）的整数表示，取值范围在0到255之间。（见 gl.readPixels()见126行效果 上图）

    这样的设置通常用于读取像素数据后进行图像处理、纹理操作或其他需要使用整数表示的场景。

示例效果

山楂树の
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webgl画一个3d组合图形
12-09
正常来说，人们学习新东西都会从已有的知识出发，对于3D编程，在屏幕上画出3D图形，如果有2D图形API使用的基础，就会想着从2D编程的经验出发。
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
点燃火柴的博客
04-18 1208
通过鼠标点击选中立方体，选中立方体的某个面1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色器修改颜色缓冲区1.2.4读取像素颜色判断是否选中2.相关API介绍3.鼠标点击选中立方体demo3.1 demo效果3.2 demo代码4.鼠标点击选中立方体一个表面4.1 demo效果4.2 demo代码 1.三维物体选中原理与实现步骤 1.1物体选中原理 选中三维物体的原理就是先将物体在颜色缓冲区的颜色设置为
tdl:一个低级的 WebGL 库
06-14
TDL 是 WebGL 应用程序的低级库。 它目前专注于渲染速度而不是易用性。 一些 注意：低级是指 TDL 目前不提供任何 3D 知识。 几乎没有内置着色器。 没有场景图。 只有一些对象用于包装 WebGL 着色器并帮助轻松地将...
tolua WebGL库
08-08
好用 难得
点点滴滴：一个正在进行的Unity Webgl游戏
02-26
连接点 使用Unity开发的一款非常早期的正在进行的基于Webgl的游戏。 您可以查看最新（可能）版本。
效果超棒的Webgl模型-一堆石头
04-11
效果超棒的Webgl模型-
体渲染原理及WebGL实现【Volume Rendering】
新缸中之脑
08-12 2238
体渲染（Volume Rendering）是NeRF神经场辐射AI模型的基础，与传统渲染使用三角形来显示 3D 图形不同，体渲染使用其他方法，例如体积光线投射 (Volume Ray Casting)。本文介绍体渲染的原理并提供Three.js实现代码，源代码可以从下载。推荐：用快速搭建可编程3D场景。
3D线扫相机中的深度数据与激光反射强度数据获取及其应用
youngboy的博客
06-13 278
3D线扫相机（3D line scan camera）是一种高精度的三维测量设备，广泛应用于工业自动化、质量控制和精密测量等领域。与传统二维成像相机不同，3D线扫相机能够同时获取物体的深度信息和反射强度信息，从而为高精度三维重建和表面特性分析提供了重要数据支持。
（2D、3D效果）转换有哪些？
tianxianghuiwei的博客
06-13 193
在 CSS3 中，除了新增的伪元素外，还引入了一些用于2D和3D转换的特性。这些特性可以通过 CSS 控制元素在页面上的位置、大小和方向，从而实现动态和交互性效果。
机器学习笔记 - 用于3D数据分类、分割的Point Net的网络实现
学以致用 知行合一
06-12 193
T-net上一篇，我们大致了解了Point Net的原理，这里我们要进行一下实现。机器学习笔记 - 用于3D数据分类、分割的Point Net简述-CSDN博客文章浏览阅读3次。在本文中，我们将了解Point Net，目前，处理图像数据的方法有很多。从传统的计算机视觉方法到使用卷积神经网络到Transformer方法，几乎任何 2D 图像应用都会有某种现有的方法。然而，当涉及到 3D 数据时，现成的工具和方法并不那么丰富。3D 空间中一个工具就是Point Net。
【WEB前端2024】3D智体编程：乔布斯3D纪念馆-第40课-实时订阅后端数据
lauo1188的专栏
06-13 269
基于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的实时订阅后端数据并通过精灵3D组件显示出来（显示为文字纹理）。从而首次实现了前后端的实时联动功能。这个可以结合后端的强大的多用户互动功能，实现强大的多用户联机互动能力。或者类游戏的实时场景更新能力。并且运用在诸多的3D展厅、3D纪念馆中，实现节假日的实时活动更新、3D场景内容更新等的联机更新功能等。
3D交互软件有哪些？哪个比较简单好学？
weixin_50515446的博客
06-12 346
专业从事3D产品配置和数字孪生的在线网站，专为不懂3D和代码的人员量身打造，用户无需编写任何代码，上传3D模型后可以快速调整渲染效果及交互设置。一个物理实验的仿真，要求做出来的结果是可以在电脑上完成实验，也就是通过操作实验器材让表盘上的表针按照实际的情况运动。NOBOOK提供了物理、化学、生物等多个学科的虚拟实验平台，拥有独创的物理引擎和高精度3D模型，适合教育领域的3D交互应用。这是一款免费的物理模拟软件，可以设计和模拟物理实验，支持创建交互式物理模拟，但可能需要一定的学习曲线。
【WEB前端2024】3D智体编程：乔布斯3D纪念馆-第39课-时间通知-按秒刷新
lauo1188的专栏
06-12 843
于dtns.network智体世界引擎如何实现乔布斯3D纪念馆的碟状总部的时间通知的3D组件化按秒刷新。通过时间通知功能，可以实现后续的动态的3D场馆的交互式变化。例如用户操作影响3D场馆的场景显示、3D组件内容展现、实时互动效果显示等。可以充分的体现出3D智体编程的实时变更3D场景内容的能力。
Civil 3d中 三角网曲面求取二维和三维面积
chenjiang0611的博客
06-13 357
ObjectId sId = PromptOptionsHelper.GetPromptEntOptions("请选择曲面", typeof(Autodesk.Civil.DatabaseServices.Surface));strErr = "用户取消操作！d2dAea 和 d3dAea 可以用数据来验证，准确无误，大胆放心使用。
3D开发工具HOOPS如何推动3D打印应用实现数据格式转换、模型可视化？
Juvien_Huang的博客
06-12 652
本文深入探讨了HOOPS在3D打印系统开发中的重要性，具体体现在数据处理、模型可视化、跨平台支持和开发效率等方面。
机器学习笔记 - 用于3D数据分类、分割的Point Net简述
学以致用 知行合一
06-12 398
在本文中，我们将了解Point Net，目前，处理图像数据的方法有很多。从传统的计算机视觉方法到使用卷积神经网络到Transformer方法，几乎任何 2D 图像应用都会有某种现有的方法。然而，当涉及到 3D 数据时，现成的工具和方法并不那么丰富。3D 空间中一个工具就是Point Net。点网是一种新型的神经网络，直接使用整个点云。它可以对输入点云进行分类，执行语义分割，甚至部分分割。理解点网如何有效完成多项任务的关键在于，它能够提取点云的局部和全局特征， 而不管方向如何。
Clearedge3d EdgeWise 5.8 强大的自动化建模软件
2301_81793510的博客
06-10 360
您可以获得使用自动特征提取和对象识别的 3D 建模，ClearEdge3D 自动建模和对象识别软件通过创建竣工文档和施工验证完成该过程。3、作为业界技术最先进的竣工建模平台，EdgeWise 利用自动特征提取、模式识别技术和对象识别算法，将建模时间缩短了数小时、数天甚至数周。12、对 3D 竣工管道、结构图元、风管、墙、三通和导管进行建模机电、结构和建筑建模功能13、具有逼真项目视图的十亿点可视化引擎。5、竣工管道、支承件、通风管道、墙体、T 形物和管线的三维模型。6、MEP、结构和建筑建模功能。
3d交互式场景在线编辑平台的好处
最新发布
VRARvrnew3d的博客
06-13 139
无论您是教育者还是学习者，产品VR全景展示搭建编辑器都将是您不可多得的教学和学习助手。让我们一起迈入VR全景展示的新时代，用科技的力量为教学和学习插上腾飞的翅膀!
3D场景的交互设计有什么软件吗?
weixin_50515446的博客
06-13 137
专业从事3D产品配置和数字孪生的在线网站，专为不懂3D和代码的人员量身打造，用户无需编写任何代码，上传3D模型后可以快速调整渲染效果及交互设置。它支持快速3D场景搭建、属性编辑，并且与Figma素材无缝衔接，支持基于状态机的动态交互，以及Web/XR/手机跨设备AR/VR预览及交互。Unity是一个功能强大的实时内容开发平台，支持3D、2D、VR和AR可视化。Unreal Engine是一个强大的实时3D创作平台，广泛用于游戏开发和交互式应用的创建，支持高质量的视觉效果和复杂的交互设计。
使用webgl 绘制一个正方形
06-01
使用 WebGL 绘制正方形需要进行以下步骤： 1. 获取 WebGL 上下文对象 ```javascript const canvas = document.querySelector('canvas'); const gl = canvas....这样就可以在 canvas 中绘制一个红色的正方形了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值