Three.js 地理坐标和三维空间坐标的转换

最新推荐文章于 2024-08-01 09:43:48 发布
最新推荐文章于 2024-08-01 09:43:48 发布
阅读量1.6k 收藏 4
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiwoo_weekly/article/details/101045027
版权
本文介绍了如何在Three.js中进行地理坐标（经纬度）与三维空间坐标之间的转换。通过三角函数计算法和使用THREE.Spherical及THREE.Vector3的方法详细阐述了转换过程。
摘要由CSDN通过智能技术生成

编者按：本文作者高峰，360奇舞团前端工程师，W3C性能工作组/WOT工作组成员。

一、引言

在实现3D地球时，球面是通过地理贴图渲染的。所以我们所说的地理坐标和三维空间坐标的转换，是指将地理贴图上的坐标，转换为球面坐标(https://en.wikipedia.org/wiki/Spherical_coordinate_system)，即three.js中的三维坐标。

在介绍他们之间如何转换之前，我们先来了解下这两种坐标。

二、地理坐标（贴图坐标）

一个完整的地理贴图坐标(https://zh.wikipedia.org/wiki/%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB)如下，其中第一张为简图，能够帮我们快速理解经纬度与地理坐标，第二张为详细经纬度分布图。

640?wx_fmt=jpeg

640?wx_fmt=png

可以看出贴图横向表示经度，范围[-180(西经),180(东经)]，竖向表示纬度[-90(南纬), 90(北纬)]，因此坐标转化就成了经纬度到球面坐标的转化。

三、球面坐标

在three.js中，创建球体时有以下几个重要参数：

  • 半径(radius)以及分段数

  • 水平方向起始角度(phiStart)

  • 水平方向角度大小(phiLength)

  • 垂直方向起始角(thetaStart)

  • 垂直方向角度大小(thetaLength)

其中phiStart的默认值0，起始点为x轴负方向。thetaStart的默认值也为0，起始点为z轴正方向。如下图所示：

最低0.47元/天 解锁文章
奇舞周刊
关注
three.js 3d坐标转平面坐标
02-08
一个小demo，3d空间坐标转平面坐标，div固定于3d空间系中得某一点
JavaScript 实现大地坐标系转换为空间直角坐标系（BLH→XYZ）
ReBeX
10-19 3019
一、前言 在相同的坐标基准下，将大地坐标系转换为大地空间直角坐标系的公式为： 上式中：N为卯酉圈曲率半径；a为地球椭球的长半轴；b为地球椭球的短半轴 二、实现代码 // 原始数据：B,L,H （角度制） var mainData = [ [23.10000000,113.1666667,10], [23.11666667,113.1833333,10], [23.13333333,113.2000000,10], [23.15000000,113.2166667,10]
Three.js学习二： 将小案例继续加强
最新发布
weixin_40540280的博客
08-01 1087
Three.js提供了多种模拟生活中光源的API，文档搜索关键词light就可以看到。​​点光源可以类比为一个发光点，就像生活中一个灯泡以灯泡为中心向四周发射光线。//点光源：两个参数分别表示光源颜色和光照强度// 参数1：0xffffff是纯白光,表示光源颜色// 参数2：1.0,表示光照强度，可以根据需要调整除了通过的参数2设置光照强度，你可以可以直接访问光照强度属性.intensity设置。//光照强度。
[Threejs]三种坐标系位置数据的转换
moxiaomomo的专栏
10-29 1万+
webGL中主要有6种坐标系．接下来看看如何在以下三种坐标系之间进行坐标数据的转换：屏幕坐标系，标准坐标系，世界坐标系． 屏幕坐标系和标准设备坐标系 先来了解一下这两个坐标系的定义，具体如下图所示： 屏幕坐标系的起始点(0,0)在左上角，而标准坐标系的起始点在canvas中心处. 假设3D画布的大小填满window 假如我们要通过鼠标来操控3D画布内的场景对象，需要将鼠标的坐标位置转换为3...
THREE.JS 场景世界坐标和平面二维坐标互转
ALLENJIAO的专栏
09-19 3002
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>场景世界坐标转</title>     <style type="text/css">      
three.js3维坐标系+绘制立方体（带边框）
02-28
1、three.js绘制3维坐标系； 2、绘制多个立方体； 3、立方体设置边框； 4、立方体表面绘制线条；
Three.js地球开发—1.经纬度转球面坐标
weixin_43787178的博客
03-07 3420
经纬度转Three.js球面坐标 关于经纬度： 横着的为纬度，竖着的为经度;首先要搞清楚定义，大概就是与地心的夹角…，放张照片就懂了。 原理： 最好的方法就是从两个剖面去理解，刚好一个为纬度，一个为经度的定义角，更直观一点。 地球半径为R,存在一点A，A的经纬度是(lon,lat)(弧度值),在Three.js坐标中A的坐标是(x,y,z)。 1.经度转x坐标 利用勾股定理，x=R*sin（维度） ...
Three.js获取鼠标点击的三维坐标示例代码
10-20
在这个函数中，我们首先创建了一个`THREE.Vector3`对象`vector`，用于存储鼠标点击的二维屏幕坐标转换后的三维空间坐标。接着，我们使用以下公式将二维坐标转换为归一化的设备坐标： ```javascript vector.set( ...
ThreeEarth:Three.js实现的简单三维GIS。（放弃）
05-15
ThreeEarth是一个使用Three.js库构建的轻量级三维地理信息系统（GIS）项目。Three.js是JavaScript的一个流行框架，专门用于在Web浏览器中创建3D图形，而ThreeEarth则利用了这一功能，为用户提供了在Web环境中查看和...
three.js之用一个四元数代替两个3D向量的旋转。
weixin_34198797的博客
12-13 612
翻译自：http://lolengine.net/blog/2013/09/18/beautiful-maths-quaternion-from-vectors 用一个四元数代替两个3D向量的旋转。 一个旋转最好的表示方法就是使用一个旋转轴和一个旋转角。旋转轴可以通过两个向量的叉乘得出。 旋转角（最小）可以通过两个向量的点积获得。点积获取的刚好是最小的旋转角。如下两种方法： ...
三维空间旋转和Three.JS中的实现
weixin_34133829的博客
04-15 718
目录 三维空间的旋转方法论 欧拉角（Euler Angle） 旋转矩阵（Rotation Matrix） Three.js中旋转的实际运用 欧拉角 矩阵 利用组合物体中心轴 三维空间中...
坐标系转换--三维四参数大地坐标系转换模型变换关系理解
谢公屐的博客
10-10 924
坐标系转换--三维四参数大地坐标系转换模型变换关系理解
Three 球（Sphere）、球坐标（Spherical）
前端学习杂记，记录学习中的前端知识。
07-12 703
已位于球中的点将不会受到影响。返回一个新的球坐标，新的球坐标与该球坐标具有相同的 radius、phi和theta。center - 球心的位置，默认值是一个位于(0, 0, 0)的Vector3。返回球的边界到所传入的point点的最近距离。复制所传入的球坐标的radius、 phi 和theta属性到该球坐标中。返回一个新的球，新的球与这个球具有相同的center和radius。检查球体中是否包含所传入的point点，包括球的表面。复制所传入的球的center和radius到这个球上。
Three Shader应用实例
lqiqil的博客
10-17 777
Vector3.setFromSphericalCoords ( radius : Float, phi : Float, theta : Float ) : this------------------------------------从球坐标中的radius、phi和theta设置该向量。degToRad ( degrees : Float ) : Float--------------将度转化为弧度。sigma -(可选)指定一个以弧度为单位的模糊半径，应用于PMREM生成之前的场景。
2d与2.5d坐标转换_Three.js 地理坐标和三维空间坐标的转换
weixin_39743357的博客
11-23 985
奇技指南本文作者高峰，360奇舞团前端工程师，W3C性能工作组/WOT工作组成员本文转载自奇舞周刊引言在实现3D地球时，球面是通过地理贴图渲染的。所以我们所说的地理坐标和三维空间坐标的转换，是指将地理贴图上的坐标，转换为球面坐标(https://en.wikipedia.org/wiki/Spherical_coordinate_system)，即three.js中的三维坐标。在介绍他们之间如何转...
threejs-经纬度转换成xyz坐标的方法
热门推荐
目尽地平线
07-24 3万+
用threejs做3D应用时，很经常会接触到球状物体，比如说地球，要定义球上的一点，用经纬度是常用的办法，将经纬度转换成xyz坐标，就可以直接在指定的经纬度上放置我们想要的模型
ThreeJS-3D教学十一：屏幕坐标和世界坐标转换
weixin_44384273的博客
01-15 1651
屏幕坐标和世界坐标转换
Three.js实现3D场景鼠标点击投影：原理与步骤
在Three.js中，将鼠标点击事件投射到三维场景（3D space）是常见的交互需求，它涉及到用户界面与3D图形的紧密集成。这篇教程旨在详细介绍如何在Three.js环境中实现鼠标点击到3D空间的投影，并理解其背后的原理。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值