举荐:将 NSDT 场景编辑器退出你的 3D 工具链
3D 工具集:NSDT 简石数字孪生屏幕坐标转规范
https://www.mvrlink.com/threejs-convert-screen-coordinates-to…
设施坐标在解说下节课鼠标点击选中模型之前,先给大家解说下坐标系的问题。获取鼠标事件坐标先来理解一些,一般的 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 计算规范设施坐标。