Saturday, August 30, 2025

09 interactively change materials using puzzles


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

This session guides students through creating three wood material swatches in the scene for interactive selection. It covers modeling and scaling small slabs, duplicating them, applying unique wood materials with different textures, and arranging them in camera view for easy access during future interactive material switching.

 

Session 09A — Metal Material Spheres for Interaction

Goal: Create three small metal material spheres to act as interactive swatches for changing the metal stand’s material in the browser.

1) Add the First Metal Sphere (Chrome)

  1. Front View (Numpad 1) → Wireframe View for positioning.
  2. Shift+A → Mesh → UV Sphere.
  3. Scale down uniformly:
    • X = 0.05, Y = 0.05, Z = 0.05.
  4. Switch to Top View and press G to move and place the sphere neatly on the floor in a visible spot.
  5. Camera View (Numpad 0) → Shaded View → right-click the sphere → Shade Smooth.
  6. Rename in Outliner: Sphere → Sphere_Chrome.
  7. In Material Properties, assign the existing Chrome material (M_Chrome) created earlier.

2) Duplicate for Black Painted Sphere

  1. Select Sphere_Chrome.
  2. Shift+D to duplicate → move the copy along Y/X axes to a new location.
  3. Rename duplicate to Sphere_Black.
  4. In Material Properties, note that M_Chrome is shared — click the user count number to create a single-user copy.
  5. Rename new material: Paint_Black.
  6. Go to Shading:
    • Change Base Color → black.
    • Set Metallic = 0.1.
    • Set Roughness ≈ 0.2 (less reflective, more like painted metal).
  7. Preview in Shaded View — sphere should look black with slight roughness.

3) Duplicate for White Painted Sphere

  1. From Sphere_Black, Shift+D to duplicate → position it near the others.
  2. Rename duplicate to Sphere_White.
  3. In Material Properties, click the user count number to create a single-user copy.
  4. Rename new material: Paint_White.
  5. In Shading:
    • Change Base Color → white.
    • Keep Metallic = 0.1 and Roughness ≈ 0.2.
  6. Preview in Shaded View — sphere should appear white with slight paint finish.

4) Final Check and Save

  1. Press Numpad 0 (Camera View) to ensure all three spheres — chrome, black, and white — are visible in the shot.
  2. Adjust positions if necessary using G and R for slight tweaks.
  3. File → Save the Blender project.
  4. Click Sneak Peek to preview — confirm all three material spheres are visible with distinct finishes.

Troubleshooting

  • Spheres too large/small: Adjust Scale values to 0.03–0.06 until proportions look right.
  • Material didn’t duplicate: Ensure you click the user count number in Material Properties before editing to avoid overwriting existing materials.
  • Not smooth: Right-click → Shade Smooth on each sphere.
  • Not visible in camera: Move spheres into view or adjust the camera framing (see Session 3).

Mini‑Checklist

  •  

 

Session 8 — Metal Swatch Spheres (Chrome, Black Paint, White Paint)

Goal: Create three small metal preset spheres (Chrome / Paint‑Black / Paint‑White) the user can click later to change the stand’s material.

1) Add and Place the First Sphere (Chrome)

  1. Numpad 1 for Front View; enable Wireframe if helpful.
  2. Shift+S → Cursor to World Origin.
  3. Shift+A → Mesh → UV Sphere.
  4. In Item → Scale, set X = 0.05, Y = 0.05, Z = 0.05 (small swatch size).
  5. Right‑click → Shade Smooth.
  6. Use G (move) in Top View to position the sphere where it’s visible to the camera (near your wood slabs, but not obstructing the table).
  7. Rename in Outliner: Sphere_Chrome.
  8. In Material Properties, assign existing M_Chrome (from Session 4: Metallic=1, Roughness≈0.1).

2) Duplicate for Paint‑Black

  1. Select Sphere_Chrome → Shift+D to duplicate → reposition slightly.
  2. Rename to Sphere_Black.
  3. In Material Properties, click the user count number next to M_Chrome to make a single‑user copy and rename it M_Paint_Black.
  4. Open Shader Editor (Object):
    • Base Color: set to Black.
    • Metallic: 0.0–0.1 (paint, not metal).
    • Roughness: ≈ 0.2 (adjust 0.2–0.4 for sheen level).

