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
- In
the Shader Editor, ensure the Principled BSDF node is connected to
the Material Output.
- Click
Base Color → choose Image Texture.
- Click
Open and load wood_base_color_1.jpeg from your resources.
- Switch
to UV Editing workspace to check or adjust UV mapping.
- 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
- Select
the stand or metallic parts.
- Click
New and name it chrome.
- Set
Metallic to 1 and Roughness to around 0.1 for a reflective
chrome effect.
6) Set Up Environment Texture for Reflections
- Switch
to World mode in the Shader Editor.
- Click
Use Nodes if not already enabled.
- Add
an Environment Texture (Shift+A → Texture → Environment Texture).
- Connect
the Environment Texture to the Background node’s Color
input.
- Click
Open and select environment.hdr from your resources.
- 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
- If
you previously used Lock Camera to View, go to View → Lock
Camera to View and disable it so the camera stays fixed.
- Switch
the top workspace to Shading (Object mode).
2) Wood Material on the Table/Drawer
- Select
the table mesh (e.g., Cube).
- In
Material Properties, click New → name it M_Wood_01.
- In
Shader Editor (Object): ensure Principled BSDF → Material Output
exists.
- Add
→ Texture → Image Texture. Connect Image Texture → Color to Principled
BSDF → Base Color.
- Click
Open on the Image Texture and choose wood_base_color_1.jpg
(the provided file).
- 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).
- 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
- Select
the stand/metal parts (e.g., Frame, Cube.001).
- Create
a new material M_Chrome.
- In Principled
BSDF set Metallic = 1.0 and Roughness ≈ 0.10 (adjust
0.05–0.20 for different polish levels).
- Assign
M_Chrome to all metal pieces (stand + base holder) for consistency.
4) World Environment (HDRI) for Real Reflections
- In Shader
Editor, switch from Object to World.
- Enable
Use Nodes (if off). You should see Background → World Output.
- Add
→ Texture → Environment Texture. Connect Environment Texture →
Color to Background → Color.
- Click
Open and choose environment.hdr (provided).
- 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
- Use
Render Preview in Blender to check materials.
- 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
- File
→ Save.
- File
→ Export → Verge3D glTF and overwrite your app’s scene file in
interactive-table/.
- 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.
No comments:
Post a Comment