Celle-laboratoriet

Interaktivt 3D-undervisningsverktøy i cellebiologi for norsk skole. Utforsk fem realistiske celle- og molekylmodeller med rotering, zooming og organelleoversikt.

Under mikroskopet — se livet på nært hold

Modeller

Modell	Fil	Kilde	Beskrivelse
Plantecelle	models/plant-cell.glb	GordenSun/LearningCell	Cellevegg, kloroplaster, sentralvakuole
Dyrecelle	models/animal-cell.glb	GordenSun/LearningCell	Cellemembran, mitokondrier, lysosom
Hvit blodcelle	models/white-blood-cell.glb	GordenSun/LearningCell	Immunsystemets forsvarer
Nervecelle	models/neuron.glb	GordenSun/LearningCell	Dendritter, akson og synapse
DNA-dobbeltspiral	models/dna.glb	GordenSun/LearningCell	Dobbeltspiral med fosfatryggard
Bakterie	models/bacteria.glb	NIH 3DPX-010752	Grampositiv cellevegg — prokaryot
Dyrecelle (NIH)	models/animal-cell-nih.glb	NIH 3DPX-015797	Alternativ — Public Domain
Nervecelle (NIH)	models/neuron-nih.glb	NIH 3DPX-015796	Alternativ — Public Domain

Modellene er komprimert med Draco. Se CREDITS.md for full lisensoversikt.

Teknisk stack

• Vite + React 19 + TypeScript — moderne frontend-oppsett
• three.js / @react-three/fiber / @react-three/drei — WebGL 3D-rendering
• DRACOLoader med lokal wasm-dekoder — fungerer offline, ingen avhengighet til gstatic
• Tilpasset strømmende laster — bruker fetch + ReadableStream for nøyaktig nedlastingsprogress

Lokal utvikling

cd app
npm install
npm run dev

Bygg for produksjon:

cd app
npm run build
npm run preview   # forhåndsvis bygget lokalt

Deploy til GitHub Pages

Repositoriet inkluderer .github/workflows/deploy.yml. Etter at repoet er pushet til GitHub:

1. Gå til Settings → Pages
2. Velg Source: GitHub Actions
3. Push til main-grenen — appen bygges og publiseres automatisk

Arbeidsflyten bruker /<repo-navn>/ som nettstedsrot (kompatibel med https://<bruker>.github.io/<repo>/). For eget domene eller rotrepo setter du VITE_BASE til "/" i deploy.yml.

Lastestrategi

• Prioritert: Gjeldende modell lastes ned umiddelbart ved sideoppstart (standard er Plantecelle, ca. 6 MB). Fremdrift vises med ekte progresjonsbar.
• Bakgrunn: Etter at standardmodellen er ferdig (eller etter 5 sekunder), lastes de øvrige 4 modellene seriellt for å unngå båndbreddekonflikter.
• Buffering: Nettleseren bruker force-cache på .glb-filer — gjentatte besøk er nesten øyeblikkelige.
• Manuelt valg: Klikk på en ikke-lastet modell i sidepanelet for å sette den foran i køen.

Læreplantilknytning (LK20)

Innholdet dekker kompetansemål i naturfag fra ungdomsskole til Vg2–Vg3:

Nivå	Eksempel på kompetansemål
8–10 (ungdomsskole)	Utforske og beskrive oppbygningen av celler hos ulike organismer
Vg1	Gjøre rede for celletyper, celledelingsprosesser og arvegang
Vg2–Vg3	Forklare DNA-replikasjon, transkripsjon og translasjon

Mappestruktur

.
├── .github/workflows/deploy.yml   # GitHub Pages automatisk deploy
├── README.md
└── app/                           # Vite-frontendprosjekt
    ├── public/
    │   ├── draco/                 # Lokal Draco-dekoder (wasm)
    │   ├── images/                # Cellebilder (komprimert)
    │   └── models/                # 5 .glb-modeller
    └── src/
        ├── components/            # UI-komponenter (sidepanel, 3D-visning, infopanel)
        ├── data/models.ts         # Norsk celledata med organeller og læreplantilknytning
        ├── hooks/useModel.ts      # Hook for lastestatus
        ├── lib/modelLoader.ts     # Strømmende nedlasting + Draco + cache
        └── App.tsx

Kilder og kreditering

3D-modeller

• GordenSun — LearningCell Plantecelle, dyrecelle, hvit blodcelle, nervecelle, DNA-dobbeltspiral
• NIH 3D Print Exchange — 3d.nih.gov — Public Domain (US Government) Bakterie (3DPX-010752), dyrecelle-NIH (3DPX-015797), nervecelle-NIH (3DPX-015796)
• cclank (lanshu) — cell-architecture-studio NIH-modellreferanser oppdaget her. Original visuell retning av @DilumSanjaya — MIT-lisens (kode)

Teknisk inspirasjon

• Streaming GLB-laster og Draco-oppsett inspirert av GordenSun/LearningCell

Se CREDITS.md for fullstendig lisensoversikt per modell.

Lisens

Applikasjonskode: MIT. 3D-modeller har individuelle lisenser — se CREDITS.md.

Laget med kjærlighet til biologiundervisning.