X Viewer Core

https://www.npmjs.com/package/@x-viewer/core
Admin
X Viewer Core is a WebGL-based 2D/3D viewer engine built on Three.js that enables viewing DWG, DXF,...
Tokens:8,174
Snippets:183
Trust Score:9.6
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install @x-viewer/core

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Install the @x-viewer/core package using npm, pnpm, or yarn.

```bash
npm install @x-viewer/core
# or
pnpm add @x-viewer/core
# or
yarn add @x-viewer/core
```

--------------------------------

### Camera Control Examples

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Set the camera projection to perspective, fly to a specific viewpoint, or zoom to a bounding box defined by min and max THREE.Vector3 points.

```typescript
viewer.cameraManager.setProjection(CameraProjection.Perspective);
viewer.cameraManager.flyToViewpoint({ eye, look });
viewer.zoomToBBox(new THREE.Box3(min, max));
```

--------------------------------

### Using Three.js with @x-viewer/core

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Import Three.js and its addons directly from @x-viewer/core to ensure version compatibility. Use THREE.Vector3 and THREE.Box3 for spatial operations.

```typescript
import { THREE, THREEAddons } from "@x-viewer/core";

const vector = new THREE.Vector3(0, 0, 0);
viewer.zoomToBBox(new THREE.Box3(min, max));
```

--------------------------------

### Initialize and Load DWG/DXF with Viewer2d

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Initialize a Viewer2d instance and load a DWG or DXF model. Ensure the container element with 'myCanvas' ID exists in your HTML.

```typescript
import { Viewer2d } from "@x-viewer/core";

const viewer = new Viewer2d({
    containerId: "myCanvas",
    enableSpinner: true,
    enableLayoutBar: true,
});

await viewer.loadModel({
    modelId: "id_0",
    name: "sample",
    src: "https://example.com/sample.dwg",
});

viewer.goToHomeView();
```

--------------------------------

### Initialize and Load 3D Model with Viewer3d

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Initialize a Viewer3d instance and load a 3D model like glTF. The THREE object is available for 3D vector operations.

```typescript
import { Viewer3d, THREE } from "@x-viewer/core";

const viewer = new Viewer3d({ containerId: "myCanvas" });

await viewer.loadModel({
    modelId: "model_1",
    src: "./models/building.gltf",
    fileFormat: "gltf",
});

viewer.cameraManager.flyToViewpoint({
    eye: new THREE.Vector3(100, 50, 100),
    look: new THREE.Vector3(0, 0, 0),
});
```

--------------------------------

### Compare DWG/DXF Files

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Use DxfCompareHelper to compare two DXF files, highlighting added and removed elements with specified colors.

```typescript
import { DxfCompareHelper } from "@x-viewer/core";

const helper = new DxfCompareHelper(viewer);
await helper.compare(
    { modelId: "v1", src: "./rev1.dxf" },
    { modelId: "v2", src: "./rev2.dxf" },
    {
        addedColor: new THREE.Color(0, 1, 0),   // green = added
        removedColor: new THREE.Color(1, 0, 0), // red = removed
    }
);
```

--------------------------------

### Load Model with Progress Callback

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Load a model and provide a callback function to track the loading progress. The callback receives an event object with 'loaded' and 'total' properties.

```typescript
await viewer.loadModel(
    { modelId: "m1", src: "./drawing.dwg" },
    (event) => {
        const pct = (event.loaded / event.total) * 100;
        console.log(`${pct.toFixed(0)}%`);
    }
);
```

--------------------------------

### Manage Layers in Viewer2d

Source: https://www.npmjs.com/package/%40x-viewer/core/v/0.21.8?activeTab=code

Retrieve all layers, set a specific layer's visibility to false, or change a layer's color using THREE.Color.

```typescript
const layers = viewer.getLayers();
viewer.setLayerVisible("Layer1", false);
viewer.setLayerColor("Layer1", new THREE.Color(1, 0, 0));
```
Tokens:
Raw