三维地图引擎 v2.0.0

VJMAP3D
让 CAD 图纸与地图
立起来，走进三维

Q: 怎么安装？能用 script 标签引入吗？

用 npm / pnpm 安装 vjmap3d 与 three，或通过 importmap 以 ES 模块方式引入；不支持直接用 <script src> 引入。

基于 three.js 的三维可视化引擎：可单独用于数据可视化、产品展示、数字孪生与三维 GIS，也能作为唯杰地图 VJMAP 的三维图层。v2 起同时支持 WebGL 与 WebGPU，同一套代码，不支持 WebGPU 时自动回退。

$npm i vjmap3d three或 importmap 引入

开发文档 362 个在线示例应用案例 ↗

vjmap.com/effect/tollstation

WebGL / WebGPU
一套代码，自动回退

39 种模型格式
glTF、FBX、IFC、3D Tiles…

362 个在线示例

53 篇开发文档

39 种模型格式加载

2 种渲染引擎

10 种常用后期效果

Capabilities

三维可视化需要的能力，开箱即有

ThreeJS 生态

兼容 three.js 写法，社区资源、材质与模型可以直接使用。

WebGPU 双引擎

一个参数切换 WebGL / WebGPU，浏览器不支持时自动回退。

兼容 VJMAP

同一套代码：既能做二维地图的三维图层，也能独立使用。

CAD 作三维地面

MapViewEntity 把 DWG 图映射为三维地面，图上数据可拾取。

叠加互联网地图

CAD 图可与互联网地图、地形叠加，并支持裁剪。

丰富实体

多边形、折线、拉伸白模、精灵、符号、实例化等实体。

粒子系统

火焰、烟雾、雨雪、流动等粒子特效，可批量、可配置。

后期处理

辉光、描边、景深、SSAO 等常见后期效果，也可自定义。

3D Tiles

加载三维瓦片，并自动叠加互联网地图。

物理与算法

物理引擎插件、几何布尔运算，三维模型生成二维 CAD 图。

交互 UI

Marker2D / 3D、Popup2D、右键菜单与配置面板。

动画与行为

补间、路径、关键帧动画与行为组件。

Quick Start

把一张 CAD 图变成三维地面

创建 Service 与 App，打开图纸，用 MapViewEntity 作为三维地面，再往上叠加实体与特效。

1
创建应用vjmap3d.App，可选 webgpu 引擎
2
打开图纸app.svc.openMap 以几何渲染方式打开
3
CAD 作地面MapProvider + MapViewEntity 加入场景

阅读开发文档在线运行

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    render: { engine: "webgpu" },   // 不支持时自动回退 WebGL
    container: "map",
    camera: { viewHelper: { enable: true } }
})
await app.whenReady();
let res = await app.svc.openMap({
    mapid: env.exampleMapId,
    mapopenway: vjmap3d.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap3d.openMapDarkStyle()
});
let provider = new vjmap3d.MapProvider([{ url: app.svc.rasterTileUrl() }], { transparent: true });
let mapBounds = vjmap3d.GeoBounds.fromString(res.bounds)
let mapviewEnt = new vjmap3d.MapViewEntity({
    provider,
    baseScale: 100,
    mapBounds: mapBounds.toArray()
});
mapviewEnt.addTo(app);

// CAD 坐标与三维世界坐标互转
let cadLen = mapBounds.width() / 50;
let len = vjmap3d.toDist(cadLen);
let box = new THREE.BoxGeometry(len, len, len)
let mesh = new THREE.Mesh(box, new THREE.MeshStandardMaterial({ color: "#f00" }));
let cadPos = [mapBounds.center().x, mapBounds.center().y, cadLen];
mesh.position.copy(vjmap3d.toWorld(cadPos));
// 关联为实体后可拾取、可加动画
let entity = vjmap3d.Entity.fromObject3d(mesh);