OptiPlayer 0.0.34 — Användarguide
Uppdaterad: 2026-05-27 Three.js version: ^0.184.0
Gränssnitt
Tidslinje
Tidslinjen visas längst ner i spelaren. Dra i handtaget eller klicka på tidslinjen för att hoppa till valfri frame. Markers visas som färgade prickar på tidslinjen — klicka på en marker för att hoppa dit. När du drar i tidslinjen avbryts eventuellt pågående ljud direkt.
Språk & Flerspråkighet
Om projektet är inställt med stöd för flera språk visas en språkväljare i gränssnittet. Genom denna kan man byta språk under pågående visning, vilket live-översätter informationsrutor, callouts, verktygstips och markörtexter.
Knappar i timelinen (vänster till höger)
| Knapp | Ikon | Funktion |
|---|---|---|
| Tillbaka | ⏮ | Återställer animationen till frame 0. |
| Play / Pause | ▶ / ⏸ | Startar eller pausar animationen. |
| Lineart | 🌐 | Växlar mellan normal rendering och lineart (kantlinjer). |
| Inställningar | ⚙️ | Öppnar debug-GUI med kamera, ljus, rendering m.m. (visas i debug-läge). |
| Kamera | 🎥 | Bläddrar mellan kameror i scenen. Döljs om bara en kamera finns. |
| Kameravyer | 🏠 | Dropdown med förinställda kameravyer (preset cameras). Döljs om inga presets finns. |
| Visa/Dölj objekt | 👁️ | Popup med toggle-knappar för att visa/dölja objekt och collections. |
| Verktyg | 🔧 | Öppnar verktygsraden med mätverktyg och objektval. Döljs om enableMeasurement: false. |
| Information | ℹ️ | Togglar synligheten för annotations och callouts. Döljs om inga finns. |
| Minimera | ⌄ | Fäller ihop panelen. Klicka igen (⌃) för att expandera. |
Hamburger-meny (mobil)
På mobil visas en ☰-meny med en lista av alla markers, sorterade likt tidslinjen. Den innehåller även aktiva verktygsikoner som synkar status direkt med desktop-vyn. Klicka på en marker för att hoppa till den framen.
Verktygsraden (🔧)
Öppnas via verktygsknappen. Bara ett verktyg kan vara aktivt åt gången.
| Verktyg | Ikon | Funktion |
|---|---|---|
| Välj Objekt | ❓ | Klicka på ett objekt för att se titel, beskrivning och ev. pris/länk. Klicka [ZOOM] för att fokusera. |
| Mät Avstånd | 📏 | Klicka på två punkter för att mäta avståndet mellan dem. |
| Mät Objekt | 📦 | Klicka på ett objekt för att visa dess bounding box med dimensioner. |
| Rensa | ✕ | Tar bort alla aktiva mätningar. |
Kortkommandon
| Tangent | Funktion |
|---|---|
| Space | Play / Pause |
| W | Växla lineart / normal rendering |
| E | Växla wireframe |
| O | Objektval |
| L | Lås / lås upp kameran mot målobjekt |
| C | Bläddra mellan kameror |
| B | Växla bounding box-djup (alltid överst / djuptestad) |
| H | Visa / dölj debug-info (stats, frame counter, GUI) |
| I | Visa GLB/GLTF-modellinformation (se nedan) |
| Shift + K | Växla till Developer Debug-läge (visar råa ID-nycklar för översättningar) |
| ← → | Stega en frame framåt / bakåt |
| ↑ ↓ | Hoppa till nästa / föregående marker |
| Dubbelklick | Fullskärm |
GLB/GLTF-info (I)
Tryck I för att visa/dölja en modal med teknisk information om den laddade 3D-modellen:
Geometri
| Fält | Beskrivning |
|---|---|
| Mesh-objekt | Antal mesh-objekt i scenen. |
| InstancedMesh | Antal instansierade meshes (GPU-effektiva kopior). |
| Polygoner (trianglar) | Totalt antal trianglar — avgörande för prestanda. |
| Vertex | Totalt antal hörn (vertices) i alla meshes. |
| Noder totalt | Alla objekt i scengrafen (meshes, ljus, kameror, tomma noder). |
Skelett & Morph Targets (visas om de finns)
| Fält | Beskrivning |
|---|---|
| Skinned Meshes | Meshes med skelettanimation (karaktärer, riggade objekt). |
| Bones | Totalt antal ben i alla skelett. |
| Morph Targets | Antal shape keys / blend shapes (ansiktsuttryck, formändringar). |
Material
| Fält | Beskrivning |
|---|---|
| Antal | Unika material. Färre = bättre draw call-batching. |
| Typ | Material-typ (MeshStandardMaterial, MeshPhysicalMaterial, etc). |
Texturer
| Fält | Beskrivning |
|---|---|
| Antal | Unika texturer (diffuse, normal, roughness, metalness m.m.). |
| Upplösning | Varje textur med namn och storlek (t.ex. 2048×2048). |
| Texturminne | Ungefärligt GPU-minne för alla texturer (RGBA). |
Scen
| Fält | Beskrivning |
|---|---|
| Bounding Box | Scenens totala storlek i X × Y × Z (i vald måttenhet). |
| Kameror | Antal kameror med namn. |
| Lampor | Ljuskällor med typ (PointLight, SpotLight, etc.) och intensitet. |
Animationer
| Fält | Beskrivning |
|---|---|
| Klipp | Antal animationsklipp med namn och längd i sekunder. |
| FPS / maxFrames | Bildfrekvens och totalt antal frames i timelinen. |
Renderer (live-statistik)
| Fält | Beskrivning |
|---|---|
| Draw calls | Antal GPU-anrop per frame. Lägre = bättre prestanda. |
| Trianglar (renderade) | Faktiskt renderade trianglar (efter culling). |
| Geometrier (GPU) | Antal geometribuffertar i GPU-minnet. |
| Texturer (GPU) | Antal textur-objekt i GPU-minnet. |
| Program (shaders) | Antal kompilerade shader-program. |
Annotations & Callouts
Informationsrutor kopplade till 3D-objekt. Tre visningslägen:
| Läge | Beskrivning |
|---|---|
| Callout | Permanent synlig ruta med animerad linje till objektet (på desktop). På mobil markeras kopplingen med en färgkodad aktiv visning. |
| Annotation | Svävande hotspot (ℹ️) i 3D-rummet. Klicka för att öppna info. |
| Hidden | Syns bara vid objektval (O + klick). |
Toggla alla med ℹ️-knappen i timelinen.
Ljud & Röst (Audio Markers)
Tidslinjen har inbyggt stöd för att spela upp ljud (Voiceover eller ljudeffekter). När uppspelningen når en specifik markör i tidslinjen kan animationen (om inställt) pausas automatiskt medan röstklippet pratar färdigt. Uppspelningen av animationen fortsätter automatiskt så fort ljudet är slut. Drar du aktivt i tidslinjen eller klickar på en ny plats stängs pågående ljud av smidigt utan att överlappa.
Viewer Toggles (👁️)
Klicka på öga-knappen för att öppna en popup med responsiva toggle-switchar. Varje toggle-knapp visar eller döljer ett specifikt objekt (eller samling av objekt) direkt i 3D-scenen.
Objektval & Zoom
- Tryck på tangenten O — markören blir ett frågetecken.
- Klicka på objektet du vill inspektera.
- En ruta visas med titel, beskrivning och ev. pris/länk.
- Klicka [ZOOM] för att zooma in. Kameran roterar nu runt det valda objektet.
- Släpp fokus: tryck Space (play) eller dra i tidslinjen.
Lineart
Teknisk visualisering med kantlinjer.
- Tryck W eller klicka lineart-knappen (🌐).
- Visar threshold edges, normal edges och conditional (silhuett) edges.
- SAO stängs av automatiskt vid lineart och återställs vid normal rendering.
Mätverktyg
Avstånd
- Aktivera mätverktyget (📏).
- Klicka på en yta → första punkt sätts.
- Klicka på en annan yta → avstånd visas med linje och etikett.
Dimensioner
- Aktivera dimensionsverktyget (📦).
- Klicka på ett objekt → bounding box visas med bredd, höjd och djup.
- Tryck B för att växla mellan "alltid överst" och djuptestad rendering.