X3dom: Einführung
Hier ist die Einführung
Die Entwicklungsumgebung
[Bearbeiten]Als Entwicklungsumgebung für unsere ersten Schritte in x3dom nutzen wir das kostenlose jsBin von Remy Sharp (Adresse: https://jsbin.com/). jsBin ist ein Onlinetool mit dem ihr HTML, CSS und JavaScriptprogramme sofort ausprobieren könnt. Dabei besteht die jsBin-Anwendung aus drei Teilen: Dem oberen Teil, dem Mittelteil mit fünf Buttons und dem Unteren Teil mit den 1-5 Arbeitsbereichen. Für unsere x3dom Experimente benötigen wir von den fünf Buttons im Mittelteil nur den HTML-Bereich aktiviert mit dem ganz linken Button (HTML) und den Output-Bereich (aktiviert mit dem Button ganz rechts). Mit jsBin werden alle Veränderungen, die wir auf der linken Seite ins Eingabefeld eingeben automatisch auf der rechten Seite gerendert. Ruft jsBin einmal auf und drückt auf die fünf Buttons und schaut Euch an was passiert.
-
Hello World in x3dom
</image>
<html>
<head>
<title>5001 HelloX3dom</title>
<script type='text/javascript' src='https://www.x3dom.org/download/dev/x3dom.js'> </script>
<link rel='stylesheet' type='text/css' href='https://www.x3dom.org/download/x3dom.css'></link>
</head>
<body>
<h1>5001 Hallo World, in x3dom!</h1>
<p>
Hier wird ein roter Text angezeigt. <p>
<x3d width='800px' height='600px'>
<scene>
<Transform translation="-3 1 0"> <!Verschiebung um 3 nach links, 1 nach oben>
<shape> <!Shape = appearance + geometrie>
<appearance>
<material diffuseColor='red' ></material>
</appearance>
<Text string="Hallo x3dom" solid="true"></Text>
</shape>
</Transform>
</scene>
</x3d>
</body>
</html>
Erläuterungen zum Programm
[Bearbeiten]An dieser Stelle soll kurz erläutert werden was das Programm ausmacht:
Aufgaben
[Bearbeiten]- A00.01 Was passiert, wenn man solid="false" setzt?
- A00.02 Kopiere den Transform-Block und verteile den Text "Hallo x3dom" auf beide Transform-Blöcke, so dass jeder Block nur ein Wort enthält. Das Wort "Hallo" soll in gelb und das Wort "xdom" in der Farbe blau dargestellt werden.
- A00.03 xxx