02 Session 2 Continue from Created App Folder Assets Export Run

Verge3d + Blender: Interactive Table (web 3d/vr) — Step‑by‑step Student Guide

Verge3D + Blender — Interactive Table (Web 3D/VR)

Session 2 — Continue from Created App (Folder, Assets, Export, Run)

Goal: Replace the default scene with the provided simple configurator model, export with Verge3D glTF, and run the app in a browser. We’ll fix textures and lighting in the next session.

Recap (Session 1): You installed Verge3D for Blender, enabled the add‑on, created a new app named interactive-table via App Manager, and verified Sneak Peek works.

---

1) Locate Your App Folder

1. Open Verge3D App Manager (from Blender’s top bar).
2. Confirm your apps path (default is something like: Documents/Verge3D/applications/).
3. Open the folder for your app: …/applications/interactive-table/.
• You’ll see files like index.html, visual_logic.xml (Puzzles), interactive-table.gltf (or similarly named), a blender/ subfolder if you created it, and other assets.

Tip: Keep names short, lowercase, no spaces. Use hyphens or underscores.

---

2) Open the Default .blend

1. In Blender, go to File → Open.
2. Navigate to your app: …/applications/interactive-table/.
3. Open interactive_table.blend (or the default .blend created by the template). If you don’t see one, use any existing .blend you saved earlier.
4. Switch to Shading workspace and enable Material Preview to see the starter materials.

This default scene exists only to prove your pipeline works; we’ll now replace it with the provided model.

---

3) Add the Provided Resources to the App

You’ll receive 1 Blender file (simple_configurator.blend) and 4 texture images.

1. Copy all 5 files.
2. Paste them inside your app folder: …/applications/interactive-table/ (or inside a subfolder like assets/).
3. Keep paths relative to the app root for easier export and hosting.

---

4) Replace the Default Scene (Two Methods)

Method A — Append (non‑destructive, recommended for learning)

1. In Blender: File → Append.
2. Pick simple_configurator.blend (the copy you placed in the app folder).
3. Open the Object or Collection folder inside the .blend and select the items you need (e.g., Table_Top, Frame, Cubes, Sphere_Env, etc.). Click Append.
4. Clean up the Outliner: delete old placeholder objects; keep your new collection organized. Apply transforms (Ctrl+A → Rotation & Scale).

Method B — Replace by Renaming (quick swap)

1. Close Blender (or ensure the default .blend is not open).
2. In the interactive-table folder, note the default file name (e.g., interactive_table.blend).
3. Delete the old default .blend.
4. Rename simple_configurator.blend to interactive_table.blend (exact same name as the original).
5. Re‑open Blender and open this renamed file.

Caution: The rename approach is fast but you lose the original template scene unless you kept a backup.

---

5) Inspect the Scene in Blender

1. In Outliner, verify you see the expected objects: e.g., a main Table/Cubes set and a Sphere for environment.
2. Ensure origins are sensible (e.g., at hinges for parts you’ll animate later).
3. Check UVs exist on meshes intended to show textures.
4. Keep materials simple and EeVee‑friendly (Principled BSDF with Image Texture where applicable).

---

6) Export with Verge3D glTF

Verge3D installs a special exporter. Use that (not the generic glTF exporter) for best compatibility.

1. In Blender: File → Export → Verge3D glTF (.gltf/.glb).
2. Target folder: your app folder …/applications/interactive-table/.
3. Overwrite the existing scene file if prompted (e.g., interactive-table.gltf).
4. Recommended options:
• Format: .gltf (JSON + external textures) or .glb (single binary). For beginners, .gltf is ok.
• Embed textures: off if you plan to keep images as separate files; on if you want a single package (file size grows).
• Apply modifiers: on (where safe) to avoid surprises.
• Animation: enabled if you have actions.
5. Click Export.

If textures don’t show later, don’t worry — we’ll fix paths/materials next session.

---

7) Run the App in the Browser

1. Open Verge3D App Manager.
2. Click your app card interactive-table → Run.
3. A browser tab opens with index.html and loads your exported scene.
4. Verify you can orbit/zoom/pan the camera.

Expected for now: It may look unlit or missing textures. That’s okay — we’ll address Lighting & Textures next.

---

8) Quick Sanity Checks & Common Pitfalls

• Nothing loads / blank page: Re‑export with Verge3D glTF and ensure you overwrote the correct file in the correct folder.
• Pink / gray materials: Textures not linked or unsupported nodes. We’ll convert/bake or relink next session.
• Scale/rotation odd: Apply transforms (Ctrl+A) before export.
• Wrong file paths: Keep textures inside the app folder with relative paths.
• Multiple scenes: Ensure the camera and main objects are in the active scene being exported.

---

9) What’s Next (Session 3 Preview)

• Relink textures and verify material compatibility for Verge3D.
• Add basic lighting (HDRI + 1–2 area lights) suitable for mobile.
• First interactions in Puzzles (material switchers, animation trigger).