鼠标事件与webGl坐标系

弯道超车：

盒子模型：

又称CSS 盒模型，包含content、padding、border 和 margin 四个部分。

clientWidth、scrollWidth、offsetWidth之间的区别：

        offsetWidth：包含内容、padding、border 和滚动条的宽度（如果有滚动条），但不包含 margin。

        clientWidth：元素的可见内容区域和padding的宽度，但不会包括边框和滚动条。

        scrollWidth：包含内容的完整宽度（包括溢出部分,即滚动条），但不含 border,margin。

webGL坐标系：

        WebGL 采用的标准坐标系范围为 [−1,1]

                X 轴：水平轴，从左到右，范围为 -1 到 1。

                Y 轴：垂直轴，从下到上，范围为 -1 到 1。

                Z 轴：深度轴，从屏幕前到后，靠近观察者的为 -1，远离观察者的为 1。

html和脚本js:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="./lib/webgl-utils.js"></script>
  <script src="./lib/webgl-debug.js"></script>
  <script src="./lib/cuon-utils.js"></script>
  <script src="./js/clickPoint.js"></script>
</head>

<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>

</html>


// clickPoint.js
var vshader_source = `
attribute vec4 a_Position;
void main(){
  gl_Position = a_Position;
  gl_PointSize = 10.0;
}
`
var fshader_source = `
void main(){
  gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
function main () {
  var canvas = document.getElementById('canvas')
  var gl = getWebGLContext(canvas)

  if (!gl) {
    console.log('获取webGl绘图上下文失败')
    return
  }
  if (!initShaders(gl, vshader_source, fshader_source)) {
    console.log('初始化着色器失败')
    return
  }
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
  if (a_Position < 0) {
    console.log('获取attribute变量a_Position失败')
    return
  }
  // 注册鼠标点击事件
  // function (ev) { ... } 是一个匿名函数，作为参数传递给click函数,匿名函数可以访问main函数中的变量
  canvas.onmousedown = function (ev) {
    click(ev, gl, canvas, a_Position)
  };
  gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.drawArrays(gl.POINTS, 0, 1)
}
var g_ponints = []; // 存储点击位置的数组
// 获取鼠标点击位置并存储在一个数组中
function click (ev, gl, canvas, a_Position) {
  // 鼠标点击浏览器的坐标
  var x = ev.clientX; // 鼠标点击位置的x坐标
  var y = ev.clientY; // 鼠标点击位置的y坐标
  var rect = ev.target.getBoundingClientRect()
  // 画布的原点rect.left 和 rect.top
  // canvas.width/2 和 canvas.height/2 是canvas的中心点 即WedGL坐标系的中心点
  x = ((x - rect.left) - canvas.height / 2) / (canvas.height / 2)
  y = (canvas.width / 2 - (y - rect.top)) / (canvas.width / 2)
  // 将坐标存储在数组中
  // g_ponints.push(x);
  // g_ponints.push(y);
  g_ponints.push([x, y])
  // 清空canvas
  gl.clear(gl.COLOR_BUFFER_BIT)
  // 根据数组中的点绘制图形
  for (var i = 0; i < g_ponints.length; i += 2) {
    // 将点的位置传输到a_Position变量中
    // gl.vertexAttrib3f(a_Position, g_ponints[i], g_ponints[i + 1], 0.0);
    var xy = g_ponints[i]
    gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);
    // 绘制点
    gl.drawArrays(gl.POINTS, 0, 1)
  }
}