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.

 

07 slab materials

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

This session teaches students how to organize their Blender project by renaming objects for clarity and creating a simple keyframe animation for the table drawer. It covers inserting location keyframes to animate the drawer sliding out and disabling the auto-play option in Verge3D so the animation only triggers during interactive events in the next session.

 

Session 7 — Creating Interactive Slabs for Material Switching

Goal: Add three slabs in the scene that will be used to switch the table’s material when clicked in the browser. Each slab will have a unique wood texture applied and be positioned neatly in the scene.

---

1) Prepare Workspace

1. Switch to Front View (Numpad 1) and enable Wireframe View.
2. Make sure the 3D Cursor is set to the World Origin (Shift + S → Cursor to World Origin).

---

2) Create the First Slab (Slab_1)

1. Press Shift + A → Mesh → Cube.
2. Switch to Shaded View.
3. Scale the cube:
• X: ~0.1
• Y: ~0.3
• Z: ~0.01 (thin flat slab)
4. Move it slightly above the ground plane using G → Z.
5. Rotate slightly with the Rotate Tool to make it look naturally placed.
6. Rename the object to Slab_1.
7. Assign an existing wood material (M_Wood_01) to this slab in the Material Properties panel.
8. Preview the placement in Camera View (Numpad 0) and make minor adjustments if needed.

---

3) Duplicate to Create Slab_2

1. Select Slab_1, press Shift + D to duplicate, then Right-Click to confirm.
2. Rename the new object to Slab_2.
3. Move Slab_2 to a slightly different position using G → X/Y/Z.
4. Ensure it appears above the floor plane; adjust height and rotation slightly for realism.
5. In Material Properties, click the number next to the existing material to create a new unique copy.
6. Rename the duplicated material to M_Wood_02.
7. Open Shading, replace the texture with wood_base_color_2.jpg.

---

4) Duplicate to Create Slab_3

1. Select Slab_2, press Shift + D to duplicate.
2. Rename the new object to Slab_3.
3. Position Slab_3 using G → X/Y/Z so that it is stacked slightly differently.
4. In Material Properties, click the number again to make the material unique.
5. Rename it M_Wood_03.
6. In Shading, replace the texture with wood_base_color_3.jpg.

---

5) Fine-Tune Placement

1. Use Rotate Tool to tilt the slabs randomly for a natural look.
2. Check Front View and Top View to ensure no overlaps and that all slabs sit naturally on the ground plane.
3. In Camera View (Numpad 0), verify visibility of all three slabs.

---

6) Save and Preview

1. File → Save the project.
2. Click Sneak Peek to open in the browser.
3. Confirm all three slabs are visible and assigned different wood textures.

---

Troubleshooting

• Slabs too large/small: Adjust X/Y/Z scale values.
• Floating slabs: Use G → Z to align with ground.
• Textures not updating: Ensure you duplicated the material and replaced the texture correctly.
• Poor visibility in preview: Adjust positions to ensure all slabs are within the camera view.

---

Mini-Checklist

•  

 

Session 7 — Material Swatch Slabs (Wood Presets for Table/Cupboard)

Goal: Create three visible swatch slabs in the scene, each with a distinct wood material (M_Wood_01/02/03). These will serve as clickable presets later to swap the table’s material in-browser.

---

1) Create the First Slab at World Origin

1. Press 1 (Numpad) for Front View; toggle Wireframe if helpful.
2. Shift+S → Cursor to World Origin.
3. Shift+A → Mesh → Cube (a large cube appears at origin).
4. In Item → Scale, set approximate slab size:
• X = 0.10
• Y = 0.30–0.40 (your preference)
• Z = 0.01 (thin)
5. G, Z to rest it on the floor if needed (Z ≈ 0 contact). Slightly rotate with R to look casual.
6. Rename in Outliner: Cube → Slab_01.

Tip: Use Solid view to judge thickness and camera visibility.

---

2) Assign Wood Material 01

1. With Slab_01 selected, open Material Properties.
2. Choose existing M_Wood_01 (from Session 4) to reuse the node setup (Image Texture + Mapping).
3. If scale looks off, tweak Mapping → Scale X/Y on the material (affects all users of M_Wood_01). Alternatively make a single‑user copy first (see next step) if you want unique scaling per slab.

---

3) Duplicate for Slab 02 and Make a New Material

