ieskudero / three-dxf-viewer Goto Github PK

View Code? Open in Web Editor NEW

39.0 2.0 10.0 200 KB

DXF viewer using ThreeJS

Home Page: https://www.npmjs.com/package/three-dxf-viewer

License: MIT License

JavaScript 94.52% HTML 1.50% CSS 3.97%

cad dxf three three-js threejs viewer

three-dxf-viewer's Introduction

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
let dxf = await new DXFViewer().getFromFile( file, font );

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

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

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

three-dxf-viewer's People

Contributors

Stargazers

Watchers

Forkers

hzy5000 kaivnd loop80 lijunay x1ng-z bendis1907 elschilling wzw1990 kgckgc modelical

three-dxf-viewer's Issues

Is your library available in native JS without NodeJS ?

Hi,

Your bookshop works perfectly, and the quality is really very good.
I develop in PHP/HTML/JS, but not in nodejs (no NodeJS server available, I opted for PHP).
I would have liked to use your solution in native javascript (on the front end, like chrome or web browser, without server NodeJS).
I've been struggling for several days to convert it, but I'm having a lot of trouble.
There are a lot of imports.

Can you help me?

Sorry for my poor English.
French.

Xavlight

react three fiber

Hello again, the threejs object that this returns is compatible with react three fiber?

Hatch pattern not drawn correctly

Hatch entity is not always drawn correctly when is a pattern hatch type. The boundary is correctly drawn as a line but not as a shape.

issue using in typescript/webpack project

i've got the error: Cannot read properties of undefined (reading '__esModule') when included in a typescript project with webpack and using require, since @types definition is not available . This is what I get:

Some files are not correctly drawn due to WebGL Float32Array limitation

There are cases where drawing positions exceeds the Float32Array significant digits so numbers are rounded. Explanation here.

And WebGL doesn't allow Float64Array buffers yet (as explained here), so there is no easy fix yet.

Error when loading DXF file in DXFViewer library in React

When attempting to load a DXF file using the const dxfData = await new DXFViewer().getFromFile() method in a React application, an error is thrown: Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON. Does This error occurs within the library, specifically in the three-dxf-viewer.js .

Steps to Reproduce:

Create a React application.
Integrate the DXFViewer library.
Attempt to load a DXF file using the mentioned method.
Expected Behavior:
The DXF file should be successfully loaded without any errors.

Actual Behavior:
An error is thrown indicating that the loaded content is not valid JSON.

import React, { useRef, useEffect, useState } from 'react';
import * as THREE from 'three';
import { DXFViewer } from 'three-dxf-viewer';

const CubeWithDXF = () => {
  const canvasRef = useRef(null);
  const [dxfData, setDxfData] = useState(null);

  useEffect(() => {
    // Scene setup
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current });
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Animation loop
    function animate() {
      requestAnimationFrame(animate);

      if (dxfData) {
        // Rotate the DXF object
        dxfData.rotation.x += 0.01;
        dxfData.rotation.y += 0.01;
      }

      renderer.render(scene, camera);
    }

    animate();

    return () => {
      // Cleanup on unmount
      renderer.dispose();
    };
  }, [dxfData]);

  const handleFileChange = async (event) => {
    const file = event.target.files[0];
    const font = 'fonts/helvetiker_regular.typeface.json'; // Adjust font path if needed

    try {
      const dxf = await new DXFViewer().getFromFile(file, font);
      setDxfData(dxf);

      // Add the DXF geometry to the scene
      scene.add(dxf);
    } catch (error) {
      console.error('Error loading DXF file:', error);
    }
  };

  return (
    <div>
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
      <input type="file" onChange={handleFileChange} />
    </div>
  );
};

export default CubeWithDXF;

3d in dxf files

it can show 3D dxf files?