distCAD Viewer

Author: Matthias Krüger

With Javascript it's possible to view interaktive the 3D-models from distCAD and other programms in a webseite.

Your browser does not support canvas.
left mouse button moved, left mouse button turn, stop
right mouse button moved move
mouse wheel zoom change
right mouse button display opitons
visibility of
  • Vertices
  • Edges
  • Surfaces
R reset the display
A zoom 100%
X, Y, Z turn this axis to viewpoint, continue turn

The Framework three.js uses the WebGL API to render the 3D-model hardware accelerated in the graphics card. In distCAD it's possible turn around the 3-th axis with reight mouse botton, but here the object is moved. If there are no surfaces, they are searched for. In the past, all parameters could be changed by script with the applet, but this has not (yet) been implemented.


  1. Your browser must have enabled Javascript. When you see above a 3D-object, is Javascript enabled.
  2. The file resources.zip contains the folder resources with all necessary files. Extract this folder with all files into your project.
    The main program is distCADViewer.js.
  3. This scripts must be included in the <head> area of your .html file:
<script src="resources/three.js"></script>
<script src="resources/ObjectControls.js"></script>
<script src="resources/distCADReader.js"></script>
<script src="resources/Menu.js"></script>
<script src="resources/distCADViewer.js"></script>
  1. In area <body> of your .html file must you include follow canvas tag:
<canvas class="distCADViewer" height="200" width="200"
  data-model="Test.txt" >

The attributes width und height must always be specified.
Test.txt is the name of the file to be displayed. It can also be specified relative to the current directory (for example: "models/Test.txt")


The following parameters can be specified:

Attribute Description Default
data-model URL of the file to be displayed. (necessary)
data-color Color of the modell as CSS color value #00ff00
data-background-color Background color as CSS color value #f5f0f5
data-scansurfaces boolean, if 1: search for surfaces 0