1. Shift+D to duplicate Slab_01 → position it nearby (use G X/Y/Z to place; stack or lean as desired).
2. Rename to Slab_02.
3. In Material Properties, click the user count number next to M_Wood_01 to make a single‑user copy.
4. Rename the copied material to M_Wood_02.
5. In Shader Editor (Object), on the Image Texture node, click Open and select wood_base_color_2.jpg.
6. Adjust Mapping Scale if needed so grain density matches your taste.

---

4) Duplicate for Slab 03 and Make a New Material

1. Shift+D to duplicate Slab_02 → place as a third swatch.
2. Rename to Slab_03.
3. In Material Properties, click the user count number again to make a single‑user copy.
4. Rename the new material to M_Wood_03.
5. On the Image Texture node, Open wood_base_color_3.jpg.
6. Adjust Mapping Scale if needed.

Composition tip: Arrange slabs so all three are visible from the Camera View (Numpad 0). Use G/R to create a natural, slightly offset layout.

---

5) Final Placement & Camera Check

1. Press Numpad 0 (Camera View); make sure the slabs are clearly visible and not intersecting the table.
2. Minor tweaks: G Z to lift a slab resting on another, R for slight tilt, G X/Y to nudge.
3. File → Save.

---

6) Preview in Browser

1. Click Sneak Peek.
2. Verify that all three slabs display three distinct wood looks.

---

Troubleshooting

• All slabs change when you tweak Mapping: You’re still editing a shared material. Make a single‑user copy (click the user count) before changing mapping or textures.
• Textures look stretched: Revisit UV/Mapping (Session 4). Increase Mapping Scale or re‑unwrap.
• Slab not visible in camera: Reposition or adjust camera framing (Session 3) and Save.

---

Mini‑Checklist

•  

Next: Create three metal swatch slabs and wire both wood + metal swatches to click events in Puzzles to change the table’s materials on demand.

 

06 drawer animation

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

This session focuses on adding realistic ground shadows and a static background for the interactive table. Students learn to enable and fine-tune Verge3D shadows, adjust light and shadow settings for clarity, and create a static emission-based background while preserving ground shadows using a mask mix shader. The result is a clean, grounded look for the table in the browser preview.

 

Session 6 — Creating Drawer Animation

Goal: Animate the drawer so that it slides out smoothly, and prepare the animation to be triggered later with a click event.

---

1) Rename Objects for Clarity

1. Open the Outliner.
2. Rename objects for better organization:
• Cube → Table
• Cube.001 → Support_Bush
• Cube.002 → Metal_Stack
• Cube.003 → Drawer

Tip: Clear naming makes animation and scripting easier.

---

2) Set Initial Keyframe (Frame 1)

1. Select the Drawer object in the viewport.
2. Move the Timeline to Frame 1.
3. Press I → select Location to insert a keyframe for the current position.

---

3) Move Drawer to Open Position (Frame 30)

1. Move the timeline slider to Frame 30.
2. Select the Drawer.
3. Activate the Move Tool (G key or toolbar icon).
4. Move the drawer along Y-axis ≈ −0.4 units to slide it out.
5. Press I → choose Location to insert another keyframe.

---

4) Preview Animation in Blender

1. Rewind the timeline to Frame 1.
2. Press the Play button or spacebar.
3. Confirm that the drawer smoothly slides out over 30 frames.

---

5) Save and Preview in Verge3D

1. Save the file (File → Save).
2. Click Sneak Peek to test.
• You’ll see the animation looping automatically.

---

6) Disable Auto-Start

1. Go to Object Properties for the Drawer.
2. Scroll to Verge3D Settings → Animation.
3. Toggle Auto Start OFF.
4. Save the file again.
5. Click Sneak Peek to verify that the animation no longer plays until triggered.

---

7) Next Steps

In the next session, we’ll link this animation to a click event using Verge3D Puzzles, so the drawer only slides out when the user interacts with it.

---

Mini-Checklist

•  

 

Session 6 — Naming & Drawer Animation (Keyframes + Auto‑Start Off)

Goal: Clean up object names, animate the drawer to slide out, and ensure the animation doesn’t auto‑play. We’ll hook the click trigger with Puzzles in the next session.

---

1) Rename Objects Clearly (Outliner)

1. Open the Outliner. Double‑click each object name to rename:
• Cube → Table_Main (main body)
• Cube.001 → Support_Bush (bottom support)
• Cube.002 → Metal_Stack (steel frame/stack)
• Cube.003 → Drawer (the sliding drawer)
2. Keep names short, descriptive, and unique. This helps when wiring interactions later.

---

2) Animate the Drawer (slide out)

