win10 网站建设软件,前端培训心得,怎样去推广自己的网店,wordpress邮件功能推荐#xff1a;将 NSDT场景编辑器 加入你的3D工具链 3D工具集#xff1a; NSDT简石数字孪生 屏幕坐标转标准设备坐标
在讲解下节课鼠标点击选中模型之前#xff0c;先给大家讲解下坐标系的问题。
获取鼠标事件坐标
先来了解一些#xff0c;普通的web前端相关知识。
鼠… 推荐将 NSDT场景编辑器 加入你的3D工具链 3D工具集 NSDT简石数字孪生 屏幕坐标转标准设备坐标
在讲解下节课鼠标点击选中模型之前先给大家讲解下坐标系的问题。
获取鼠标事件坐标
先来了解一些普通的web前端相关知识。
鼠标单击HTML元素通过函数的参数鼠标事件对象event可以获取一些坐标信息。课件源码中是以threejs的canvas画布为例给大家演示。
addEventListener(click,function(event){// event对象有很多鼠标事件相关信息console.log(event,event);
}).offsetX、.offsetY表示鼠标单击位置的坐标单位是像素px以点击的HTML元素左上角为坐标原点水平向右方向为x轴竖直向下方向为y轴。
addEventListener(click,function(event){const px event.offsetX;const py event.offsetY;
})下图灰色区域是一个HTML元素。 .clientX、.clientY和.offsetX、.offsetY含义区别在于坐标原点不同其他一样。
addEventListener(click,function(event){const cx event.clientX;const cy event.clientY;
})特殊情况如果HTML元素CSS布局中距离顶部、左侧距离为零.clientX、.clientY和.offsetX、.offsetY是相同的。
标准设备坐标系
Three.js Canvas画布具有一个标准设备坐标系该坐标系的坐标原点在canvas画布的中间位置x轴水平向右y轴竖直向上。
标准设备坐标系的坐标值不是绝对值是相对值范围是[-1,1]区间也是说canvas画布上任何一个位置的坐标如果用标准设备坐标系去衡量那么坐标的所有值都在-1到1之间。 屏幕坐标转标准设备坐标
你可以用.offsetX和.offsetY当做canvas画布的屏幕坐标。
threejs canvas画布上一个点可以用.offsetX、.offsetY绝对值表示同样也可以用标准设备坐标系去表达。 把.offsetX和.offsetY坐标转化为标准设备坐标坐标。
// 坐标转化公式
addEventListener(click,function(event){const px event.offsetX;const py event.offsetY;//屏幕坐标px、py转标准设备坐标x、y//width、height表示canvas画布宽高度const x (px / width) * 2 - 1;const y -(py / height) * 2 1;
})canvas画布的宽度是width.offsetX的范围是0~width,.offsetX除以canvas画布宽度width就可以从绝对值变成相对值范围是0~1相对值乘以2范围0~2再减去1范围是-1~1刚好和canvas画布标准设备坐标的范围-1~1能够对应起来。
对于.offsetY的转标准设备坐标y和.offsetX转标准设备坐标x相似唯一要注意地方就是两个坐标系的y坐标相反同样计算方式最后取相反数即可。
使用.clientX、.clientY计算canvas画布屏幕坐标
用.offsetX、.offsetY可以直接表示canvas画布屏幕坐标如果用.clientX、.clientY表示这时候要注意把.clientX、.clientY转化为以canvas画布左上角为原点的坐标。
// 屏幕坐标转标准设备坐标
addEventListener(click,function(event){// left、top表示canvas画布布局距离顶部和左侧的距离(px)const px event.clientX-left;const py event.clientY-top;//屏幕坐标px、py转标准设备坐标x、y//width、height表示canvas画布宽高度const x (px / width) * 2 - 1;const y -(py / height) * 2 1;
})特殊情况canvas画布左上角和网页body右上角重合比如大部分课程canvas全屏布局的案例。
要注意把.clientX、.clientY转化为以canvas画布左上角为原点的坐标
addEventListener(click,function(event){const px event.clientX;const py event.clientY;const x (px / width) * 2 - 1;const y -(py / height) * 2 1;
})实际开发的时候你可以用.clientX、.clientY计算标准设备坐标也可以用.offsetX、.offsetY计算标准设备坐标。
