three-dxf
Version:
A dxf viewer for the browser using three.js.
65 lines (53 loc) • 1.78 kB
HTML
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<script src="/sample/node_modules/dxf-parser/dist/dxf-parser.js"></script>
<!-- Three.js -->
<script src="/sample/node_modules/three/build/three.min.js"></script>
<script src="/dist/three-dxf.js"></script>
</head>
<body>
<style>
#cad-view {
display: inline-block;
margin: 10px 0;
/* border: 1px solid #666;*/
}
#cad-view > canvas {
border: 1px solid #666;
}
.progress {
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.progress.loading {
opacity: 1;
}
</style>
<div class="container">
<div role="form">
<div class="form-group">
<label for="exampleInputFile">Choose a DXF file</label>
<input type="file" accept=".dxf" id="dxf" name="file">
<div class="progress progress-striped" style="width: 300px;">
<div id="file-progress-bar" class="progress-bar progress-bar-success" role="progressbar" style="width: 0">
</div>
</div>
<div id="file-description" class="help-block"></div>
</div>
<p>While hovering over the canvas: Right click to pan. Mouse wheel to zoom in an out.</p>
</div>
<div id="cad-view">
</div>
<div id="dxf-content-container">
<pre id="dxf-content">
</pre>
</div>
</div>
<script src="index.js"></script>
</body>
</html>