1. Select Drawer.
2. Make sure the Timeline is visible and set to Frame 1.
3. Press I → choose Location to insert the first keyframe (initial closed position).
4. Go to Frame 30 (or your preferred frame for speed).
5. With the Move tool, slide the drawer out along Y (about −0.4 units). Keep X and Z unchanged.
6. Press I → Location to insert the second keyframe.
7. Press Space (or the transport controls) to preview in Blender — the drawer should slide out from frame 1 to 30.

Tip: If it moves on the wrong axis, switch the transform orientation to Global and adjust Y only.

---

3) Prevent Auto‑Play in Verge3D

By default, actions may loop in the web preview. Disable auto‑start so we can trigger it on click later.

1. Stay on Drawer → open Object Properties.
2. Scroll to Verge3D Settings → Animation.
3. Disable Auto Start.
4. File → Save.

---

4) Test in Browser (Sneak Peek)

1. Click Sneak Peek. The scene should load without the drawer animation playing automatically.
2. The drawer won’t move yet in the browser — that’s expected. We’ll trigger it via Puzzles (click event) next session.

---

Troubleshooting

• Animation still plays on load: Recheck Verge3D Settings → Auto Start is off for the Drawer object.
• No motion: Confirm keyframes were added on Drawer (yellow diamond on the timeline at frames 1 and 30) and that Y changed (approx −0.4).
• Moves the wrong way/too far: Adjust the Y translation value (e.g., −0.2 to −0.6) and re‑keyframe.
• Too fast/slow: Change the second keyframe frame (e.g., frame 45 for slower, 20 for faster) or set timeline end accordingly.

 

05 shadows control background emissio control

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

This session focuses on adding realistic materials and environment lighting to the interactive table. Students learn to apply a wood texture using PBR and UV mapping, create a reflective chrome material for the stand, and set up an HDRI environment for realistic reflections. It concludes with a preview and export to verify that textures and lighting render correctly in the browser.

 

Session 5A — Shadow and Background Masking

Goal: Add a realistic ground shadow for the table and create a steady, non-moving background using masking with an emission shader.

---

1) Enable the Ground Sphere for Shadows

1. In Outliner, re-enable visibility (monitor icon) and render (camera icon) for the ground sphere.
2. Use Sneak Peek to preview — the table is grounded but shadow may look unclear.

---

2) Enable Shadows in Render Settings

1. Go to Render Properties → Verge3D Settings.
2. Enable Shadows option.
3. Preview with Sneak Peek — shadows are still weak but visible.

---

3) Configure the Light for Better Shadows

1. Select the lamp used in your scene.
2. In Light Properties → Shadows, make sure Shadows is enabled.
3. Open Cascaded Shadow Map settings:
• Change Max Distance to around 20 (from default 1000).
4. Adjust Intensity:
• Reduce Strength to 1 for softer lighting.
• Enable Contact Shadows and set:
• Bias ≈ 4
• Distance ≈ 0.4
5. Optionally increase Intensity slightly (~1.7) if needed.
6. Sneak Peek — shadows should look more natural.

---

4) Fix Background Movement (Static Background)

1. Switch to Shading Workspace.
2. Change from World mode to Object mode.
3. Select the sphere object.
4. In Material Properties, click New and name it Sphere_Material.
5. Delete the default Principled BSDF node.
6. Add → Shader → Emission node.
7. Connect Emission → Surface.
8. Reduce Emission Strength to 0.5.
9. Sneak Peek — background is now static, but shadows disappear.

---

5) Add a Mask for Shadows

1. In Shader Editor, Shift + A → Texture → Image Texture.
2. Click Open and select ground_mask.jpg (provided).
3. Add → Shader → Mix Shader.
4. Connect Image Texture → Fac (factor input) of the Mix Shader.
5. Connect Emission Shader to one shader slot of the Mix Shader.
6. Add → Shader → Principled BSDF (regular shader) and connect it to the other shader slot of the Mix Shader.
7. Connect the Mix Shader output → Material Output Surface.
8. Adjust node connections so:
• Emission shader = background.
• Principled BSDF = ground area under the table.
9. Sneak Peek — shadows are restored, with a clean static background.

---

6) Finalize & Export

1. Save the project (File → Save).
2. Export updated scene (File → Export → Verge3D glTF) and overwrite the existing app scene.
3. In App Manager, click Run to preview the updated app in the browser.

---

Troubleshooting

