gemini-viewer-examples

gemini-viewer SDK的示例和演示。

设置示例项目

npm install

npm start

http://localhost:3000/

gemini-viewer

gemini-viewer是一个基于WebGL的JS SDK，建立在three.js之上。它提供以下查看器：

1. DxfViewer

用于查看2D图纸和PDF。对于dwg文件，我们需要先将其转换为dxf格式（有一个dwg2dxf.exe工具）。它支持大多数常见的实体类型，通过dwg2dxf支持OLE和区域；支持常见的线型；支持常见的填充样式；支持线宽；

2. BimViewer

用于查看3D BIM模型。它支持包括gltf、obj、fbx、ifc、dae等格式。其功能包括测量、剖切、显示轮廓、正交相机、选择等。

3. VRViewer

用于查看全景图。它支持使用1张、6张或24张图像查看全景；支持查看一系列全景图；支持热点；

安装

从npm安装：

npm install @pattern-x/gemini-viewer-threejs

DxfViewer示例

import { DxfViewer, DxfViewerConfig, ModelConfig } from "@pattern-x/gemini-viewer-threejs";

const viewerCfg: DxfViewerConfig = {
    containerId: "myCanvas",
    enableSpinner: true,
    enableLayoutBar: true,
};
const modelCfg: ModelConfig = {
    modelId: "id_0",
    name: "sample",
    src: "http://www.abc.com/sample.dxf",
}
const fontFiles = ["http://www.abc.com/hztxt.shx", "http://www.abc.com/simplex.shx"];

const viewer = new DxfViewer(viewerCfg);
await viewer.setFont(fontFiles);
await viewer.loadModelAsync(modelCfg, (event) => {
    const progress = (event.loaded * 100) / event.total;
    console.log(`${event.type}: ${progress}%`);
});
console.log("已加载");
viewer.goToHomeView();

DxfViewer功能

DxfViewer功能包括：加载和查看一个或多个dxf文件、基本鼠标/键盘操作、布局、图层、带对象捕捉的距离/面积/角度测量、标记、热点、对比、测量/标记的撤销/重做、缩放到选定区域、截图、设置背景颜色等。
支持的实体类型包括：POINT、3DFACE、ARC、ATTDEF、ATTRIB、CIRCLE、DIMENSION、MLEADER、MULTILEADER、ELLIPSE、HATCH、INSERT、LEADER、LINE、LWPOLYLINE、MTEXT、RAY、POLYLINE、SOLID、SPLINE、TEXT、VERTEX、VIEWPORT、XLINE等。IMAGE、OLE2FRAME、REGION部分支持。
加载并查看dxf文件 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/0de9a334-980e-431c-9d74-2ec644175fea.gif" width="400">
切换布局 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/68a3e363-82b6-46df-b3d1-6675d3359a03.gif" width="400">
距离测量 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/264e1c1a-5a02-4110-83f3-8638e14ea11d.gif" width="400">
面积测量
角度测量
标记 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/b40075bf-1eaf-4034-b6ac-4f17e648ff8e.gif" width="400">
对比 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/dce46f07-b58f-4871-a435-154e47ced70e.gif" width="400">

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/87f87309-562b-44b7-a199-8810ad3bd4ec.png" width="400"> - 撤销/重做

DxfViewer的局限性

不支持复杂的线型，例如带有文本的线型。
为了提高性能，使用线几何体而非网格来表示文本。
不支持起点和终点宽度不同的多段线。
不支持Tangent CAD，需要先导出为T3格式。
支持"AutoCAD 2018"版本的dxf，其他版本未经充分测试。

如何将DxfViewer集成到你的系统中

物理结构图： <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/2caa0a70-17e9-4e7b-8560-5a32bd85708b.png" width="400">
逻辑结构图： <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/bfc80f33-c584-4d45-8fae-449ac6617003.png" width="400">

BimViewer功能

加载和查看BIM模型 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/11d370fb-9919-4f9c-a640-56350f59146d.png" width="400">
正交视图 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/d38911a9-b1bd-4de7-9d3b-f167519dc134.png" width="400">
选择 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/6f4ccd5a-be6a-4553-84eb-8729e0aedef9.gif" width="400">
X射线透视 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/86ee64c8-c67c-4a29-acc1-b82a76ed9e60.gif" width="400">
距离测量 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/bd8872c8-9334-4867-9cb5-90d160f269b9.gif" width="400">
剖面 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/c7a7ab5c-33c6-413f-a545-9bd6d871cf15.png" width="400">
用DXF文件叠加3D模型 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/94719d3d-2d0b-4751-b39f-eef96c6619b9.gif" width="400">
爆炸视图 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/1202d756-a0c7-4fd8-a89f-7ea669838367.gif" width="400">

VRViewer功能

加载和查看全景图 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/ebbcb618-1b8a-4f57-97bd-4e883cee9eea.gif" width="400">
切换到另一个全景图 <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/f10643a2-50ea-4920-a560-ad0c01e702ba.gif" width="400">
切换装饰风格