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
- Switch
to Front View (Numpad 1) and enable Wireframe View.
- Make
sure the 3D Cursor is set to the World Origin (Shift + S →
Cursor to World Origin).
2) Create the First Slab (Slab_1)
- Press
Shift + A → Mesh → Cube.
- Switch
to Shaded View.
- Scale
the cube:
- X:
~0.1
- Y:
~0.3
- Z:
~0.01 (thin flat slab)
- Move
it slightly above the ground plane using G → Z.
- Rotate
slightly with the Rotate Tool to make it look naturally placed.
- Rename
the object to Slab_1.
- Assign
an existing wood material (M_Wood_01) to this slab in the Material
Properties panel.
- Preview
the placement in Camera View (Numpad 0) and make minor
adjustments if needed.
3) Duplicate to Create Slab_2
- Select
Slab_1, press Shift + D to duplicate, then Right-Click
to confirm.
- Rename
the new object to Slab_2.
- Move
Slab_2 to a slightly different position using G → X/Y/Z.
- Ensure
it appears above the floor plane; adjust height and rotation slightly for
realism.
- In Material
Properties, click the number next to the existing material to
create a new unique copy.
- Rename
the duplicated material to M_Wood_02.
- Open
Shading, replace the texture with wood_base_color_2.jpg.
4) Duplicate to Create Slab_3
- Select
Slab_2, press Shift + D to duplicate.
- Rename
the new object to Slab_3.
- Position
Slab_3 using G → X/Y/Z so that it is stacked slightly
differently.
- In Material
Properties, click the number again to make the material unique.
- Rename
it M_Wood_03.
- In Shading,
replace the texture with wood_base_color_3.jpg.
5) Fine-Tune Placement
- Use Rotate
Tool to tilt the slabs randomly for a natural look.
- Check
Front View and Top View to ensure no overlaps and that all
slabs sit naturally on the ground plane.
- In Camera
View (Numpad 0), verify visibility of all three slabs.
6) Save and Preview
- File
→ Save the project.
- Click
Sneak Peek to open in the browser.
- 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
- Press
1 (Numpad) for Front View; toggle Wireframe if
helpful.
- Shift+S
→ Cursor to World Origin.
- Shift+A
→ Mesh → Cube (a large cube appears at origin).
- In Item
→ Scale, set approximate slab size:
- X
= 0.10
- Y
= 0.30–0.40 (your preference)
- Z
= 0.01 (thin)
- G,
Z to rest it on the floor if needed (Z ≈ 0 contact). Slightly rotate
with R to look casual.
- Rename
in Outliner: Cube → Slab_01.
Tip: Use Solid view to judge thickness and camera
visibility.
2) Assign Wood Material 01
- With
Slab_01 selected, open Material Properties.
- Choose
existing M_Wood_01 (from Session 4) to reuse the node setup (Image
Texture + Mapping).
- 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
- Shift+D
to duplicate Slab_01 → position it nearby (use G X/Y/Z to
place; stack or lean as desired).
- Rename
to Slab_02.
- In Material
Properties, click the user count number next to M_Wood_01 to
make a single‑user copy.
- Rename
the copied material to M_Wood_02.
- In Shader
Editor (Object), on the Image Texture node, click Open
and select wood_base_color_2.jpg.
- Adjust
Mapping Scale if needed so grain density matches your taste.
4) Duplicate for Slab 03 and Make a New Material
- Shift+D
to duplicate Slab_02 → place as a third swatch.
- Rename
to Slab_03.
- In Material
Properties, click the user count number again to make a single‑user
copy.
- Rename
the new material to M_Wood_03.
- On
the Image Texture node, Open wood_base_color_3.jpg.
- 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
- Press
Numpad 0 (Camera View); make sure the slabs are clearly visible and
not intersecting the table.
- Minor
tweaks: G Z to lift a slab resting on another, R for slight
tilt, G X/Y to nudge.
- File
→ Save.
6) Preview in Browser
- Click
Sneak Peek.
- 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.
No comments:
Post a Comment