• No shadow: Check shadow toggle in Render Properties and Light Properties.
• Shadow too sharp or weak: Adjust Intensity, Bias, or Distance under light settings.
• Background moving: Ensure the sphere material uses Emission with strength reduced and proper masking applied.
• No shadow with static background: Ensure Mix Shader is wired correctly with Principled BSDF assigned to the ground area.

---

Mini-Checklist

•  

 

Session 5B — Ground, Shadows & Static Background

Goal: Make the table sit on a believable ground with crisp shadows, then replace the moving HDRI look with a static, clean background that still preserves shadows under the table.

---

1) Re‑enable the Environment Sphere (as a backdrop/ground)

1. In Outliner → Filter (funnel), show the monitor (Viewport) and camera (Render) toggles.
2. Turn ON both toggles for your environment sphere (e.g., Sphere_Env) so it’s visible in viewport and render again.
3. Sneak Peek to confirm the table no longer looks like it’s floating (it may still look odd—shadows aren’t tuned yet).

---

2) Enable Global Shadows (Verge3D)

1. Go to Render Properties → Verge3D Settings.
2. Enable Shadows (leave other defaults as-is for now).

---

3) Enable & Tune Shadows on the Sun Light

1. Select your Sun (or the project’s main light).
2. In Light Data (bulb), enable Shadow.
3. Open Cascaded Shadow Map (CSM) and set Max Distance ≈ 20 (down from very large defaults like 1000) to focus shadow detail near your product.
4. Reduce Strength/Energy of the Sun to ≈ 1.0 (then fine‑tune later; e.g., 1.7 if needed).
5. Toggle Contact Shadows ON and try:
• Bias ≈ 4.0
• Distance/Thickness ≈ 0.4
6. Sneak Peek → you should see a much clearer, grounded shadow.

Tip: If shadows still look soft or wrong, adjust Sun rotation and Angle (larger angle = softer shadows). Keep the subject near world origin.

---

4) Make the Background Static (Emission backdrop + shadow pass)

Problem: Orbiting with an HDRI/fake dome can feel like the background “moves.” Solution: Give the sphere a flat Emission material so it looks static, but preserve a shadow area beneath the table via a mask mix.

1. Switch Shader Editor to Object context and select the sphere.
2. New Material → name it M_Sphere_BG.
3. Delete the default Principled BSDF and Add → Shader → Emission. Connect Emission → Material Output (Surface).
4. Set Emission Strength ≈ 0.5 (adjust to taste). This makes a clean, static background—but it also kills shadows.
5. Re‑introduce ground shadows with a mask:
• Add → Texture → Image Texture, Open the provided ground_mask.png/.jpg (black‑to‑white gradient).
• Add → Shader → Mix Shader and connect it to the Output (Surface).
• Plug Emission into Shader 1 of the Mix.
• Add → Shader → Principled BSDF (default grey), plug it into Shader 2 of the Mix.
• Connect the mask’s Color to the Mix → Fac.
• Result: one shader for most of the sphere (Emission), and a different shader for the ground patch (Principled) that receives shadows.
• If the patch is inverted, either swap Emission/Principled inputs or insert Add → Color → Invert between mask and Fac.
6. Sneak Peek: background appears flat/static, and a ground patch under the table shows proper shadows.

Optional: UV/Mapping — If the mask isn’t positioned right, add Input → Texture Coordinate (Object/UV) and Vector → Mapping to scale/translate the mask until the shadow patch sits under the table.

---

5) Save, Export, Run

1. File → Save.
2. File → Export → Verge3D glTF, overwrite your app’s scene file in the interactive-table/ folder.
3. In App Manager, Run the app and verify in the browser.

---

Troubleshooting

• No shadows at all: Ensure Render Properties → Verge3D → Shadows is enabled and the Sun’s Shadow toggle is on.
• Shadows too faint/soft: Reduce CSM Max Distance (10–30), increase Sun Strength slightly, or adjust Contact Shadows (Bias/Distance). Check the ground patch is Principled, not Emission.
• Background still looks like it’s moving: Confirm the sphere with Emission is visible (viewport+render) and HDRI is still lighting the scene but visually blocked by the sphere. If HDRI shows through, your sphere may be hidden or not enclosing the camera.
• Mask in wrong place/scale: Use Mapping node to translate/scale the mask so the grounded area sits beneath the table.

 

04 adding textures

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

Session 4 — Adding Materials and Environment Setup

Goal: Apply wood and chrome materials to the interactive table, set up environment textures for realistic reflections, and adjust brightness for balanced previews.

---

1) Unlock Camera for Material Editing

• Go to View > Camera and disable "Lock to Camera View" to freely orbit the scene while adding materials.