3) Duplicate for Paint‑White

  1. Select Sphere_Black → Shift+D → reposition for a neat row/triangle.
  2. Rename to Sphere_White.
  3. In Material Properties, click the user count number to make a single‑user copy again; rename to M_Paint_White.
  4. In Shader Editor (Object):
    • Base Color: White.
    • Metallic: 0.0–0.1.
    • Roughness: ≈ 0.2–0.3.

Tip: If the spheres look faceted, add a Subdivision Surface modifier (levels 1–2) for smoother swatches.

4) Camera Check & Save

  1. Numpad 0 (Camera View) to ensure all three spheres are visible and well‑spaced.
  2. File → Save.

5) Preview in Browser

  1. Click Sneak Peek.
  2. Confirm you see Chrome, Paint‑Black, and Paint‑White spheres with distinct looks.

Troubleshooting

  • Changing one sphere changes others: You didn’t create a single‑user material copy. Click the user count number beside the material before edits.
  • Too glossy/matte: Adjust Roughness (lower = shinier). For paint, keep Metallic near 0.
  • Spheres hard to see: Increase scale slightly (e.g., 0.06–0.08) or move them closer to the camera.

Mini‑Checklist

  •  

Next: Wire wood slabs and metal spheres to click events (Puzzles) to live‑swap materials on the table and stand.

 

Session 09B — Adding Interactivity with Puzzles (Material Switching)

Goal: Use Verge3D Puzzles to make the scene interactive — clicking on the metal swatch spheres changes the metal stand material, and clicking on the wood slabs changes the wood texture on the table body and drawer.

1) Prepare and Export the Scene

  1. In Blender, Save the current file.
  2. File → Export → Verge3D glTF (.gltf) → overwrite your app’s file.
  3. Open App Manager, find your interactive-table app, and click Edit Puzzles.

2) Create Metal Material Interactivity

  1. In the Puzzles editor, go to Events and drag a when clicked block.
  2. From the object list, choose Sphere_Black.
  3. From Materials, drag assign material and connect it under the event block.
  4. Set Material = M_Paint_Black, Object = Metal_Stack.
  5. Click Save, then Play to preview.
  6. Duplicate this block for the Sphere_Chrome and Sphere_White:
    • Sphere_Chrome → assign M_Chrome to Metal_Stack.
    • Sphere_White → assign M_Paint_White to Metal_Stack.
  7. Save and test again. Click each sphere in Sneak Peek to confirm materials change as expected.

3) Prepare Unique Material Names for Wood

  1. In Blender, ensure unique material names for each wooden surface:
    • Table main body → Wood_Material_00
    • Drawer → Wood_Material_00
    • Slab 1 → Wood_Material_01
    • Slab 2 → Wood_Material_02
    • Slab 3 → Wood_Material_03
  2. Save and Export again with Verge3D glTF.

4) Add Wood Texture Switching Logic

  1. In Puzzles, duplicate an existing metal interaction puzzle.
  2. Change the when clicked object to Slab_1.
  3. Remove the assign material block.
  4. From Materials, drag replace texture and connect it.
  5. Select Wood_Material_00 as the target material.
  6. In the texture path, paste the exact texture filename (e.g., wood_base_color_1.jpg).
  7. Save, Play, and test.

5) Add Logic for Other Slabs

  1. Duplicate the block for Slab_2:
    • Use Wood_Material_00 again as the target.
    • Replace texture with wood_base_color_2.jpg.
  2. Duplicate for Slab_3:
    • Replace texture with wood_base_color_3.jpg.
  3. Save and Play to test.

6) Debug and Fix Issues

  • If all objects change color simultaneously, verify unique materials are assigned in Blender.
  • Use single-user copies for each material to separate them.
  • Export again after every fix, then refresh the Puzzles editor.

7) Final Preview

  1. Save the puzzle project.
  2. Run the preview from App Manager.
  3. Click the metal spheres and wood slabs — materials should switch accurately without affecting other objects.

Troubleshooting

  • Material not switching: Double-check material names and texture paths.
  • Changes not saving: Ensure you click Save in the puzzle editor before testing.
  • Wrong textures: Ensure the texture files are correctly named and located in the app folder.

Mini‑Checklist

  •  

 

Session 9 — Interactivity with Puzzles: Metal Stand & Wood Swaps

Goal: Use Verge3D Puzzles to switch the metal stand’s finish (Chrome / Paint‑Black / Paint‑White) by clicking the metal spheres, and change the table/cupboard wood by clicking the wood slabs (three presets). No JavaScript coding required.

