2022-11-04 11:39:56 +08:00
# gemini-viewer-examples
2022-11-17 16:25:34 +08:00
Examples and demos for gemini-viewer sdk.
2023-03-05 16:09:36 +08:00
- [Online examples ](https://pattern-x.github.io/gemini-viewer-examples/ )
- [Online demos ](https://pattern-x.github.io/gemini-viewer-examples/#/demo/ )
2022-10-26 12:30:03 +08:00
2022-11-06 14:48:02 +08:00
# Set up the example project
2022-11-04 11:39:56 +08:00
npm install
2022-10-26 12:30:03 +08:00
2022-11-04 11:39:56 +08:00
npm start
2022-10-26 12:30:03 +08:00
2022-12-02 15:58:40 +08:00
http://localhost:3000/
2022-11-06 14:48:02 +08:00
# gemini-viewer
gemini-viewer is a WebGL based JS SDK, it is built on top of three.js. It provides following viewers:
2023-04-05 13:11:37 +08:00
#### 1. DxfViewer
Used to view 2d drawings. Dxf format is supported, so we need to convert dwg files to dxf first (there is a dwg2dxf.exe worker). It supports most common entity types, it supports OLE and region via dwg2dxf; It supports common line types; It supports common hatch styles; It support line width;
2022-11-06 14:48:02 +08:00
2023-04-05 13:11:37 +08:00
#### 2. BimViewer
Used to view 3d BIM models. It supports formats including gltf, obj, fbx, ifc, dae, etc. Its features including measurement, section, display outline, orthographic camera, selection, etc.
2022-11-06 14:48:02 +08:00
#### 3. VRViewer
Used to view panoramas. It supports viewing a panorama with 1 image, 6 images, or 24 images; It supports viewing a serials of panoramas; It supports hotpoints;
## Installation
To install from npm:
```
npm install @pattern -x/gemini-viewer-threejs
```
## Examples for DxfViewer
``` typescript
import { DxfViewer, DxfViewerConfig, ModelConfig } from "@pattern -x/gemini-viewer-threejs";
const viewerCfg: DxfViewerConfig = {
containerId: "myCanvas",
enableToolbar: true,
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"];
2023-04-05 13:11:37 +08:00
2022-11-06 14:48:02 +08:00
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("Loaded");
viewer.goToHomeView();
```
## Features for DxfViewer
- Load and view dxf file
2022-11-10 16:50:10 +08:00
2022-11-10 16:37:02 +08:00
- Switch between layouts
2022-11-10 16:43:01 +08:00
2022-11-06 14:48:02 +08:00
- Distance measurement
2022-11-10 16:43:01 +08:00
2022-11-06 14:48:02 +08:00
- Area measurement
- Angle measurement
- Markups
2022-11-10 16:43:01 +08:00
2023-03-29 14:27:57 +08:00
- Comparison
2023-03-29 14:27:12 +08:00
2022-11-06 14:48:02 +08:00
- Undo/redo
2023-03-24 20:12:44 +08:00
## How to integrate DxfViewer into your system
- Physical structure diagram:
- Logical structure diagram:
2023-04-05 13:11:37 +08:00
## Features for BimViewer
- Load and view BIM model
- Orthographic view
- Selection
- X-Ray
- Distance measurement
- Section
