地图案例(包围盒、正投影)

地图案例会涉及到几何体、包围盒、正投影相机三方面知识点。

平面填充几何体ShapeGeometry
包围盒Box3
正投影相机OrthographicCamera

`ShapeGeometry`渲染河南省地图轮廓

const data = [// 河南边界轮廓边界经纬度坐标[110.3906, 34.585],[110.8301, 34.6289],......[111.7969, 35.0684]
]
const pointsArr = [];// 一组二维向量表示一个多边形轮廓坐标
data.forEach(function(e){// data坐标数据转化为Vector2构成的顶点数组const v2 = new THREE.Vector2(e[0],e[1])pointsArr.push(v2);
})
// Shape表示一个平面多边形轮廓,参数是二维向量构成的数组pointsArr
const shape = new THREE.Shape(pointsArr);
// 多边形shape轮廓作为ShapeGeometry参数，生成一个多边形平面几何体
const geometry = new THREE.ShapeGeometry(shape);

选择相机

地图案例可以不使用透视投影相机模拟人眼的透视观察效果，选择正投影相机即可。

// 正投影相机
const width = window.innerWidth; //canvas画布宽度
const height = window.innerHeight; //canvas画布高度
const k = width / height; //canvas画布宽高比
const s = 50; //控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
camera.position.set(300, 300, 300);
camera.lookAt(0, 0, 0); //指向坐标原点

使用上面相机参数，默认情况下，你运行案例源码，可以看到河南地图并没有居中显示，在canvas画布上显示的效果也比较小。

如果你想地图全屏最大化居中显示，可以通过包围盒来辅助设置计算参数。

包围盒`Box3`计算模型的中心位置和尺寸

包围盒Box3计算模型的中心位置和尺寸。

// 包围盒计算模型对象的大小和位置
const box3 = new THREE.Box3();
box3.expandByObject(mesh); // 计算模型包围盒
const size = new THREE.Vector3();
box3.getSize(size); // 计算包围盒尺寸
// console.log('模型包围盒尺寸',size);
const center = new THREE.Vector3();
box3.getCenter(center); // 计算包围盒中心坐标
// console.log('模型中心坐标',center);

地图居中显示

设置相机.lookAt()参数指向包围盒几何中心即可。

const x = 113.51,y = 33.88;
camera.lookAt(x, y, 0);

注意如果使用了OrbitControls，需要设置.target和.lookAt()参数是相同坐标。

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(x, y, 0); //与lookAt参数保持一致
controls.update();//update()函数内会执行camera.lookAt(controls.target)

地图基本填充cnavas画布

地图显示效果更大，尽量使地图基本填充整个canvas画布。

把正投影相机控制上下左右的变量s，设置为地图模型整体尺寸的一半左右即可。

// const s = 50; //控制left, right, top, bottom范围大小
const s = 2.5;//根据包围盒大小调整s，包围盒y方向尺寸的一半左右
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

地图平行于canvas画布

把相机的位置和观察目标的xy坐标设置为一样，这样相机的视线方向就垂直地图平面，这样地图就平行于canvas画布，或者说平行于显示器屏幕。

const x = 113.51,y = 33.88;
//与观察点x、y一样，地图平行与canvas画布
camera.position.set(x, y, 300);
camera.lookAt(x, y, 0);

ThreeJS教程：地图案例(包围盒、正投影)相关推荐

百度地图API的使用教程以及案例
百度地图API的使用教程以及案例一.注册百度地图:掌握当前的位置在网页显示位置,插入地图拖拽,点击事件. 注意:定位距离公交不关心官网: 点我进入百度地图官网应用场景:网页插入百度地图 ...
【QGIS入门实战精品教程】8.1：QGIS制作地图案例教程
文章目录一.加载矢量数据二.加载影像底图三.美化矢量数据四.切换到排版视图五.添加经纬度格网六.添加其他修饰元素七.地图输出一.加载矢量数据加载本实验数据基础数据.gpkg中的甘肃省 ...
《C# WinForM 实践开发教程》案例×××（2）
<C# WinForM 实践开发教程>案例×××(2): 由于上传限制,必须分卷压缩,请依次下载后解压缩.共有20个文件,合计71.3M. 请耐心下载哦^o^ 转载于:https://bl ...
图书推荐：《ASP.NET.基础教程——C#案例版》
本书结合用C#语言编写的可实际运行的示例代码,讨论了ASP.NET的构架.Web窗体.配置.HTTP管道.故障诊断和错误处理.验证.数据绑定.自定义控件.缓存.状态管理和安全性,阐述用C#构建基于We ...
phpcmsV9 邮箱配置（含图文教程） - 案例篇
文章目录 phpcmsV9邮箱配置(含图文教程) - 案例篇前言 · 步骤分析: 步骤 · 开始配置: 相关阅读: phpcmsV9邮箱配置(含图文教程) - 案例篇前言 · 步骤分析: 注册管理 ...
Shell最最基础教程【案例讲解】【值得收藏系列】
Shell基础教程[案例讲解] 第1章 Shell概述第2章 Shell解析器第3章 Shell脚本入门 1．脚本格式 2．第一个Shell脚本:helloworld 3．第二个Shell脚本:多 ...
干货集锦：Qlik中文教程/行业案例/demo演示等全部打包给您！
Qlik连续10年成为Gartner"分析与商业智能平台"魔力象限领先者象限,成为企业商业智能和个人职场成功的必然选择.Qlik Sense是一个完整的数据分析平台,为新一代分析奠 ...
大疆文档(7)-Android教程-地图视图和航点App
本节全篇为大疆 Mobile SDK 安卓教程部分,ios教程参见 IOS教程 . 地图视图和航点应用程序在本教程中,您将学习如何实现 DJIWaypoint Mission 功能并熟悉Missi ...
Bootstrap4+MySQL前后端综合实训-Day01-PM【position定位的四种方式、Flex布局语法教程及案例(概念、容器属性、项目属性)、双飞翼布局复习、Bootstrap4 教程】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 HTML中的三种元素(块元素.内联元素.内联块元素) position定位的四种方式 ...

ThreeJS教程：地图案例(包围盒、正投影)

地图案例(包围盒、正投影)

地图案例(包围盒、正投影)

`ShapeGeometry`渲染河南省地图轮廓

选择相机

包围盒`Box3`计算模型的中心位置和尺寸

地图居中显示

地图基本填充cnavas画布

地图平行于canvas画布

ThreeJS教程：地图案例(包围盒、正投影)相关推荐

最新文章

热门文章

ThreeJS教程：地图案例(包围盒、正投影)

地图案例(包围盒、正投影)

地图案例(包围盒、正投影)

ShapeGeometry渲染河南省地图轮廓

选择相机

包围盒Box3计算模型的中心位置和尺寸

地图居中显示

地图基本填充cnavas画布

地图平行于canvas画布

ThreeJS教程：地图案例(包围盒、正投影)相关推荐

最新文章

热门文章

`ShapeGeometry`渲染河南省地图轮廓

包围盒`Box3`计算模型的中心位置和尺寸