正文

鼠标点击位置转webgl坐标系

譬如朝露 V管理员/ / 0 评论/ 318阅读
03 21 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../lib/index.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #canvas {
        display: block;
        background-color: gray;

    }

    body::after {
        content: '';
        display: block;
        width: 1px;
        height: 400px;
        background-color: red;
        position: absolute;
        top: 0;
        left: 200px;
    }

    body::before {
        content: '';
        display: block;
        width: 400px;
        height: 1px;
        background-color: #000;
        position: absolute;
        top: 200px;
        left: 0;
    }
</style>

<body>
    <canvas id="canvas" width="400" height="400"></canvas>

</body>

<script>
    /** @type {HTMLCanvasElement} */
    const ctx = document.getElementById('canvas');
    const gl = ctx.getContext("webgl")
    const VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        void  main(){
            gl_Position=aPosition;
            gl_PointSize=50.0;
        }
    `;
    const FGRAGMENT_SHARDER_SOURCE = `
        void main(){
            gl_FragColor=vec4(1.0,0.0,0.0,1.0);
        }
    `;
    const program = initShader(gl, VERTEX_SHADER_SOURCE, FGRAGMENT_SHARDER_SOURCE);
    //获取aPosition变量的内存地址
    const aPosition = gl.getAttribLocation(program, 'aPosition');

    ctx.onclick = (e) => {
        //获取当前点击位置
        const { clientX, clientY } = e;
        //获取元素距离浏览器的边距
        const domRect = e.target.getBoundingClientRect();
        const { left, top } = domRect;
        //获取点击的位置距离画布的左边和顶部
        const domx = clientX - left;
        const domy = clientY - top;
        //获取画布的中心点
        const [centerX, centerY] = [ctx.width / 2, ctx.height / 2];
        //转为webgl坐标系
        const clickX = (domx - centerX) / centerX;
        const clickY = (centerY - domy) / centerY;
        gl.vertexAttrib2f(aPosition, clickX, clickY);
        gl.drawArrays(gl.POINTS, 0, 1)
    }
</script>

</html>


文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。