Friday, August 29, 2025

01 Interactive 3D using Blender and verge 3D


Overview

Build a fully interactive, web‑based 3D product viewer (an Interactive Table) using Blender + Verge3D — no hand‑coding required. You’ll model (or import) a table, set up materials, add interactions (click to switch materials, buttons to animate parts, optional sounds), and publish it to the web so it works on desktop and mobile. Optional: enable VR (WebXR) for students with headsets.

0) What You’ll Deliver

  • A working web app that loads in a browser, showing a 3D table.
  • Interactions:
    • Click the tabletop to cycle wood finishes.
    • Click the metal frame to cycle metal/paint finishes.
    • Click a button to play an animation (e.g., raise/lower tabletop).
  • Optional: UI buttons for color presets, a light toggle, and a simple sound.
  • Packaged ZIP (or public link) for submission.

1) Prerequisites

  • Blender (3.3+ recommended).
  • Verge3D for Blender (Windows/macOS).
  • A modern browser (Chrome/Edge/Firefox mobile/desktop).
  • GPU with updated drivers (integrated is okay for basic scenes).

Tip: Keep all project files inside one folder with short, ASCII‑only names.

2) Install & Enable Verge3D

  1. Download Verge3D → soft8soft.com → Get Verge3D → Blender → Windows/macOS.
  2. Install with default options. On Windows it goes to C:\Program Files\Verge3D for Blender.
  3. Launch Blender → Edit → Preferences → Add‑ons.
  4. Search “Verge” → enable Verge3D.
  5. You should now see two buttons in Blender’s top bar: Sneak Peek and App Manager.

Sanity check: Click Sneak Peek on the default cube. A browser tab should open and show the cube. If it does, you’re good.

3) Create Your Verge3D App

  1. In Blender, click App Manager. A browser tool opens.
  2. First run: choose a location for your apps (keep the default Documents/Verge3D‑apps path) and Apply.
  3. Click Create New App.
    • Name: interactive-table
    • Template: Standard (leave Physics off for now)
    • Create App → OK
  4. Your app folder is created under the chosen path, with index.html, visual_logic.xml (Puzzles), and an applications/interactive-table structure.

4) Model (or Import) the Table in Blender

You can block out a clean, low‑poly table or import an existing model.

Geometry & Transforms

  • Name objects clearly: Table_Top, Table_Frame, Table_Leg_FL, etc.
  • Apply transforms (Ctrl+A → Rotation & Scale) after modeling.
  • Set origins sensibly (e.g., tabletop origin at hinge for lift animation).
  • Parent parts to a master empty Table_ROOT to keep hierarchy tidy.

UVs & Materials

  • Unwrap meshes (simple seams/Smart UV). Pack UVs logically.
  • Create at least 3 materials:
    • M_Wood_Dark (Principled BSDF; base color texture or color value)
    • M_Wood_Light
    • M_Steel_Black
  • Keep node graphs EeVee‑friendly and Verge3D‑compatible (avoid exotic nodes; stick to Image Texture → Principled BSDF → Material Output). Use 1–2k textures initially.

Lighting & Camera

  • Add an HDRI (World → Color → Environment Texture) or a few Area Lights.
  • Create a camera named Cam_Main. Frame your product.

Save the .blend inside your app folder (e.g., .../interactive-table/blender/interactive-table.blend).

5) First Preview with Verge3D

  1. In Blender, click Sneak Peek. Your table should appear in the browser.
  2. If something is pink/missing:
    • Check textures are saved and paths are relative.
    • Avoid non‑supported nodes/modifiers (apply where needed).

6) Create an Animation in Blender (for the “lift” demo)

  1. Select Table_Top.
  2. At frame 1, insert keyframe for Location/Rotation (I).
  3. At frame 40, raise/rotate as desired → insert keyframe.
  4. Name the Action LiftTop (in the Dope Sheet → Action Editor).
  5. Optional: Push to NLA to ensure Verge3D finds it.
  6. Save.

Sneak Peek again — nothing plays yet; we’ll trigger it via Puzzles.

7) Add Interactivity with Puzzles (No Code)

Open App Manager → find interactive-table → click Puzzles. A visual editor opens.

7.1 Scene Ready Setup

Add these blocks (drag from the left palettes):

  • when scene is ready
    • set variable woodList → list of materials: M_Wood_Dark, M_Wood_Light
    • set variable steelList → list: M_Steel_Black (add more later)
    • set variable woodIndex → 0; set variable steelIndex → 0

7.2 Click to Cycle Wood on Tabletop

  • when object is clicked → object: Table_Top
    • set woodIndex → (woodIndex + 1) mod (length of woodList)
    • apply material item woodList[woodIndex] to object Table_Top

