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

📦 Installation

The project uses yarn for dependency management.

# Clone the repository
git clone [repo-url]

# Install all dependencies (Monorepo root)
yarn install

💻 Development Servers

To run any specific task implementation:

# Example: Running Task 4 (R3F)
cd Week-1/Task-4/r3f
yarn dev

Contribution & Reporting

Each task includes a report.md file. These reports follow a standardized format to capture:

Complexity: How many lines of code vs. clicks?
Limitation Type: Is it a runtime, editor, or UX issue?
Workarounds: How did we solve the gap?
Business Value: Why does this feature matter to our users?

Sprint Lead: Divya Pahuja
Goal: Identify the "Interactivity Threshold" where code becomes more efficient than the builder UI.

4.0 KiB Raw Blame History