Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- api:documentation:grafik3d:start [2025/01/11 16:56] – [Einfache 3D-Grundformen] martin
+++ api:documentation:grafik3d:start [2025/03/08 08:45] (aktuell) – [Sprite3d] martin
@@ Zeile 2: / Zeile 2: @@
 <WRAP center round info 80%>
 Die Online-IDE ermöglicht einen einfachen Einstieg in die 3D-Grafikprogrammierung und stellt dafür viele spezialisierte Klassen zur Verfügung, die intern wiederum auf [[https://threejs.org/|die Open-Source-Bibliothek three.js]] zurückgreifen. \\ \\
-Die 3D-Grafik-API besteht Stand Januar 2025 aus 35 Klassen und ist noch im Entstehen. Die Bezeichner aller Klassen dieser API enden auf "3d", sodass man sie von den anderen Klassen der API leicht unterscheiden kann.
+Die 3D-Grafik-API besteht Stand Januar 2025 aus 35 Klassen und ist noch im Entstehen. Die Bezeichner aller Klassen dieser API enden auf "3d", sodass man sie von den anderen Klassen der API leicht unterscheiden kann. \\ \\
+Auf dieser Seite werden die verschiedenen Grundformen gezeigt. Hier die weiteren Unterkapitel zum Thema 3D-Grafik:
+  * [[:api:documentation:grafik3d:transformationen:start|Transformationen]] \\
+  * [[:api:documentation:grafik3d:kamera:start|Kamera]] \\
+  * [[:api:documentation:grafik3d:licht:start|Licht]] \\
+  * [[:api:documentation:grafik3d:materialien:start|Materialien]] \\
+  * [[:api:documentation:grafik3d:texture:start|Texturen]] \\
+  * [[:api:documentation:grafik3d:animation:start|Animation]] \\
 </WRAP>
@@ Zeile 13: / Zeile 21: @@
   * ''Cone3d'' (Kegel bzw. Kegelstumpf)
   * ''Torus3d''
+  * ''Icosahedron3d''
-Wenn Sie bei den folgenden Demos in die Zeichenfläche klicken und die Maus bewegen, können Sie die Kameraposition verändern und die Objekte so von allen Seiten betrachten.
+Wenn Sie bei den folgenden Demos in die Zeichenfläche **klicken und die Maus bewegen**, können Sie die **Kameraposition verändern** und die Objekte so von allen Seiten betrachten. Mit dem **Mausrad** können Sie **zoomen**.
 </WRAP>
 ==== Box3d (Quader) ====
+<WRAP center round tip 80%>
+Zur Bedeutung der maximal sechs möglichen Parameter width, height, depth, widthSegments, heightSegments, depthSegments siehe [[https://threejs.org/docs/?q=Cyl#api/en/geometries/BoxGeometry|die Dokumentation der BoxGeometry-Klasse von three.js]].
+</WRAP>
 <HTML>
@@ Zeile 28: / Zeile 40: @@
 Box3d box2 = new Box3d(1, 1, 0.5, 2, 4, 2);
 box2.move(-1, 1, 1);
-box2.getMaterial().setColor(0x0000ff);
+box2.getMaterial().setColor(0x5050ff).setWireframe(true);
-box2.getMaterial().setWireframe(true);
 Box3d box3 = new Box3d();
-box3.getMaterial().setColor(0xff0000);
+box3.getMaterial().setColor(0xff0000).setAlpha(0.6);
-box3.getMaterial().setAlpha(0.6);
-box3.getMaterial().setTransparent(true);
 </script>
@@ Zeile 44: / Zeile 53: @@
 ==== Sphere3d (Kugel) ====
 <WRAP center round tip 80%>
-Zur Bedeutung der sieben möglichen Parameter radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength siehe [[https://threejs.org/docs/#api/en/geometries/SphereGeometry|die Dokumentation der Sphere-Klasse von three.js]]. Der Konstruktor der Online-IDE unterscheidet sich nur insofern, als dass die Winkel im Gradmaß angegeben werden statt im Bogenmaß.
+Zur Bedeutung der sieben möglichen Parameter radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength siehe [[https://threejs.org/docs/#api/en/geometries/SphereGeometry|die Dokumentation der SphereGeometry-Klasse von three.js]]. Der Konstruktor der Online-IDE unterscheidet sich nur insofern, als dass die Winkel im Gradmaß angegeben werden statt im Bogenmaß.
 </WRAP>
@@ Zeile 62: / Zeile 71: @@
 </HTML>
+==== Cylinder3d ====
+<WRAP center round tip 80%>
+Zur Bedeutung der maximal acht möglichen Parameter radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength siehe [[https://threejs.org/docs/?q=Cyl#api/en/geometries/CylinderGeometry|die Dokumentation der CylinderGeometry-Klasse von three.js]]. Der Konstruktor der Online-IDE unterscheidet sich nur insofern, als dass die Winkel im Gradmaß angegeben werden statt im Bogenmaß.
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': '3d-base-objects3', 'enableFileAccess': true}">
+<script type="text/plain" title="Test1.java">
+Cylinder3d c1 = new Cylinder3d();
+Cylinder3d c2 =
+   new Cylinder3d(0.5, 1.5, 1.5,
+, 10, false, 90, 270);
+c2.move(-2, 1, -1);
+c2.rotateX(45);
+c2.enableFrontBackSide(true, true);
+c2.getMaterial().setColor(0x5050ff);
+Cylinder3d c3 = new Cylinder3d(1, 2, 2);
+c3.getMaterial().setColor(Color.chocolate);
+c3.move(2, 0, -3);
+</script>
+</div>
+</HTML>
+==== Cone3d ====
+<WRAP center round tip 80%>
+Zur Bedeutung der maximal sieben möglichen Parameter radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength siehe [[https://threejs.org/docs/?q=Cyl#api/en/geometries/ConeGeometry|die Dokumentation der ConeGeometry-Klasse von three.js]]. Der Konstruktor der Online-IDE unterscheidet sich nur insofern, als dass die Winkel im Gradmaß angegeben werden statt im Bogenmaß.
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': '3d-base-objects4', 'enableFileAccess': true}">
+<script type="text/plain" title="Test1.java">
+Cone3d c1 = new Cone3d();
+Cone3d c2 =
+   new Cone3d(0.5, 1.5,
+, 10, false, 90, 270);
+c2.move(-2, 1, -1);
+c2.rotateX(45);
+c2.enableFrontBackSide(true, true);
+c2.getMaterial().setColor(0x5050ff);
+Cone3d c3 = new Cone3d(1, 2);
+c3.getMaterial().setColor(Color.chocolate);
+c3.move(2, 0, -3);
+</script>
+</div>
+</HTML>
+==== Torus3d ====
+<WRAP center round tip 80%>
+Zur Bedeutung der maximal fünf möglichen Parameter radius, tube, radialSegments, tubularSegments, arc siehe [[https://threejs.org/docs/?q=Cyl#api/en/geometries/TorusGeometry|die Dokumentation der TorusGeometry-Klasse von three.js]]. Der Konstruktor der Online-IDE unterscheidet sich nur insofern, als dass der Winkel arc im Gradmaß angegeben wird statt im Bogenmaß.
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': '3d-base-objects5', 'enableFileAccess': true}">
+<script type="text/plain" title="Test1.java">
+Torus3d t1 = new Torus3d();
+Torus3d t2 = new Torus3d(2, 0.5, 16, 100, 270);
+t2.move(-2, 0, -1);
+t2.getMaterial().setColor(Color.cornflowerblue);
+t2.enableFrontBackSide(true, true);
+t2.rotateY(200);
+t2.rotateX(90);
+</script>
+</div>
+</HTML>
+==== Icosahedron3d ====
+<WRAP center round tip 80%>
+Zur Bedeutung der maximal zwei möglichen Parameter radius, detail siehe [[https://threejs.org/docs/?q=Cyl#api/en/geometries/IcosahedronGeometry|die Dokumentation der IcosahedronGeometry-Klasse von three.js]].
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': '3d-base-objects6', 'enableFileAccess': true}">
+<script type="text/plain" title="Test1.java">
+Icosahedron3d ico = new Icosahedron3d(2, 1);
+ico.getMaterial().setFlatShading(true);
+while(true);
+</script>
+</div>
+</HTML>
+===== Sprite3d =====
+<WRAP center round tip 80%>
+Objekte der Klasse ''Sprite3d'' sind Bilder, die immer zur Kamera hin gerichtet sind. \\ \\
+// Tipp: Klicken Sie im folgenden Beispiel mit der linken Maustaste ins Bild und ziehen Sie die Maus um die Kamera zu bewegen!//
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': '3d-sprite', 'enableFileAccess': true}">
+<script type="text/plain" title="Test1.java">
+Box3d box = new Box3d();
+Sprite3d sprite = new Sprite3d(1, SpriteLibrary.Plattforms, 20);
+sprite.move(0, 1.5, 0);
+</script>
+</div>
+</HTML>
+<WRAP center round tip 80%>
+Die Klasse Sprite3d ist auf Geschwindigkeit hin optimiert, so dass problemlos mehrere tausend Sprites gleichzeitig animiert werden können. \\ \\
+Hier ein kleines Beispielprogramm dazu:
+</WRAP>
+<HTML>
+<div class="java-online" style="height: 300px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': '3d-sprite_2', 'enableFileAccess': true}">
+<script type="text/plain" title="Test1.java">
+Cylinder3d c = new Cylinder3d(0.3, 0.3, 0.5);
+c.move(0, 0.25 - 3, 0);
+World3d.getWorld3d().getCamera().moveTo(20, 20, 20);
+Plane3d p1 = new Plane3d(18, 18);
+p1.rotateX(-90);
+p1.move(0, -12, 0);
+p1.getMaterial().setColor(0x5959c9);
+p1.enableFrontBackSide(true, true);
+new ParticleEmitter();
+class ParticleEmitter extends Actor {
+   int j = 0;
+   public void act() {
+      for (int i = 0; i < 120; i++) {
+         new FlyingSprite1();
+      }
+      if(j++ % 30 == 0) println(FlyingSprite1.count + " Sprites sichtbar");
+   }
+}
+class FlyingSprite1 extends Sprite3d {
+   static int count = 0;
+   double vy = Random.randdouble(15, 30);
+   double vx = Random.randdouble(-8, 8);
+   double vz = Random.randdouble(-8, 8);
+   double flimmerFrequency = Random.randdouble(0.2, 1);
+   int t = 0;
+   FlyingSprite1() {
+      super(0.9, SpriteLibrary.Particles, 0);
+      move(0, 0.3 - 3, 0);
+      setColor(Color.randomColor(180, 220));
+      count++;
+   }
+   public void act() {
+      double factor = 0.02;
+      move(vx * factor, vy * factor, vz * factor);
+      // setAlpha(Math.abs(Math.sin(t++ * flimmerFrequency)) > 0.8 ? 1 : 0);
+      vy = vy - 0.4;
+      if(getY() < -12) {
+         destroy();
+         count--;
+      }
+   }
+}
+</script>
+</div>
+</HTML>