INSIDE — Laptop 3D

En interaktiv, svensk WebGL-utforskare av en modern laptop. Byggd med React, Three.js och Vite.

Utforska

• Vrid modellen genom att dra och zooma med scrollhjul eller nypgest.
• Växla mellan helhet, under skalet och sprängskiss.
• Välj CPU, moderkort, arbetsminne, SSD, kylsystem, batteri eller skärm.
• Öppna processorns detaljvy för att se en illustrativ kiselkrets under värmespridaren.
• Styr lagerseparation, skärmvinkel, etiketter och automatisk rotation.
• Komponentknappar, vyval och kameraknappar fungerar med tangentbord.

Modellen är en pedagogisk konceptmodell. Placering, mått och specifikationer är illustrativa, inte uppgifter om en viss produkt eller en serviceguide.

Kör lokalt

Kräver Node.js 22.13 eller senare.

npm ci
npm run dev

Bygg

npm run build
npm start

dist/ är en fristående statisk webbplats. Relativa resursadresser gör att den fungerar även under ett GitHub Pages-reponamn. Ingen server, API-nyckel eller databas behövs. Google Fonts används när nätverk finns, annars lokala reservtypsnitt.

Källkod

• app/main.tsx: gränssnitt och komponentbeskrivningar.
• app/scene.ts: procedurgenererad modell, material, kamera och interaktioner.
• app/style.css: responsiv layout.

3D-geometrin och skärmgrafiken genereras i kod. Inga externa modellfiler behövs. Three.js och Lucide används under sina respektive MIT- och ISC-licenser. Beroendenas licenser följer med npm-paketen.

GitHub Pages

Den publicerade webbplatsen ligger i docs/. Efter ändringar:

npm run build

Ersätt sedan innehållet i docs/ med byggresultatet i dist/ och behåll docs/.nojekyll. GitHub Pages ska använda huvudgrenen och katalogen /docs.