# three-dxf-viewer

**Repository Path**: jimjay/three-dxf-viewer

## Basic Information

- **Project Name**: three-dxf-viewer
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-09-26
- **Last Updated**: 2025-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DXF Viewer

DXF viewer made using [dxf parser](https://github.com/skymakerolof/dxf) and [threejs](https://github.com/mrdoob/three.js/). It generates a threejs object that can be used in any scene. It also has some utility classes:
* Select
* Hover
* Snap
* Merger

### Try Online

You can try it [here](https://ieskudero.github.io/three-dxf-viewer/)

### Installation

```shell
npm install three-dxf-viewer
```

## Example

To use it just initialize the main class and launch `getFromFile` or `getFromPath` methods.

```js

import { DXFViewer } from 'three-dxf-viewer';

// Suppose we have a font in our application 
let font = 'fonts/helvetiker_regular.typeface.json';

// Suppose we have a file input and a loading div
var file = event.target.files[0];

// Get all the geometry generated by the viewer
const viewer = new DXFViewer();
let dxf = await viewr.getFromFile( file, font );

// Add the geometry to the scene
scene.addDXF( dxf );
```

More examples can be found in the example folder on github.

## Properties

The viewer has some properties that can be used to customize the scene:

#### Layer
It shows the layers of the DXF file. It can be used to hide or show layers in the scene. For more information check the layer example in the example folder.
```js
// We can get layers from viewer
console.log( viewer.layers );
```
#### Unit
It shows the system unit of the DXF file. It can be compared with the UNITS object to obtain a descriptive name.
```js
import { UNITS } from 'three-dxf-viewer';

// We can get units from viewer
console.log( viewer.unit );
console.log( UNITS.Meters[ viewer.unit ] );

// Or can be compared with UNITS
console.log( viewer.unit === UNITS.Meters ? 'DXF on meters' : 'DXF on other units' );
```

#### Default Text Height
It sets the default text height fro text entities that doesn't have height specified.
```js
viewer.DefaultTextHeight = 12;
```

#### Default Text Scale
It sets the default text scale for the DXF file (Default 1). It changes all the texts heights in the DXF file.
```js 
viewer.DefaultTextScale = 1;
```

#### Cache
The viewer doesn't cache geometries by default, but this can be changed to cache it and reuse geometry the second time a model is loaded
```js
// Cache can be changed to true to enable caching
viewer.useCache = true;
```

## Controls

The class `CADControls` can be used to add controls to the scene, instead of `Select` and `Hover` classes.

```js
import { CADControls, DXFViewer } from 'three-dxf-viewer';

const viewer = new DXFViewer();
let dxf = await viewer.getFromPath( dxfFilePath, fontPath );

const controls = new CADControls( three.renderer.domElement, three.camera, dxf, viewer.lastDXF );
controls.subscribe( 'select', ( selects ) => console.log( 'Selected entities', selects ) );
controls.subscribe( 'hover', ( hovered ) => console.log( 'Hovered entity', hovered.userData.entity ) );

scene.add( dxf );

```

## Utilities

There are 4 utilities that can be used optionally with the viewer:

### Merger
By default the viewer will merge Block entities. however, it is possible to merge all entities to optimize drawing big DXF files.

```js
import { Merger, DXFViewer } from 'three-dxf-viewer';

let dxf = await new DXFViewer().getFromPath( dxfFilePath, fontPath );

const mergedObject = new Merger().merge( dxf );

scene.add( mergedObject );

```

### Selection
The select class can be used to select entities in the scene. It will highlight the selected entity. Selection can be done by clicking on the entity or pressing Ctrl and using the selection box.

```js
import { Select, DXFViewer } from 'three-dxf-viewer';

const viewer = new DXFViewer();
let dxf = await viewer.getFromPath( dxfFilePath, fontPath );

const select = new Select( three.renderer.domElement, three.camera, dxf, viewer.lastDXF );
select.subscribe( 'select', ( selects ) => console.log( 'Selected entities', selects ) );

scene.add( dxf );

```

### Hover
The hover class will highlight the hovered entity by the mouse.

```js
import { Hover, DXFViewer } from 'three-dxf-viewer';

const viewer = new DXFViewer();
let dxf = await viewer.getFromPath( dxfFilePath, fontPath );

const hover = new Hover( three.renderer.domElement, three.camera, dxf, viewer.lastDXF );
hover.subscribe( 'hover', ( hovered ) => console.log( 'Hovered entity', hovered.userData.entity ) );

scene.add( dxf );

```

### Snaps
Snaps classes can store all the vertices in an efficient way. This allows to get the closest vertex to a point in the scene. This is useful for example to snap to the nearest vertex when drawing lines.

```js

import { SnapsHelper } from 'three-dxf-viewer';

let dxf = await new DXFViewer().getFromPath( dxfFilePath, fontPath );

let snaps = new SnapsHelper( dxf, renderer, scene, camera, controls );
snaps.subscribe( 'nearSnap', ( snap ) => {			
	console.log( `distance from Mouse: ${snap.distance}, 3d entity: ${snap.snap.entity.uuid}, DXF entity: ${snap.snap.entity.userData.entity.handle}` );
} );

```

## Development

For a more detailed explanation, there is an example folder on how to use the viewer. Download it from github an launch it with:

```js
npm install
npm run dev
```
The application will be available on http://localhost:9009