VR开发--八象限法根据全景二维坐标换算出三维球面坐标
背景: 在three中使用2:1的全景图可以迅速成型VR项目上线, 但如果场景中需要标注或者定位时,由于没有建模,很难迅速的找到三维坐标.尤其是当需要定位的点很多时,手工定位是一项十分痛苦的事情.
【VR开发--八象限法根据全景二维坐标换算出三维球面坐标】这个问题想了一周时间,极坐标变换,高斯投影,geo定位等方法都试过,但是由于低维转高维,缺少信息,均宣告失败.周一例会的时候和三维图形算法大神聊天,大神说可以尝试着用数据拟合的方式来找找联系,死马当活马医,结果拟合分析后居然真找出了联系,然后还意外发现了three是怎么拼接全景图的(见附图,坐标点一致的地方three会进行拼接,各象限的极限点已经标出,很容易写出转换函数),
拟合结果.png 今天花了一下午写完转换函数,这样就可以实现自动标记定位了,整体思路就是把全景图按4:2:2的比例,切成8个象限,将uv与xy关联,再将z与uv的权重关系算出来,这样就可以根据uv逆推出z,由于全景图边缘部分会存在畸变,所以要根据比例算出修正系数,我司的系数大概是1.25,这个和相机有关,完整代码如下:
/**
* 八象限法---根据全景二维坐标换算球面坐标
* @param
* panoramaX: 二维全景x
* panoramaY: 二维全景y
* panoramaW: 全景图宽度w
* panoramaH: 全景图高度h
* R: 球体半径
*/
export function coordinateTransformation(panoramaX, panoramaY, panoramaW = 7680, panoramaH = 3840, R = 7000) {
if (!panoramaX || !panoramaY) {
return false
}
// 默认第一象限(0,0)=>(0,1,0)
let quadrantNum = 0
// 球坐标法线
let normal = { x: 1, y: 1, z: 1 }
// 球坐标
let sphereCoordinate = { x: 0, y: 0, z: 0 }
// 全景图切分数,按4:2:2的比例,至少8个象限
const QUARTER_W_SEGMENT = 4
const HALF_H_SEGMENT = 2
// 象限单位
const QUARTER_W = Math.floor(panoramaW / QUARTER_W_SEGMENT)
const HALF_H = Math.floor(panoramaH / HALF_H_SEGMENT)
// 象限外偏移,用于确定坐标象限
const QUADRANT_X = Math.floor(panoramaX / QUARTER_W)
const QUADRANT_Y = Math.floor(panoramaY / HALF_H)
// 象限内偏移,用于换算球体坐标
const OFFSET_X_2D = Math.floor(panoramaX % QUARTER_W)
const OFFSET_Y_2D = Math.floor(panoramaY % HALF_H)
// 在南半球
if (QUADRANT_Y) {
quadrantNum += QUARTER_W_SEGMENT
normal.y = -1
}
// 确定象限
if (QUADRANT_X) {
quadrantNum += QUADRANT_X
}
// 在左半球
if (quadrantNum % QUARTER_W_SEGMENT < 2) {
normal.x = -1
}
// 在前半球
if (quadrantNum % QUARTER_W_SEGMENT < 3 && quadrantNum % QUARTER_W_SEGMENT > 0) {
normal.z = -1
}
console.log('球体法线normal', normal);
// 对Z轴影响的权重
let POWER_Z = ""
// 南北半球坐标转换,通过normal.y消除Y轴偏移带来的误差
if (normal.y > 0) {
//北半球右旋
sphereCoordinate.y = (HALF_H - OFFSET_Y_2D) * 1.25 / HALF_H * normal.y
POWER_Z = OFFSET_Y_2D / OFFSET_X_2D < 1 ? "Y" : "X"
} else {
//南半球左旋
sphereCoordinate.y = (OFFSET_Y_2D / HALF_H) * 1.25 * normal.y
POWER_Z = OFFSET_Y_2D / OFFSET_X_2D > 1 ? "Y" : "X"
}//没有了Y轴,简化为四象限
switch (quadrantNum % QUARTER_W_SEGMENT) {
case 0: {
sphereCoordinate.x = OFFSET_X_2D / QUARTER_W * normal.x
if (POWER_Z === "X") {
sphereCoordinate.z = (QUARTER_W - OFFSET_X_2D) / QUARTER_W * normal.z
} else if (POWER_Z === "Y") {
if (normal.y > 0) {
sphereCoordinate.z = OFFSET_Y_2D / HALF_H * normal.z
} else {
sphereCoordinate.z = (HALF_H - OFFSET_Y_2D) / HALF_H * normal.z
}
}
break
}
case 1: {
sphereCoordinate.x = (QUARTER_W - OFFSET_X_2D) / QUARTER_W * normal.x
if (POWER_Z === "X") {
sphereCoordinate.z = (OFFSET_X_2D) / QUARTER_W * normal.z
} else if (POWER_Z === "Y") {
if (normal.y > 0) {
sphereCoordinate.z = OFFSET_Y_2D / HALF_H * normal.z
} else {
sphereCoordinate.z = (HALF_H - OFFSET_Y_2D) / HALF_H * normal.z
}
}
break
}
case 2: {
sphereCoordinate.x = OFFSET_X_2D / QUARTER_W * normal.x
if (POWER_Z === "X") {
sphereCoordinate.z = (QUARTER_W - OFFSET_X_2D) / QUARTER_W * normal.z
} else if (POWER_Z === "Y") {
if (normal.y > 0) {
sphereCoordinate.z = OFFSET_Y_2D / HALF_H * normal.z
} else {
sphereCoordinate.z = (HALF_H - OFFSET_Y_2D) / HALF_H * normal.z
}
}
break
}
case 3: {
sphereCoordinate.x = (QUARTER_W - OFFSET_X_2D) / QUARTER_W * normal.x
if (POWER_Z === "X") {
sphereCoordinate.z = (OFFSET_X_2D) / QUARTER_W * normal.z
} else if (POWER_Z === "Y") {
if (normal.y > 0) {
sphereCoordinate.z = OFFSET_Y_2D / HALF_H * normal.z
} else {
sphereCoordinate.z = (HALF_H - OFFSET_Y_2D) / HALF_H * normal.z
}
}
break
}
}
sphereCoordinate = {
x: Math.ceil(sphereCoordinate.x * R),
y: Math.ceil(sphereCoordinate.y * R),
z: Math.ceil(sphereCoordinate.z * R)
}
console.log('球体坐标sphereCoordinate', sphereCoordinate);
return sphereCoordinate
}推荐阅读
- 深入理解Go之generate
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 八、「料理风云」
- 2018.03.18
- 被新冠“病毒”感染的日常生活（八）
- 【同心同舵】郑友贤第八季思维导图武林计划No.15《点评作业5》
- 第二十八封信
- 21天高情商活法功课|21天高情商活法功课 ，第八天
- 未来丛林历险记
- 八零后也已经老了