canvas坐标系转webgl坐标系

红色的canvas坐标系,蓝色是webgl坐标系

需要注意的地方有三点

  1. 坐标原点不同,需要将canvas的中间位置作为webgl的原点,求出绿色的点相对于canvas中间位置的偏移量
  2. 求出绿色的点 相对于canvas中间位置的偏移量 对应的webgl的位置
  3. 处理y轴,canvas的y向下,webgl的y轴向上,需要将 y 的值取反

代码为鼠标点击canvas,获取当前的点的webgl坐标

复制代码
canvas.addEventListener('click', (e) => {
    // 第一步:e.clientX 是鼠标在网页中的位置,需要根据 e.clientX 求出鼠标在canvas中的位置
    const { clientX, clientY } = e
    const { top, left } = canvas.getBoundingClientRect();
    const [canvasX, canvasY] = [clientX - left, clientY - top]

    // 第二步:求canvas中的坐标值对应的webgl的坐标值
    // 1、处理原点,以canvas的中间位置(canvas.width/2,canvas.height/2)作为webgl的原点(0,0),求出鼠标当前位置在canvas系统中相对于webgl中的位置
    const canvasOffsetX = canvasX - canvas.width / 2
    const canvasOffsetY = canvasY - canvas.height / 2

    // 2、将canvas系统中的坐标值转换成webgl中的值
    const canvas2WebglX = canvasOffsetX / (canvas.width / 2)
    const canvas2WebglY = canvasOffsetY / (canvas.height / 2)

    // 3、处理y轴,canvas的y向下,webgl的y轴向上
    const canvas2WebglY2 = -canvas2WebglY;

    // canvas2WebglX 即为鼠标点在webgl中的x,canvas2WebglY2 即为鼠标点在webgl中的y
})
相关推荐
烛阴34 分钟前
Mix
前端·webgl
烛阴1 天前
Tile Pattern
前端·webgl
平行云2 天前
实时云渲染将UE像素流嵌入业务系统,实现二维管理系统与数字孪生三维可视化程序的无缝交互
unity·webgl·数字孪生·云渲染·虚幻引擎·实时云渲染·像素流送
烛阴4 天前
Mod
前端·webgl
烛阴6 天前
Fract - Grid
前端·webgl
cos7 天前
从像素到粒子:p5.js 图像转动态粒子的设计与实现
前端·javascript·webgl
山海鲸可视化10 天前
模型材质一键替换~轻松还原多种三维场景
webgl·数字孪生·材质·3d模型·三维渲染
Perfumere11 天前
【WebGPU学习杂记】Uniform和Stroage的区别和适用场景
前端·webgl
蓝婷儿12 天前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
Perfumere12 天前
【WebGPU学习杂记】缓冲区是个啥?内存?闪存?
前端·webgl