Cross platform DXF loader for three.js. Out of the box usable with react-three-fibre.

Usage no npm install needed!

<script type="module">
  import threeDxfLoader from '';



three-dxf-loader is a cross platform DXF file loader for THREE.js. It takes URL of a DXF file as input and returns THREE.js mesh entities. It internally uses dxf-parser for parsing DXF file. This library works out of the box with cross platform react-native and react-three-fibre.


yarn add three-dxf-loader three


npm i three-dxf-loader three


import * as THREE from 'three'
import { DXFLoader } from 'three-dxf-loader'

const loader = new DXFLoader();
// loader.setFont(font); // set fonts
const scene = new THREE.Scene();
onLoad = (data) => {
    if (data && data.entities) {
      data.entities.forEach(ent => scene.add(ent))
const onError = (error) => {
const onProgress = (xhr) => {
  console.log( ( xhr.loaded / * 100 ) + '% loaded' );
loader.load(url, onLoad, onProgress, onError);

Run Web Viewer Sample

Example of the viewer

# First, compile three-dxf-loader
> yarn install
> yarn build

# then install the sample's dependencies
> cd sample
> yarn install

# go back to the root and run http-server to run the sample
> cd ..
> npm install -g http-server@0.9.0
> http-server .
# use `http-server -c-1 .` to prevent caching

After performing the steps above, you can see the example at You can use the DXF file included in the sample. NOTE: the latest version of http-server will go into a redirect loop if you exclude "/index.html" from the url.

Supported DXF Features


  • Header
  • Most LW entities (lines, polylines, circles, etc)
  • Layers
  • Some support for line types
  • Simple Text
  • Viewport
  • Splines (Quadratic and Cubic)
  • Ellipses

Does not yet support:

  • Attributes
  • 3DSolids
  • All types of Leaders
  • MText
  • other less common objects and entities.


The MIT License