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.

Instructions
,	turn, stop
	move
	zoom change
	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.

Download

Your browser must have enabled Javascript. When you see above a 3D-object, is Javascript enabled.
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.
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>

In area <body> of your .html file must you include follow canvas tag:


<canvas class="distCADViewer" height="200" width="200"

  data-model="Test.txt" >

</canvas>

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")

Parameters

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`