We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在实现3D地球时,球面是通过地理贴图渲染的。所以我们所说的地理坐标和三维空间坐标的转换,是指将地理贴图上的坐标,转换为球面坐标,即three.js中的三维坐标。
在介绍他们之间如何转换之前,我们先来了解下这两种坐标。
一个完整的地理贴图坐标如下,其中第一张为简图,能够帮我们快速理解经纬度与地理坐标,第二张为详细经纬度分布图。
可以看出贴图横向表示经度,范围**[-180(西经),180(东经)],竖向表示纬度[-90(南纬), 90(北纬)]**,因此坐标转化就成了经纬度到球面坐标的转化。
在three.js中,创建球体时有以下几个重要参数:
其中phiStart的默认值0,起始点为x轴负方向。thetaStart的默认值也为0,起始点为z轴正方向。如下图所示:
如上图,其中phi的值为0-Math.PI*2,对应的经度范围为-180到180,所以与经度对应的phi应为180+lng(lng为经度longitude)。theta的值为0-Math.PI,对应的纬度为90到-90,所以与纬度对应的theta值应为90-lat(lat为纬度latitude)。
基于上述得出的经纬度和球体创建时角度的对应关系,结合三角函数,我们应该可以很方便地算出对应的三维坐标,如下:
x = - r * sin(theta) * cos(phi) y = r * cos(theta) z = r * sin(theta) * sin(phi)
如下转换为JS代码:
function lglt2xyz(lng, lat, radius) { const phi = (180 + lng) * (Math.PI / 180) const theta = (90 - lat) * (Math.PI / 180) return { x: -radius * Math.sin(theta) * Math.cos(phi), y: radius * Math.cos(theta), z: radius * Math.sin(theta) * Math.sin(phi), } }
除了上述直接用三角函数来算以外,我们也可以通过Three.js中的提供的方式来计算。主要涉及THREE.Spherical和THREE.Vector3。
THREE.Spherical
THREE.Vector3
THREE.Spherical是three.js中的球面坐标类,用法如下:
var spherical = new THREE.Spherical(radius,phi,theta)
其中的三个参数含义分别如下:
可以看出,这里的球面坐标类与我们在定义球时所用的球面坐标中的角是有区别的。phi和theta与上面恰恰相反。对应关系分别为(加’的为此处的角度):
THREE.Vector3用于表示三维向量,它有一个setFromSpherical的方法,顾名思义,表示可以从球面坐标得到三维向量坐标。其实,three.js中可以可以实现球面坐标和三维坐标的相互转换,THREE.Spherical也存在类似的setFromVector3方法。
setFromSpherical
setFromVector3
综上,通过three.js自带的方法来转换经纬度时可以用以下方法:
lglt2xyz(lng, lat, radius) { const theta = (90 + lng) * (Math.PI / 180) const phi = (90 - lat) * (Math.PI / 180) return (new THREE.Vector3()).setFromSpherical(new THREE.Spherical(radius, phi, theta)) },
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一、引言
在实现3D地球时,球面是通过地理贴图渲染的。所以我们所说的地理坐标和三维空间坐标的转换,是指将地理贴图上的坐标,转换为球面坐标,即three.js中的三维坐标。
在介绍他们之间如何转换之前,我们先来了解下这两种坐标。
二、地理坐标(贴图坐标)
一个完整的地理贴图坐标如下,其中第一张为简图,能够帮我们快速理解经纬度与地理坐标,第二张为详细经纬度分布图。
可以看出贴图横向表示经度,范围**[-180(西经),180(东经)],竖向表示纬度[-90(南纬), 90(北纬)]**,因此坐标转化就成了经纬度到球面坐标的转化。
三、球面坐标
在three.js中,创建球体时有以下几个重要参数:
其中phiStart的默认值0,起始点为x轴负方向。thetaStart的默认值也为0,起始点为z轴正方向。如下图所示:
如上图,其中phi的值为0-Math.PI*2,对应的经度范围为-180到180,所以与经度对应的phi应为180+lng(lng为经度longitude)。theta的值为0-Math.PI,对应的纬度为90到-90,所以与纬度对应的theta值应为90-lat(lat为纬度latitude)。
四、坐标转换
4.1 三角函数计算法
基于上述得出的经纬度和球体创建时角度的对应关系,结合三角函数,我们应该可以很方便地算出对应的三维坐标,如下:
如下转换为JS代码:
4.2 three.js自带方法
除了上述直接用三角函数来算以外,我们也可以通过Three.js中的提供的方式来计算。主要涉及
THREE.Spherical
和THREE.Vector3
。4.2.1 THREE.Spherical
THREE.Spherical是three.js中的球面坐标类,用法如下:
其中的三个参数含义分别如下:
可以看出,这里的球面坐标类与我们在定义球时所用的球面坐标中的角是有区别的。phi和theta与上面恰恰相反。对应关系分别为(加’的为此处的角度):
4.2.2 THREE.Vector3
THREE.Vector3
用于表示三维向量,它有一个setFromSpherical
的方法,顾名思义,表示可以从球面坐标得到三维向量坐标。其实,three.js中可以可以实现球面坐标和三维坐标的相互转换,THREE.Spherical
也存在类似的setFromVector3
方法。综上,通过three.js自带的方法来转换经纬度时可以用以下方法:
The text was updated successfully, but these errors were encountered: