如何做医药类网站,在线生成短链接网址,免费下载访问迅雷网盘,中国国家培训网个人简介 #x1f440;个人主页#xff1a; 前端杂货铺 #x1f64b;♂️学习方向#xff1a; 主攻前端方向#xff0c;正逐渐往全干发展 #x1f4c3;个人状态#xff1a; 研发工程师#xff0c;现效力于中国工业软件事业 #x1f680;人生格言#xff1a; 积跬步…个人简介 个人主页 前端杂货铺 ♂️学习方向 主攻前端方向正逐渐往全干发展 个人状态 研发工程师现效力于中国工业软件事业 人生格言 积跬步至千里积小流成江海 推荐学习前端面试宝典 Vue2 Vue3 Vue2/3项目实战 Node.jsThree.js数据结构与算法体系教程 个人推广每篇文章最下方都有加入方式旨在交流学习资源分享快加入进来吧 文章目录 前言一、绘制一个水平移动的点attribute二、通过鼠标控制绘制1、鼠标点击绘制点2、鼠标移动绘制点3、模拟画笔 总结 前言
大家好这里是前端杂货铺。
上一篇文章我们学习了如何给画布换颜色、如何绘制一个点并且了解了三维坐标系…
接下来继续我们 WebGL 内容的学习 鼠标绘制的三种效果 一、绘制一个水平移动的点attribute
我们在着色器源程序中声明 attribute 变量js 可以给这个变量传值再绘制出来从而就可以实现动态修改点的位置。
以下是 声明 attribute 变量需要注意的是attribute 只能在顶点着色器中使用不能在片元着色器中使用。
// attribute: 存储限定符; vec4: 类型; aPosition: 变量名;
attribute vec4 aPosition;以下是 获取 attribute 变量需要注意的是 获取 attribute 变量需要在 initShader 函数之后因为会用到 program 这个程序对象。获取之后返回变量的存储地址。
// program: 程序对象; aPosition: 指定想要获取存储地址的 attribute 变量的名称
const aPositon gl.getAttribLocation(program, aPosition);以下是 给 attribute 变量赋值可以传递 1/2/3 个分量的值没有传递的值为 0.0。
// location: 指定 attribute 变量的存储位置; v0, v1, v2, v3: 传入的分量值;
gl.vertexAttrib1f(location, v0);
gl.vertexAttrib2f(location, v0, v1);
gl.vertexAttrib3f(location, v0, v1, v2);
gl.vertexAttrib4f(location, v0, v1, v2, v3);绘制流程如下 基于以上知识点我们使用 attribute 变量绘制一个水平移动的点
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./index.js/script
/headbodycanvas idcanvas width400 height400 stylebackground: gray;此浏览器不支持canvas/canvasscriptconst ctx document.getElementById(canvas);const gl ctx.getContext(webgl);// 着色器// 创建着色器源码// 顶点着色器const VERTEX_SHADER_SOURCE // 存储限定符 类型 变量名 分号 (注: attribute 只传递顶点数据)attribute vec4 aPosition;void main() {gl_Position aPosition; // vec4(0.0,0.0,0.0,1.0)gl_PointSize 30.0;};// 片元着色器const FRAGMENT_SHADER_SOURCE void main() {// r g b agl_FragColor vec4(1.0, 0.0, 0.0, 1.0);}const program initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 获取 attribute 变量返回变量的存储地址const aPosition gl.getAttribLocation(program, aPosition);let x 0;setInterval(() {x 0.1;if (x 1.0) {x 0;}// 给 attribute 变量赋值gl.vertexAttrib1f(aPosition, x);// 执行绘制gl.drawArrays(gl.POINTS, 0, 1);}, 200)/script
/body/htmlattribute绘制一个水平移动的点 二、通过鼠标控制绘制
1、鼠标点击绘制点
接下来我们通过鼠标来控制在画布上绘制点。
屏幕坐标通过 event.clickX 和 event.clickY 来获取画布边距通过 event.target.getBoundingClientRect() 来获取其 .left 和 .right 等同于 ctx.offsetWidth 和 ctx.offsetHeight画布的坐标通过 屏幕坐标 - 画布边距 获取转为 ndc 坐标设画布的长和宽均为 400px那么原点为 0最左为 -200px最右为 200px。想要转为原点为 0最左为 -1最右为 1就可以均除以 200。最上和最下同理。 示例我们点击画布的左上角的位置查看控制台输出的坐标如下 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./index.js/scriptstyle* {margin: 0;padding: 0;}canvas {margin: 50px auto 0;display: block;background: yellow;}/style
/headbodycanvas idcanvas width400 height400此浏览器不支持canvas/canvasscriptconst ctx document.getElementById(canvas);const gl ctx.getContext(webgl);// 着色器// 创建着色器源码// 顶点着色器const VERTEX_SHADER_SOURCE // 存储限定符 类型 变量名 分号 (注: attribute 只传递顶点数据)attribute vec4 aPosition;void main() {gl_Position aPosition; // vec4(0.0,0.0,0.0,1.0)gl_PointSize 10.0; // 点的大小};// 片元着色器const FRAGMENT_SHADER_SOURCE void main() {// r g b a 绘制颜色gl_FragColor vec4(1.0, 0.0, 0.0, 1.0);}const program initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 获取 attribute 变量返回变量的存储地址const aPosition gl.getAttribLocation(program, aPosition);ctx.onclick function (event) {// 坐标const x event.clientX;const y event.clientY;console.log(鼠标点击的屏幕坐标, x, y);// 获取边距 (上边距和左边距) domPosition.left 等同于 ctx.offsetLeft 的值const domPosition event.target.getBoundingClientRect();console.log(画布边距, domPosition.left, domPosition.top);// 点击的点位于画布上方 、 左侧的距离 (domPosition.left: 568(基于我显示屏的长度), domPosition.top: 50)const domx x - domPosition.left;const domy y - domPosition.top;console.log(画布的坐标, domx, domy);// 固定值画布长和宽的一半均为200const halfWidth ctx.offsetWidth / 2;const halfHeight ctx.offsetHeight / 2;console.log(画布长和宽的一半, halfWidth, halfHeight);// 转为 ndc坐标 (-1, 1)const clickX (domx - halfWidth) / halfWidth;const clickY (halfHeight - domy) / halfHeight;console.log(转为ndc的坐标, clickX, clickY);// 给 attribute 变量赋值gl.vertexAttrib2f(aPosition, clickX, clickY);// 执行绘制gl.drawArrays(gl.POINTS, 0, 1);}/script
/body
/html通过鼠标点击绘制点 2、鼠标移动绘制点
改为 ctx.onmousemove 实现鼠标移动 绘制点跟随鼠标 3、模拟画笔
改为 ctx.onmousemove 的基础上在 ctx.onmousemove 之前定义一个存储点的数组 points
const points [];把以下内容替换掉从而实现画笔效果 // 给 attribute 变量赋值// gl.vertexAttrib2f(aPosition, clickX, clickY);// 执行绘制// gl.drawArrays(gl.POINTS, 0, 1);for (let i 0; i points.length; i) {gl.vertexAttrib2f(aPosition, points[i].clickX, points[i].clickY);gl.drawArrays(gl.POINTS, 0, 1);}画笔 总结
本文我们首先实现了绘制水平移动的点之后通过坐标的转移认识了 ndc 坐标的求解从而实现了鼠标控制绘制包括点击绘制、移动绘制和模拟画布的效果。
更多 WebGL 和 Three.js 内容正在更新中…
好啦本篇文章到这里就要和大家说再见啦祝你这篇文章阅读愉快你下篇文章的阅读愉快留着我下篇文章再祝 参考资料 百度百科 · WebGLWebGL Three.js入门与实战【作者yancy_慕课网】
