87 lines
3.4 KiB
Markdown
87 lines
3.4 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
|
|
The project uses `yarn` for dependency management.
|
|
```bash
|
|
yarn install
|
|
```
|
|
|
|
### Dev Servers
|
|
To run any implementation:
|
|
```bash
|
|
cd Week-1/Task-[N]/[vanilla|r3f]
|
|
yarn dev
|
|
```
|
|
|
|
---
|
|
|
|
**Sprint Lead**: Divya Pahuja | **Goal**: Identify the Interaction Threshold for Thob Builder.
|