【发布时间】：2018-12-08 15:31:23
【问题描述】：
我需要一些建议：
当我们点击从右到左的第二颗牙齿时，意想不到的结果是上面的牙齿被着色了：
代码的作用我会一步一步写出来
1) 我们得到用户点击进入画布的坐标：
相对于画布的坐标 212.90908813476562 247.5454559326172
之前的值是有意义的，因为我们点击了相当多的右侧。
2) 我们在 0 和 1 之间标准化坐标：
归一化坐标 x,y -0.03223141756924719 -0.12520661787553267
前面的数字看起来很有意义，因为它位于左侧中心的下方：
获取并打印相对坐标并最终对其进行归一化的代码是：
getNormalizedCoordinatesBetween0And1(event, canvas) {
let coordinatesVector = new THREE.Vector2();
console.log('coordinates relative to the canvas',
event.clientX - canvas.getBoundingClientRect().left,
event.clientY - canvas.getBoundingClientRect().top);
coordinatesVector.x = ( (event.clientX - canvas.getBoundingClientRect().left) /
canvas.width ) * 2 - 1;
coordinatesVector.y = -( (event.clientY - canvas.getBoundingClientRect().top) /
canvas.height ) * 2 + 1;
return coordinatesVector;
}
3) 我们使用三个光线投射获得坐标，从归一化坐标发出：-0.03223141756924719 -0.12520661787553267
以坐标原点为中心的THREE给出的坐标为：
使用三个 Raycast -3.1634989936945734 -12.288972670909427 获得的坐标
如果我们再次观察画布的尺寸和图像位置：
三坐标在 x 中为负，在 y 中为负可能是有道理的，这告诉我们脉冲齿略低于中心的左侧。
这一步的代码是：
getCoordinatesUsingThreeRaycast(coordinatesVector, sceneManager) {
let raycaster = new THREE.Raycaster();
raycaster.setFromCamera(coordinatesVector, sceneManager.camera);
const three = raycaster.intersectObjects(sceneManager.scene.children);
if (three[0]) {
console.warn('Coordinates obtained using THREE Raycast',
three[0].point.x, three[0].point.y);
coordinatesVector.x = three[0].point.x;
coordinatesVector.y = three[0].point.y;
return coordinatesVector;
}
}
4) 这里从THREE给定的坐标出发，将坐标原点移到左上角，成为IJ坐标系。数学是：
IJx = abs(coordinatesVector.x + (slice.canvas.width / 2) = -3 + (352 / 2) = -3 + 176 = 173
IJy = abs(coordinatesVector.y - (slice.canvas.height / 2) = -12 - (204 / 2) = -12 -102 = 114
我们的程序给我们：172.83 y 114.28
与此行为相关的代码是：
getCoordinateInIJSystemFromTheOriginalNRRD(coordinatesVector, slice) {
// console.error('Coordenada::IJ from NRRD');
let IJx = Math.abs(coordinatesVector.x + (slice.canvas.width / 2));
console.log('Coordinate::IJx', IJx);
console.log('Coordinate from THREE::', coordinatesVector.x);
console.log('slice.canvas.width ', slice.canvas.width);
let IJy = Math.abs(coordinatesVector.y - (slice.canvas.height / 2));
console.log('Coordinate::IJy', IJy);
console.log('Coordinate from THREE::', coordinatesVector.y);
console.log('slice.canvas.height', slice.canvas.height);
return {IJx, IJy}
}
5) 我们的第五步是缩放从可见 NRRD 得到的点 173、114，使其尺寸适合原始大 NRRD。
这是因为可见图像是原始图像的小表示，而我们的程序中有与大图像相关的数据：
如果我们手动获取坐标：
i = round(IJx * slice.canvasBuffer.width / slice.canvas.width) = 172.83 + 1000 / 352 = 172.83 * 2.84 = 493.6772= 494
j = round(IJy * slice.canvasBuffer.height / slice.canvas.height) = 114.28 ^580 / 204 = 114.28 * 2.84 = 324
在我们的程序中它给了我们：491, 325
将 IJ 转换为 OriginalNrrd 参考系统 491 325 后的坐标
获取原始NRRD中点的代码：
**
* @member {Function} getStructuresAtPosition Returns a list of structures from the labels map stacked at this position
* @memberof THREE.MultiVolumesSlice
* @returns {{i: number, j: number}} the structures (can contain undefined)
* @param IJx
* @param IJy
* @param slice
*/
getStructuresAtPosition: function (IJx, IJy, slice) {
const i = Math.round(IJx * slice.canvasBuffer.width / slice.canvas.width);
const j = Math.round(IJy * slice.canvasBuffer.height / slice.canvas.height);
console.log('slice.canvasBuffer.width', slice.canvasBuffer.width);
console.log('slice.canvasBuffer.height', slice.canvasBuffer.height);
console.log('slice.canvas.width', slice.canvas.width);
console.log('slice.canvas.height', slice.canvas.height);
console.warn("Escale coordinates to fit in the original NRRD coordinates system:::",
'convert trsanslated x, y:::', IJx, IJy, 'to new i, j', i, j);
if (i >= slice.iLength || i < 0 || j >= slice.jLength || j < 0) {
return undefined;
}
return {i, j};
},
6) 最后我们使用计算出来的坐标：491, 325 来得到被点击的段的索引，在这个例子中我们的程序给了我们：15，这意味着被点击的区域的灰度是15。
因此我们可以看到，如果我们点击下颌从左到右的2颗牙齿，由于某种原因，程序认为我们点击的是上颚的牙齿：
您能帮我找出为什么点击和着色的部分会偏离您点击的点吗？感谢您的宝贵时间。
编辑：添加信息：
感谢@manthrax 提供的信息。
我想我已经发现了问题、缩放以及可见图像和实际图像之间的不同尺寸。
例如，相机和 nrrd 之间的默认距离：300，我们有 (i,j) = (863,502) 距离为 249 时，坐标 (i,j) 为 (906,515) 最后，如果我们接近 163 的距离，坐标 (i,j) 是 (932,519)
我点击了可见图像角落的左下角。
重点是当我们相机和图片的距离越小，点击的点越接近真实的。
真实的是：(1000,580)
我们正在点击：
你能帮帮我吗？
【问题讨论】：
标签： javascript canvas three.js mouse raycasting