重磅：百度开放 3D 孪生 JS API ！Vue、React 可直接调用！

摘要：JSAPI Three版本是一套基于 Three.js 的三维数字孪生版本地图服务引擎，一套引擎即可支持 2D、2.5D、3D 全能力的地理投影与数据源加载，帮助开发者轻松搞定平面地图、三维场景，以及地球模式等多种地图业务场景需求。

作为一名前端开发者，地图开发基本是绕不过去的活儿。

以前做 2D 地图，高德地图用起来还挺顺手，但一涉及到 3D 开发，比如搞智慧城市这种项目，就只能往 Cesium 那条路靠了。

可 Cesium 开发起来那叫一个复杂，对咱普通前端来说，上手难度实实在在摆在那里。

JSAPI Three 版本是一套基于 Three.js 的三维数字孪生版本地图服务引擎，一套引擎即可支持 2D、2.5D、3D 全能力的地理投影与数据源加载，帮助开发者轻松搞定平面地图、三维场景，以及地球模式等多种地图业务场景需求。

和百度自家的 JSAPI GL 版本比起来，JSAPI Three 的重点升级更是厉害：

真三维数据 ：可精确表达全球任意区域的地理数据，进行三维量测分析等，让数据更精准、更有用。多投影支持 ：支持 EPSG:3857、EPSG:4978、EPSG:4326 等多种投影标准，不同投影的数据都能上一张图，跨区域、跨领域数据整合轻松搞定。真地球模式 ：独有的真地球模式，能实现电子地球仪效果、卫星场景展示，从地球到平面丝滑切换，用户看得舒服，体验感直接拉满。组件兼容 ：所有组件互相兼容，3D 遮盖关系正确无误，视觉效果统一，再也不用担心组件之间 “打架” 影响展示效果了。性能开销低 ：一个 WebGL 容器搞定所有组件，性能开销低，在大屏展示上有超棒的表现，加载超多数据也能保持流畅运行。

JSAPI Three 采用 mapvthree 作为命名空间，基于 Three.js 158 版本开发，采用 Three.js 作为底层渲染引擎。

npm 安装：

npm i -S @baidumap/mapv-three three@0.158.0

Vite 配置：

// vite.config.jsimport copy from 'rollup-plugin-copy';const viteConfig = { ... plugins: [ copy({ targets: [ {src: 'node_modules/@baidumap/mapv-three/dist/assets', dest: 'public/mapvthree'}, ], verbose: true, // vite需要加这个参数 hook: 'buildStart', // vite需要加这个参数 }), ...otherPlugins, ] ...};

入口文件中引入：

window.MAPV_BASE_URL = 'mapvthree/'; // 配置为mapv-three包路径的dist目录简单易上手 ：和 Cesium 比起来，百度三维孪生版 JSAPI 简直就是“傻瓜式操作”。Cesium 那复杂的配置、繁多的参数，让不少新手直接劝退。而百度这个工具，申请个密钥，按照文档一步步搭环境，很快就能跑通项目，新手也能快速入场。效果超逼真 ：它带了一堆拟真环境渲染和可视化组件，用起来就像搭积木一样简单，轻松就能做出自然生动的三维场景。像气象风场、实时流量监控这些复杂数据可视化，它处理起来都不在话下。二三维地图自由切 ：2D 平面地图和 3D 立体城市地图一键切换，操作流畅无卡顿，方便用户按需选择视角。