热门标签
热门文章
- 1还在用手画太阳花，太out了，python教你如何轻松画一朵！_idle如何画一朵花
- 2“Git：不容错过的现代化版本控制系统” 基础入门篇_初探git,理解和使用版本控制的魔法
- 3c++ STL less 的视角
- 4Java正则表达式汇总_java正则表达式,不能输入引号(单引号和双引号)以及特殊字符<、>、#和&
- 5C语言的printf的介绍_printf("%g%+gi\n", a.rp, a.ip);
- 6【蓝桥杯选拔赛真题50】python充电器 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析_蓝桥杯青少组stema
- 7框架技术 ---- SPA和Vue的组件化开发_vue和spa
- 8git命令（使用git review）
- 9【Django】Django实现对IP地址访问过滤_django 限制 国内 ip 访问
- 10图像处理： 马赛克艺术_马赛克是什么纹理
当前位置: article > 正文
WebGL+Three.js入门与实战(一)——1.4 通过鼠标控制绘制_three鼠标画不规则路径
作者：我家小花儿 | 2024-02-15 13:44:35
赞
踩
three鼠标画不规则路径
实现鼠标跟随效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../lib/index.js"></script> <style> *{ margin: 0; padding: 0; } canvas{ margin: 50px auto 0; display: block; background: yellow; } </style> </head> <body> <canvas id="cancas" width="400" height="400"></canvas> </body> <script> const ctx = document.getElementById('cancas') const gl = ctx.getContext('webgl') //着色器 //创建着色器源码 const VERTEX_SHADER_SOURCE = ` //必须要存在 main 函数 attribute vec4 aPosition; void main() { //要绘制的点的坐标 gl_Position = aPosition; //默认为 vec4(0.0,0.0,0.0,1.0); //点的大小 gl_PointSize=40.0; } `; //顶点着色器 const FRAGMENT_SHADER_SOURCE = ` void main(){ 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') gl.vertexAttrib1f(aPosition,0.0) gl.drawArrays(gl.POINTS, 0, 1);//重新绘制 // onmousemove 鼠标跟随效果 ctx.onmousemove=function(ev){ //坐标 const x =ev.clientX const y=ev.clientY const domPosition= ev.target.getBoundingClientRect() console.log(domPosition,ctx.offsetTop,ctx.offsetLeft) const domx=x-domPosition.left; const domy=y-domPosition.top; /* 画布的宽度是400，对应的画布坐标系 0 200 400 webgl对应的X坐标系 -1 0 1 把画布X坐标系转化成webgl对应的坐标系 需要先 -200 （当前画布的宽度）然后再除以200 画布的高度是400，对应的画布坐标系 0 200 400 webgl对应的Y坐标系 1 0 -1 把画布Y坐标系转化成webgl对应的坐标系 需要先让200（当前画布的高度） 减这个数，然后再/200 */ const halfWidth=ctx.offsetWidth/2 const halfHeight=ctx.offsetHeight/2 const clickX=(domx-halfWidth)/halfWidth const clickY=(halfHeight-domy) / halfHeight gl.vertexAttrib2f(aPosition,clickX,clickY) gl.drawArrays(gl.POINTS, 0, 1); } </script> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
提示：需要把画布坐标转换成webgl坐标才能进行绘画
实现绘画效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../lib/index.js"></script> <style> *{ margin: 0; padding: 0; } canvas{ margin: 50px auto 0; display: block; background: yellow; } </style> </head> <body> <canvas id="cancas" width="400" height="400"></canvas> </body> <script> const ctx = document.getElementById('cancas') const gl = ctx.getContext('webgl') //着色器 //创建着色器源码 const VERTEX_SHADER_SOURCE = ` //必须要存在 main 函数 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(){ 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') const points=[]; gl.vertexAttrib1f(aPosition,0.0) gl.drawArrays(gl.POINTS, 0, 1);//重新绘制 // 绘画效果 ctx.onmousemove=function(ev){ //坐标 const x =ev.clientX const y=ev.clientY const domPosition= ev.target.getBoundingClientRect() console.log(domPosition,ctx.offsetTop,ctx.offsetLeft) const domx=x-domPosition.left; const domy=y-domPosition.top; /* 画布的宽度是400，对应的画布坐标系 0 200 400 webgl对应的X坐标系 -1 0 1 把画布X坐标系转化成webgl对应的坐标系 需要先 -200 （当前画布的宽度）然后再除以200 画布的高度是400，对应的画布坐标系 0 200 400 webgl对应的Y坐标系 1 0 -1 把画布Y坐标系转化成webgl对应的坐标系 需要先让200（当前画布的高度） 减这个数，然后再/200 */ const halfWidth=ctx.offsetWidth/2 const halfHeight=ctx.offsetHeight/2 const clickX=(domx-halfWidth)/halfWidth const clickY=(halfHeight-domy) / halfHeight points.push({clickX,clickY}) for(let i=0;i<points.length;i++) { gl.vertexAttrib2f(aPosition,points[i].clickX,points[i].clickY) gl.drawArrays(gl.POINTS, 0, 1); } } </script> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
通过点击绘制多个点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../lib/index.js"></script> <style> *{ margin: 0; padding: 0; } canvas{ margin: 50px auto 0; display: block; background: yellow; } </style> </head> <body> <canvas id="cancas" width="400" height="400"></canvas> </body> <script> const ctx = document.getElementById('cancas') const gl = ctx.getContext('webgl') //着色器 //创建着色器源码 const VERTEX_SHADER_SOURCE = ` //必须要存在 main 函数 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(){ 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') const points=[]; gl.vertexAttrib1f(aPosition,0.0) gl.drawArrays(gl.POINTS, 0, 1);//重新绘制 // 通过点击绘制多个点 ctx.onclick=function(ev){ //坐标 const x =ev.clientX const y=ev.clientY const domPosition= ev.target.getBoundingClientRect() console.log(domPosition,ctx.offsetTop,ctx.offsetLeft) const domx=x-domPosition.left; const domy=y-domPosition.top; /* 画布的宽度是400，对应的画布坐标系 0 200 400 webgl对应的X坐标系 -1 0 1 把画布X坐标系转化成webgl对应的坐标系 需要先 -200 （当前画布的宽度）然后再除以200 画布的高度是400，对应的画布坐标系 0 200 400 webgl对应的Y坐标系 1 0 -1 把画布Y坐标系转化成webgl对应的坐标系 需要先让200（当前画布的高度） 减这个数，然后再/200 */ const halfWidth=ctx.offsetWidth/2 const halfHeight=ctx.offsetHeight/2 const clickX=(domx-halfWidth)/halfWidth const clickY=(halfHeight-domy) / halfHeight points.push({clickX,clickY}) for(let i=0;i<points.length;i++) { gl.vertexAttrib2f(aPosition,points[i].clickX,points[i].clickY) gl.drawArrays(gl.POINTS, 0, 1); } } </script> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
整体流程
代码中的initShader方法是自己封装好的方法
请参考https://blog.csdn.net/qq_45013951/article/details/134637108
下面是WebGL+Three.js入门与实战的总体链接
1.1 绘制一个点
1.2 webgl坐标系
1.3 学习使用attribute变量-绘制一个水平移动的点
1.4 通过鼠标控制绘制
1.5 修改点的颜色
1.6 实现贪吃蛇游戏
2.1 使用缓冲区对象-绘制多个点
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/84966
推荐阅读
相关标签
