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
- Open
the Outliner.
- 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)
- Select
the Drawer object in the viewport.
- Move
the Timeline to Frame 1.
- Press
I → select Location to insert a keyframe for the current
position.
3) Move Drawer to Open Position (Frame 30)
- Move
the timeline slider to Frame 30.
- Select
the Drawer.
- Activate
the Move Tool (G key or toolbar icon).
- Move
the drawer along Y-axis ≈ −0.4 units to slide it out.
- Press
I → choose Location to insert another keyframe.
4) Preview Animation in Blender
- Rewind
the timeline to Frame 1.
- Press
the Play button or spacebar.
- Confirm
that the drawer smoothly slides out over 30 frames.
5) Save and Preview in Verge3D
- Save
the file (File → Save).
- Click
Sneak Peek to test.
- You’ll
see the animation looping automatically.
6) Disable Auto-Start
- Go
to Object Properties for the Drawer.
- Scroll
to Verge3D Settings → Animation.
- Toggle
Auto Start OFF.
- Save
the file again.
- 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)
- 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)
- Keep
names short, descriptive, and unique. This helps when wiring interactions
later.
2) Animate the Drawer (slide out)
- Select
Drawer.
- Make
sure the Timeline is visible and set to Frame 1.
- Press
I → choose Location to insert the first keyframe (initial
closed position).
- Go
to Frame 30 (or your preferred frame for speed).
- With
the Move tool, slide the drawer out along Y (about −0.4
units). Keep X and Z unchanged.
- Press
I → Location to insert the second keyframe.
- 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.
- Stay
on Drawer → open Object Properties.
- Scroll
to Verge3D Settings → Animation.
- Disable
Auto Start.
- File
→ Save.
4) Test in Browser (Sneak Peek)
- Click
Sneak Peek. The scene should load without the drawer
animation playing automatically.
- 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.
No comments:
Post a Comment