0) Prep: Export Before Opening Puzzles

  1. In Blender, File → Save.
  2. File → Export → Verge3D glTF → overwrite your app scene file inside the interactive-table/ folder.
  3. Open App Manager → your app → Puzzles. (Exporting ensures Puzzles “sees” your latest objects and materials.)

Naming sanity:

  • Objects (Session 6): Table_Main, Support_Bush, Metal_Stack, Drawer.
  • Wood materials:
    • Table & Drawer share M_Wood_00 (this is the one we will replace textures in).
    • Swatches: M_Wood_01, M_Wood_02, M_Wood_03 (single‑user copies).
  • Metal materials:
    • M_Chrome, M_Paint_Black, M_Paint_White.
  • Swatch objects: Slab_01/02/03, Sphere_Chrome/Sphere_Black/Sphere_White.

1) Metal Stand Switching (Assign Material)

We’ll apply materials directly to the Metal_Stack object when a sphere is clicked.

  1. In Puzzles, open Events palette → drag when object clicked.
  2. Click the object dropdown → choose Sphere_Black.
  3. From Materials palette → drag assign material and snap it under the event.
  4. Set material to M_Paint_Black and object to Metal_Stack.
  5. Save (disk icon) → Play (triangle). In the preview, click the black sphere → the stand becomes black paint.
  6. Duplicate the whole event block twice:
    • For Sphere_Chrome → assign material M_Chrome to Metal_Stack.
    • For Sphere_White → assign material M_Paint_White to Metal_Stack.
  7. Save → Play → test all three.

Tip: If your stand is named differently (e.g., Metal_Stack vs Table_Frame), pick the exact name from the dropdown.

2) Wood Switching (Replace Texture in a Material)

We want the table body + drawer to reuse a single material (M_Wood_00) and only swap its Base Color texture when clicking each slab.

A) Ensure unique materials are set in Blender

  • Table_Main and Drawer → M_Wood_00.
  • Slab_01 → M_Wood_01, Slab_02 → M_Wood_02, **Slab_03** → M_Wood_03(each a **single‑user copy** so they won’t change when we swapM_Wood_00`).
  • In M_Wood_00’s Image Texture node, make the image name simple (e.g., wood instead of wood_base_color_1.jpg).
  • Save and Export Verge3D glTF again before opening Puzzles.

B) Build the Puzzles

  1. In Puzzles, add when object clicked → choose Slab_01.
  2. From Materials, drag replace texture and attach under the event.
  3. Configure replace texture:
    • material: M_Wood_00
    • texture: wood (the Image Texture node name used inside M_Wood_00)
    • with: wood_base_color_1.jpg (enter relative filename from app folder; use the exact name)
  4. Duplicate this event twice:
    • Slab_02 → replace with: wood_base_color_2.jpg
    • Slab_03 → replace with: wood_base_color_3.jpg
  5. Save → Play → click each slab and verify the table’s wood updates.

Paths: Keep all wood textures inside the app folder (or a textures/ subfolder). Use relative paths like textures/wood_base_color_2.jpg if you made a subfolder.

3) Test the Full Flow

  • In the preview: click black/chrome/white spheres → stand updates.
  • Click wood slabs 1/2/3 → table & drawer update without affecting the swatches.

4) Save, Export, Run (Final)

  1. Back in Blender (if you changed anything), Save → Export Verge3D glTF.
  2. In App Manager, click Run (the Verge3D icon) to open the app in a browser and test outside the Puzzles preview.

Troubleshooting

  • Swatches change too: You edited a shared wood material. Make sure swatches use M_Wood_01/02/03 (single‑user copies) and the table uses M_Wood_00 only.
  • Replace texture does nothing: In the puzzle, the material must be the table’s M_Wood_00, and the texture name must match the Image Texture node’s name (e.g., wood). Also confirm the file path/filename is correct and inside your app folder.
  • Objects/materials missing in dropdowns: You didn’t Export Verge3D glTF after renaming/adding things in Blender. Save → Export → reopen Puzzles.
  • Metal stand doesn’t change: Double‑check the stand object name (e.g., Metal_Stack) and that M_Chrome / M_Paint_* exist.

Mini‑Checklist

  •  

Next: Hook the Drawer animation to a click target (3D hotspot or slab/button) using Puzzles → play animation and add optional UI buttons for presets.

 


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)