---

2) Switch to Shading Workspace

• In Blender, switch to the Shading workspace.
• Select the object you want to texture.
• Click New to create a new material and rename it (e.g., wood_material_1).

---

3) Apply Wood Texture to Table Surfaces

1. In the Shader Editor, ensure the Principled BSDF node is connected to the Material Output.
2. Click Base Color → choose Image Texture.
3. Click Open and load wood_base_color_1.jpeg from your resources.
4. Switch to UV Editing workspace to check or adjust UV mapping.
5. For better control:
• Add a Mapping node (Shift+A → Vector → Mapping).
• Add a UV Map node (Shift+A → Input → UV Map) and connect it to the Mapping node.
• Connect the Mapping node to the Vector input of the Image Texture.
• Adjust Scale to X=5, Y=5, Z=1 to refine the texture scale.

---

4) Reuse Material for Other Objects

• For drawers or similar parts, select the object and choose the existing wood_material_1 from the material list to maintain consistency.

---

5) Add Chrome Material to the Stand

1. Select the stand or metallic parts.
2. Click New and name it chrome.
3. Set Metallic to 1 and Roughness to around 0.1 for a reflective chrome effect.

---

6) Set Up Environment Texture for Reflections

1. Switch to World mode in the Shader Editor.
2. Click Use Nodes if not already enabled.
3. Add an Environment Texture (Shift+A → Texture → Environment Texture).
4. Connect the Environment Texture to the Background node’s Color input.
5. Click Open and select environment.hdr from your resources.
6. This sets up a high dynamic range environment for realistic reflections.

---

7) Assign Chrome to Other Metallic Parts

• Select any additional metallic parts (e.g., holders labeled cube_001) and assign the chrome material.

---

8) Adjust Environment Brightness

• In World mode, reduce the Strength of the environment texture to around 0.6 for balanced lighting.

---

9) Preview in Browser

• Click Sneak Peek to check the updated materials and reflections.
• If too bright, further reduce environment strength or adjust the Sun light added earlier.

---

10) Save Your Work

• Save the Blender file to keep all material and environment changes.

---

Troubleshooting

• Texture not showing: Check UV mapping and image path.
• Reflections missing: Ensure HDR environment is loaded and connected correctly.
• Brightness too high: Lower environment strength or Sun strength.
• Chrome not reflective: Ensure Metallic is 1 and Roughness is low.

---

Mini-Checklist

•  

 

Session 4 — Materials & Environment (PBR, UVs, HDRI, Chrome)

Goal: Apply a wood texture with correct UV scaling, set up a reflective chrome frame using PBR settings, and add an HDRI environment so reflections appear in-browser.

---

1) Prep

1. If you previously used Lock Camera to View, go to View → Lock Camera to View and disable it so the camera stays fixed.
2. Switch the top workspace to Shading (Object mode).

---

2) Wood Material on the Table/Drawer

1. Select the table mesh (e.g., Cube).
2. In Material Properties, click New → name it M_Wood_01.
3. In Shader Editor (Object): ensure Principled BSDF → Material Output exists.
4. Add → Texture → Image Texture. Connect Image Texture → Color to Principled BSDF → Base Color.
5. Click Open on the Image Texture and choose wood_base_color_1.jpg (the provided file).
6. Add proper UV‑based scaling (node method):
• Add → Input → UV Map (select UVMap).
• Add → Vector → Mapping.
• Connect UV Map → Vector to Mapping → Vector, then Mapping → Vector to Image Texture → Vector.
• In Mapping set Scale X = 5, Y = 5, Z = 1 (tune to taste).

Optional: In the UV Editing workspace, ensure the mesh has a clean UV unwrap (Edit Mode → A → U). Keep transforms applied (Ctrl+A → Rotation & Scale).

7. Reuse the same wood on the drawer (e.g., Cube.003): select it → in Material slot choose M_Wood_01 (don’t create a new one).

---

3) Chrome Material on Stand/Holder

1. Select the stand/metal parts (e.g., Frame, Cube.001).
2. Create a new material M_Chrome.
3. In Principled BSDF set Metallic = 1.0 and Roughness ≈ 0.10 (adjust 0.05–0.20 for different polish levels).
4. Assign M_Chrome to all metal pieces (stand + base holder) for consistency.

---

4) World Environment (HDRI) for Real Reflections