7.3 Click to Cycle Steel on Frame

  • when object is clicked → object: Table_Frame
    • set steelIndex → (steelIndex + 1) mod (length of steelList)
    • apply material item steelList[steelIndex] to object Table_Frame

7.4 Play/Pause Animation via a Button

We’ll add an on‑screen HTML button (or you can click a 3D object).

  • In Puzzles, open HTML palette → create HTML element with id btn-animate and inner text Animate (position it with CSS or default flow).
  • when HTML element is clicked btn-animate
    • play animation → object Table_Top, action LiftTop, once
    • Optional: if already played, reverse or stop animation to toggle.

Alternative: Use when object is clicked on a mesh named Button_Knob in 3D.

7.5 Optional: Light Toggle & Sound

  • Create a Point Light named Lamp_A.
  • when HTML element is clicked btn-light
    • toggle visibility of Lamp_A.
  • Import a short .ogg click sound into the app’s assets.
  • play sound on interactions for feedback.

Save Puzzles (Ctrl+S icon). Click Run in App Manager to test.

8) Optional: Color Swatch UI (HTML)

You can add simple color buttons to switch directly to specific materials.

  1. In App Manager → Open your app folder → edit index.html.
  2. Add a small toolbar:

<div id="ui" style="position:fixed;right:16px;top:16px;z-index:5;">

<button id="wood-dark">Wood: Dark</button>

<button id="wood-light">Wood: Light</button>

<button id="steel-black">Steel: Black</button>

<button id="btn-animate">Animate</button>

</div>

  1. In Puzzles → HTML palette, create listeners:
    • when HTML element is clicked wood-dark → apply material M_Wood_Dark to Table_Top
    • wood-light → apply M_Wood_Light
    • steel-black → apply M_Steel_Black to Table_Frame

Save and Run.

9) Performance & Quality Tips

  • Textures: start 1k–2k. Use power‑of‑two sizes. Bake heavy procedural materials.
  • Draw calls: merge small meshes by material where sensible.
  • Normals: ensure correct shading; mark sharp + auto‑smooth where needed.
  • Mobile: test on a phone; reduce lights/shadows if slow.
  • PBR: keep node graphs simple; avoid unsupported nodes.
  • Compression: if your Verge3D version supports it, consider KTX2 textures for size.

10) VR (WebXR) — Optional

  • In Puzzles → XR/AR palette, add enable VR on scene ready.
  • Verge3D will show a VR button on supported browsers/devices. Your scene should be usable with or without a headset (graceful fallback).

11) Package & Publish

Local Testing

  • From App Manager, click Run to serve locally. Use your LAN IP to test on mobile.

Zip Package

  • In App Manager, use the Package/Zip option for interactive-table (icon or menu). This creates a deployable archive with HTML, JS, and assets.

Hosting Options

  • GitHub Pages: create a repo, copy your app’s files, enable Pages (root). Share the URL.
  • Any static web host (Netlify, Vercel, college server, S3+CloudFront). Upload the same files.
  • Verge3D Network (Soft8Soft): quick sharing if your course allows external accounts.

12) QA Checklist (Mark as you test)

  •  

13) Troubleshooting

  • Blank page or errors: re‑Sneak Peek from Blender; check console (F12).
  • Pink materials: missing textures or unsupported nodes — simplify to Image → Principled.
  • Animation won’t play: confirm Action name (LiftTop), track in NLA, target object name matches Puzzles.
  • Clicks not detected: ensure you clicked the visible mesh (not a hidden child); disable Overlay → Select Through in Blender while testing selection.
  • Huge file size: downscale textures, remove unused images, merge small meshes.
  • Dark scene on mobile: tone down shadows; add subtle ambient light/HDRI.

14) Extensions (For Extra Credit)

  • Replace HTML buttons with 3D hotspots (billboard planes) and use the Annotations Puzzles.
  • Add variant presets (e.g., “Walnut + Black”, “Birch + White”) via lists and one‑click apply.
  • Add price calculator (simple JavaScript variables in Puzzles) and a screenshot button.
  • Add AR (WebXR) mode for phones that support it.

15) Submission Format

  • Submit either:
    • A public URL (GitHub Pages/Netlify/etc.), and
    • A ZIP export of the app folder (so we can re‑host if needed).
  • Include a short README with:
    • Material names used
    • Interaction summary
    • Known issues

Rubric (20 points)

  • Scene correctness & hierarchy (names, transforms) — 4
  • Materials & UVs (clean, compatible) — 4
  • Interactivity (wood/frame cycling) — 6
  • Animation trigger (LiftTop) — 3
  • Packaging & publish (runs in browser) — 3

Good luck! Keep it light, modular, and mobile‑friendly. If you’re comfortable, push yourself with presets, hotspots, and a small price calculator to simulate real product configuration flows.

 


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)