DTW 平台模型展示模块

模块用于展示项目相关模型，实现的功能有:

• fbx,3dtiles 模型的展示

ChangeLogs

0.1.70(Dec 9, 2022)

• 添加clip控件

0.1.69(Dec 2, 2022)

• 添加cesium剖切

0.1.68(Nov 4, 2022)

• 添加Cesium测量工具
• 添加Three剖切工具

 controls: [{ name: "clip", position: "bottom-left", direction: "horizontal"}]

0.1.67(Oct 26, 2022)

• 添加Threejs测量工具

0.1.66(Sep 23, 2022)

• 添加Viewer.dispose

0.1.65(Sep 22, 2022)

• 修复浏览器不支持clipboard

let modelViewer = new ModelViewer(...);
modelViewer.on("share", data => {
  console.log(data);
  // {url: "http://.././tile.json"}
})

0.1.64(Sep 21, 2022)

• 修复天地图影像缺失

0.1.6(Sep 20, 2022)

• 添加新版工具条
• 添加返回主页工具
• 添加分享工具
• 添加绘制控件工具

0.1.52(Sep 9, 2022)

• 添加 Cesium 视图默认配置

0.1.51(Sep 2, 2022)

• 修复 threeModelViewer 的 bug

0.1.5(Aug 30, 2022)

• 添加 WMS

0.1.4(Aug 17, 2022)

• 修复 threejs 模型拖拽问题

0.1.3(Aug 16, 2022)

• threejs 添加动态 dom 绑定

0.1.2(Aug 15, 2022)

• 优化项目打包

0.1.1(Aug 15, 2022)

• 完成 ThreeJS 和 CesiumJS 加载模型

安装

npm i dtw-model-viewer -S

使用

加载 FBX 模型

// 采用threejs加载fbx
import { ModelViewer } from "dtw-model-viewer";
import "dtw-model-viewer/dist/model-viewer.css";
let modelViewer = new ModelViewer({
  container: "app",
});
modelViewer.load({
  type: "fbx",
  url: "http://localhost:8888/model-data/fbx/fbxBuilding.fbx",
});

加载 3DTiles 模型、Geoserver 图层服务

// 采用cesiumjs加载3dtiles
// 需要复制libs/Cesium/**文件夹到项目的静态资源目录
import { ModelViewer } from "dtw-model-viewer";
import "dtw-model-viewer/dist/model-viewer.css";

let modelViewer = new ModelViewer({
  container: "app",
});
modelViewer.load({
  type: "3dtiles",
  url: "http://localhost:8888/model-data/3dtiles/building/tileset.json",
});

文档

# 上海局域网访问
http://192.168.1.162:8888/dtw-model-viewer/