1. In Shader Editor, switch from Object to World.
2. Enable Use Nodes (if off). You should see Background → World Output.
3. Add → Texture → Environment Texture. Connect Environment Texture → Color to Background → Color.
4. Click Open and choose environment.hdr (provided).
5. If the scene is too bright, lower Background → Strength to around 0.6 (tune later with the Sun light from Session 3).

Ensure any blocking environment sphere is hidden from Viewport and Render (see Session 3) so the HDRI actually lights and reflects.

---

5) Preview & Iterate

1. Use Render Preview in Blender to check materials.
2. Click Sneak Peek to view in the browser and orbit around. Confirm:
• Wood pattern density looks natural (adjust Mapping Scale if not).
• Chrome shows clear environment reflections (metallic = 1, roughness low, HDRI active).

---

6) Save, Export, Run

1. File → Save.
2. File → Export → Verge3D glTF and overwrite your app’s scene file in interactive-table/.
3. In App Manager, open your app and click Run to verify in the browser.

---

Troubleshooting

• Texture missing/pink: Ensure the image file is inside the app folder and the Image Texture node points to it; avoid unsupported nodes.
• Wood looks stretched/huge: Check UV unwrap; adjust Mapping Scale (e.g., 2–10) or re‑unwrap.
• Chrome looks dull: Confirm Metallic = 1.0, Roughness <= 0.2, HDRI connected, and the environment sphere is hidden.
• Too bright/too dark: Balance World Strength (0.3–1.5) and Sun Strength/rotation.

 

03 camera Lightings

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

A continuation of the Verge3D and Blender interactive table project. This session guides students through locating their app folder, replacing the default Blender file with a provided model, exporting the updated scene using the Verge3D glTF exporter, and running the app in a browser for initial testing. The setup prepares the project for adding textures, lighting, and interactivity in the next session.

Session 3 — Camera, Orbit Target & Lighting

Goal: Make the scene readable with a Sun light, set a clean default camera view, and define the orbit target so Sneak Peek/Web preview opens at the right angle.

---

1) Hide the Environment Sphere (so it doesn’t block light)

1. In the Outliner, click the funnel (Filter) icon and enable the monitor (Viewport) and camera (Render) toggles if they’re hidden.
2. Select your environment sphere (e.g., Sphere_Env).
3. Turn off the monitor and camera icons to hide it from the viewport and render.

Why: The sphere was blocking the default light, making the table look unlit.

---

2) Convert the Default Light to a Sun and Tune It

1. Select the light object (often named Light/Lamp).
2. In Object Data Properties (light bulb icon), change Type → Sun.
3. Adjust Rotation to aim the sunlight:
• Example values: X = 30°, Y = −20°, Z = 100° (tune as desired).
4. Set Strength/Energy (try 3–10; if still dim, try 15–30 for a punchier look).
5. Click Sneak Peek to preview in the browser; iterate rotation/strength until forms read well.

---

3) Set the Default Camera View (so Sneak Peek opens at your angle)

1. Press Numpad 0 to enter Camera View.
2. Choose one method to frame the shot:
• Method A (one‑shot): View → Align View → Align Active Camera to View (shortcut Ctrl+Alt+Numpad 0). Navigate in the viewport first, then run this.
• Method B (interactive): Press N to open the right panel → View tab → enable Lock Camera to View. Now navigate (MMB orbit, Shift+MMB pan, scroll zoom) to compose. Disable the lock when done.
3. Save your .blend (Ctrl+S).

---

4) Define the Orbit Target for Verge3D

Verge3D can use a target point/object to control where the orbit pivots in the browser.

1. Select the Camera.
2. In Camera Properties → Verge3D Settings, find Target:
• Option A: Pick Object (e.g., your table or a central helper empty).
• Option B: Set Coordinates manually. Example target: X = 0.0, Y = −0.2, Z = 0.3 (adjust to center your piece).
3. Save.
4. Sneak Peek again and ensure orbiting feels centered on the product.

---

5) Re‑Export & Run (Optional sanity pass)

1. File → Export → Verge3D glTF and overwrite your app scene file inside interactive-table/.
2. In App Manager, click your app → Run to confirm the new camera/lighting.

---

Troubleshooting

• Still dark? Increase Sun Strength, rotate Sun for better grazing light, or add a subtle Area Light. Consider an HDRI for soft ambient.
• Wrong starting angle in preview? Realign camera (Ctrl+Alt+Numpad 0) and Save before Sneak Peek.
• Orbit pivots oddly? Recheck the Verge3D Target (object or coordinates) on the camera.
• Harsh shadows/noise: Soften with larger light angle (Sun Angle) or add fill.