distCAD Anzeige

Autor: Matthias Krüger

Mit Javascript lassen sich die 3D-Modelle von distCAD und anderen Programmen in einer Webseite interaktiv darstellen.

Ihr Browser unterstützt kein canvas.
Anleitung
linke Maustaste bewegt, linke Maustaste drehen, stoppen
rechte Maustaste bewegt verschieben
Mausrad Zoom ändern
rechte Maustaste Anzeigeopitonen
Sichtbarkeit der
  • Ecken
  • Linien
  • Flächen
R Reset der Anzeige
A Zoom 100%
X, Y, Z diese Achse zum Auge drehen, weiter drehen

Das Framework three.js nutzt die WebGL API um das 3D-Modell hardwarebeschleunigt in der Grafikkarte zu renden. In distCAD kann mit der rechten Maustaste um die 3. Achse gedreht werden, aber hier wird das Objekt verschoben. Wenn keine Flächen vorhanden sind, werden sie gesucht. Mit dem Applet konnten früher alle Parameter per Script verändert werden, das ist (noch) nicht realisiert.

Download

  1. In ihrem Browser muß Javascript aktiviert sein. Wenn sie oben ein 3D-Objekt sehen ist ist Javascript aktiviert.
  2. Die Datei resources.zip enthält den Ordner resources mit allen benötigten Dateien. Entpacken sie diesen Ordner mit allen Dateien in ihr Projekt.
    Das Hauptprogramm ist distCADViewer.js.
  3. Im Bereich <head> ihrer .html-Datei müssen die Scripte eingebunden werden:
<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. Im Bereich <body> ihrer .html-Datei können sie z. B: folgendes einfügen:
<canvas class="distCADViewer" height="200" width="200"
  data-model="Test.txt" >
</canvas>

Die Attribute width und height müssen immer angegeben werden.
Test.txt ist der Name der Datei die angezeigt werden soll. Die Angabe ist auch relativ zum aktuellen Verzeichnis möglich (z. B.: "modelle/Test.txt")

Parameter

Folgende Parameter können angegeben werden:

Attribut Beschreibnung Standard
data-model URL der Datei die angezeigt werden soll. (erforderlich)
data-color Farbe des Modells als CSS Farbangabe #00ff00
data-background-color Hintergrundfarbe als CSS Farbangabe #f5f0f5
data-scansurfaces boolean, bei 1: suche nach Flächen 0