npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

three-dxf-viewer

v1.0.36

Published

DXF viewer using ThreeJS

Downloads

392

Readme

DXF Viewer

DXF viewer made using dxf parser and threejs. 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

Installation

npm install three-dxf-viewer

Example

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


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.

// 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.

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' );

Cache

The viewer caches geometries by default. This can be changed to avoid it.

// Cache can be changed to false to avoid caching
viewer.useCache = false;

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.

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.

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

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

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

scene.add( dxf );

Hover

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

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

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

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

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.


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

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

let snaps = new SnapsHelper( dxf, renderer, scene, camera, controls );

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:

npm install
npm run dev

The application will be available on http://localhost:9009