2.4 KiB

Task: Basic Rotation / Motion

Objective

Create simple motion on an object (cube), such as constant rotation, and compare implementation across Vanilla three.js, R3F, and thob page builder.

Vanilla three.js

  • Possible: Yes
  • Notes: Implemented a simple cube and animated it in the render loop using renderer.setAnimationLoop(animate). Rotation is updated every frame on X and Y axes.
  • Key concepts: Render loop, frame-time based motion, direct mesh.rotation updates.
  • Complexity: Easy

R3F

  • Possible: Yes
  • Notes: Implemented the same rotating cube using useFrame, with per-frame rotation updates matching the Vanilla behavior.
  • What R3F abstracted: Scene/render setup and loop integration are simplified with Canvas and useFrame, reducing boilerplate.
  • Complexity: Easy

Thob Page Builder

  • Possible: Partial
  • Notes: Basic motion can be added through built-in presets, but custom animation logic cannot be authored.
  • Custom animation is not possible; only the pre-provided animation can be applied.
  • Builder steps:
    • Add cube/object in scene.
    • Select available animation preset from builder controls.
    • Adjust preset options (like speed).
  • Complexity: Easy

Comparison Summary

  • Possible in all 3? Partial
  • Main differences:
    • Vanilla and R3F support fully custom per-frame animation logic.
    • Thob supports only preset animation options.
  • Where Thob is better: Fast setup for non-technical users with ready-made motion presets.
  • Where Thob is weaker: No custom animation authoring for specific motion behavior.
  • What feels awkward or unclear: Limited control when required motion does not match a preset.

Limitation Type (if any)

  • Editor UX limitation
  • Runtime limitation
  • Schema / data model limitation
  • Component limitation
  • Event system limitation
  • Asset pipeline limitation
  • Unknown / needs investigation

Workaround

  • Is there a workaround?
    • Partial
  • If yes, what is it?
    • Use the closest pre-provided animation preset and tune available settings.

Suggested Improvement

  • What should improve in Thob?
    • Allow combining preset animation with user-defined motion parameters.
  • it is:
    • editor
    • runtime
    • component
    • UX

Difficulty Estimate

  • Hard

Business Value

  • High

Recommendation

Should Thob support this better? Why?

  • Yes. Motion is core to interactive 3D scenes, and lack of custom animation blocks many use cases beyond simple showcase interactions.