关于编辑器:ThreeJS教程屏幕坐标转标准设备坐标

举荐：将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计算规范设施坐标。