Thob Capability Mapping Sprint
A professional benchmarking repository designed to evaluate the current capabilities, strengths, and limitations of the Thob 3D Builder compared to industry-standard 3D web frameworks (Vanilla Three.js and React Three Fiber).
Project Overview
This sprint focuses on mapping 3D "Capabilities"—from simple visual changes to complex interactive states—across three primary implementation strategies:
- Vanilla Three.js: Imperative, pure-code implementation.
- React Three Fiber (R3F): Declarative, component-based implementation.
- Thob Page Builder: No-code/Visual 3D editor experience.
Project Structure
The repository is organized by "Weeks," with each week containing multiple task benchmarks.
/
├── Week-1/
│ ├── Task-1/ (Material Color Change)
│ │ ├── vanilla/ ← Imperative Three.js setup
│ │ ├── r3f/ ← Declarative React setup
│ │ ├── thob/ ← Builder Exploration Notes
│ │ └── report.md ← Comparative Capability Report
│ ├── Task-2/ (Texture Mapping)
│ │ ├── vanilla/ ← TextureLoader implementation
│ │ ├── r3f/ ← useLoader implementation
│ │ ├── thob/ ← Texture workflow observations
│ │ └── report.md ← Comparative Capability Report
│ ├── Task-3/ (Hover Interaction)
│ │ ├── vanilla/ ← Raycaster-based hover
│ │ ├── r3f/ ← onPointerOver/Out events
│ │ ├── thob/ ← Interaction engine gap notes
│ │ └── report.md ← Comparative Capability Report
│ ├── Task-4/ (Click Toggle State)
│ │ ├── vanilla/ ← Click-to-state raycasting
│ │ ├── r3f/ ← onClick state management
│ │ ├── thob/ ← Persistent state limitation notes
│ │ └── report.md ← Comparative Capability Report
│ ├── GeneralNotes.md ← Strategic Overview
│ └── Week-1-PersonalSummary.md ← Personal Narrative
└── README.md
Tech Stack
- Engine: Three.js
- Frontend: React (for R3F)
- Styling: CSS Modules / Vanilla CSS
- Build Tool: Vite
- Platform: Thob 3D Page Builder
Week 1 Milestone Summary
| Task | Capability | Vanilla | R3F | Thob Builder |
|---|---|---|---|---|
| 01 | Material Color | Yes | Yes | Yes (Static) |
| 02 | Texture Mapping | Yes | Yes | Yes (Fastest) |
| 03 | Hover Interaction | Yes | Yes | Planned / Limited |
| 04 | Click Toggle State | Yes | Yes | Unstable / Broken |
Key Week 1 Insights:
- Speed Advantage: Thob Builder is exceptionally fast for Static Visual Configuration. Setting up meshes and textures in the UI is roughly 3-5x faster than writing the equivalent boilerplate in code.
- Interaction Gap: The primary limitation currently identified is the Interaction Engine. Hover events and persistent state toggles (onClick) are currently unreliable or missing in the builder.
Getting Started
The project uses yarn for dependency management.
yarn install
Dev Servers
To run any implementation:
cd Week-1/Task-[N]/[vanilla|r3f]
yarn dev
Sprint Lead: Divya Pahuja | Goal: Identify the Interaction Threshold for Thob Builder.