Zurück zur Übersicht
Die Erdbeerpflanze beschriften
3D-Lernräume

Die Erdbeerpflanze beschriften

Eine Drag-and-Drop-Lernaufgabe mit einem echten 3D-Modell: Sieben botanische Begriffe müssen auf die passenden Punkte einer drehbaren Erdbeerpflanze gezogen werden — inklusive Umschalter zwischen Alltags- und Fachbegriffen.

Zielgruppe

Sekundarstufe I/II, Biologie

Lernziel

Den Aufbau einer Erdbeerpflanze benennen und verstehen, warum die Erdbeere botanisch eine Sammelnussfrucht ist statt einer echten Frucht.

Meine Rolle

Konzept, didaktisches Design, 3D-Umsetzung

Ergebnis

Sieben frei im Raum drehbare Beschriftungspunkte mit Hover-Hervorhebung am Modell, Alltags-/Fachbegriff-Umschalter und Touch-Unterstützung für Tablets.

Eingesetzte Tools

Three.jsViteJavaScriptBlender
Case Study

Mein Denkprozess

Wie ich von der ersten Idee zur fertigen Lösung gekommen bin — Entscheidungen, Stolpersteine und was am Ende dabei herausgekommen ist.

  1. Schritt 01

    Herausforderung

    Pflanzenanatomie wird meist an flachen Lehrbuchdiagrammen gelernt — wer danach vor einer echten Pflanze steht, kann die Begriffe oft nicht mehr zuordnen. Hinzu kommt ein hartnäckiger Irrtum: Die rote „Frucht” der Erdbeere ist botanisch gar keine Frucht, sondern ein stark verdickter Blütenboden.

    • Zielgruppe: Sekundarstufe I/II, Biologieunterricht
    • Anforderung: räumliches Verständnis statt starrer 2D-Beschriftung
    • Anforderung: Fachbegriffe lernbar machen, ohne die Alltagssprache zu verdrängen
  2. Schritt 02

    Analyse

    Zielgruppe analysiert

    Lernende kennen Erdbeeren aus dem Alltag, aber kaum die botanischen Fachbegriffe für ihre Teile.

    Lernziele definiert

    Sieben Pflanzenteile korrekt benennen — inklusive der Sammelnussfrucht als botanischer Besonderheit.

    Didaktik gewählt

    Beschriftung direkt am drehbaren 3D-Modell statt am starren Lehrbuchbild — Begriff und räumliche Lage werden gemeinsam gelernt.

    Technik bewertet

    Three.js im Browser statt Autorentool mit fester Kameraperspektive — Lernende drehen das Modell frei.

  3. Schritt 03

    Konzept

    Hotspot-Layout

    Sieben Beschriftungspunkte auf dem 3D-Modell mit Hover-Hervorhebung geplant.

    Begriffs-Umschalter

    Umschalter zwischen Alltags- und Fachbegriff als Brücke zwischen beiden Sprachebenen.

    Interaktionsfluss

    Begriff greifen → Pflanze drehen → am Hotspot ablegen → Rückmeldung.

    Moodboard

    Naturnahe, ruhige Bildsprache statt spielerisch-bunter Lernspiel-Optik.

  4. Schritt 04

    Umsetzung

    Blender

    Eigenes, botanisch korrektes 3D-Modell der Erdbeerpflanze für die sieben Beschriftungspunkte.

    Three.js

    Frei drehbare, performante 3D-Darstellung direkt im Browser ohne Plug-in.

    Vite

    Schnelle Iteration bei Hotspot-Platzierung und Lichtsetzung.

    JavaScript

    Leichtgewichtige Drag-and-Drop- und Hover-Logik ohne zusätzliches Framework.

  5. Schritt 05

    Herausforderungen & Lösungen

    Problem

    Beschriftungspunkte auf einem drehbaren 3D-Modell verschieben sich mit jeder Kamerabewegung.

    Lösung

    Hotspots hängen an den 3D-Weltkoordinaten des Modells statt an festen Bildschirmpositionen.

    Problem

    Reine Fachbegriffe schrecken Lernende ohne Vorwissen ab.

    Lösung

    Umschaltbare Alltags-/Fachbegriffe, damit beide Sprachebenen sichtbar bleiben.

    Problem

    Drag-and-Drop ist auf Tablets ohne Maus schwer präzise zu treffen.

    Lösung

    Touch-Unterstützung mit großzügigeren Trefferzonen als am Desktop.

  6. Schritt 06

    Ergebnis

    Sieben frei im Raum drehbare Beschriftungspunkte mit Hover-Hervorhebung, Alltags-/Fachbegriff-Umschalter und Touch-Unterstützung für Tablets.

    Gelernt

    Ein 3D-Modell allein erzeugt noch kein räumliches Verständnis — erst die Kombination aus Drehen, Hovern und aktivem Zuordnen verankert die Begriffe.

    Heute anders

    Ich würde die botanische Besonderheit der Sammelnussfrucht schon im Modell selbst sichtbar machen, statt sie nur im Begleittext zu erklären.

Selbst ausprobieren

Am besten spricht das Ergebnis für sich — wirf einen Blick in die Demo.

Demo ansehen