104 lines
4.0 KiB
Markdown
104 lines
4.0 KiB
Markdown
# 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:
|
|
1. **Vanilla Three.js**: Imperative, pure-code implementation.
|
|
2. **React Three Fiber (R3F)**: Declarative, component-based implementation.
|
|
3. **Thob Page Builder**: No-code/Visual 3D editor experience.
|
|
|
|
---
|
|
|
|
## Project Structure
|
|
The repository is organized by "Weeks," with each week containing multiple task benchmarks.
|
|
```text
|
|
/
|
|
├── 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.
|
|
```bash
|
|
# Clone the repository
|
|
git clone [repo-url]
|
|
|
|
# Install all dependencies (Monorepo root)
|
|
yarn install
|
|
```
|
|
|
|
### 💻 Development Servers
|
|
To run any specific task implementation:
|
|
```bash
|
|
# 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.
|