Compare commits
3 Commits
05ee36b593
...
9c307ed504
| Author | SHA1 | Date | |
|---|---|---|---|
| 9c307ed504 | |||
| e6d5cb2fc4 | |||
| 0da0b38313 |
218
README.md
218
README.md
@ -1,159 +1,103 @@
|
||||
# Turborepo starter
|
||||
# Thob Capability Mapping Sprint
|
||||
|
||||
This Turborepo starter is maintained by the Turborepo core team.
|
||||
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**).
|
||||
|
||||
## Using this example
|
||||
---
|
||||
|
||||
Run the following command:
|
||||
## 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.
|
||||
|
||||
```sh
|
||||
npx create-turbo@latest
|
||||
---
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
## What's inside?
|
||||
---
|
||||
|
||||
This Turborepo includes the following packages/apps:
|
||||
## 🛠️ Tech Stack
|
||||
* **Engine**: Three.js
|
||||
* **Frontend**: React (for R3F)
|
||||
* **Styling**: CSS Modules / Vanilla CSS
|
||||
* **Build Tool**: Vite
|
||||
* **Platform**: Thob 3D Page Builder
|
||||
|
||||
### Apps and Packages
|
||||
---
|
||||
|
||||
- `docs`: a [Next.js](https://nextjs.org/) app
|
||||
- `web`: another [Next.js](https://nextjs.org/) app
|
||||
- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
|
||||
- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
|
||||
- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
|
||||
## 🏁 Week 1 Milestone Summary
|
||||
|
||||
Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
|
||||
| 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 |
|
||||
|
||||
### Utilities
|
||||
### 🔦 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.
|
||||
|
||||
This Turborepo has some additional tools already setup for you:
|
||||
---
|
||||
|
||||
- [TypeScript](https://www.typescriptlang.org/) for static type checking
|
||||
- [ESLint](https://eslint.org/) for code linting
|
||||
- [Prettier](https://prettier.io) for code formatting
|
||||
## 🚀 Getting Started
|
||||
|
||||
### Build
|
||||
### 📦 Installation
|
||||
The project uses `yarn` for dependency management.
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone [repo-url]
|
||||
|
||||
To build all apps and packages, run the following command:
|
||||
|
||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed (recommended):
|
||||
|
||||
```sh
|
||||
cd my-turborepo
|
||||
turbo build
|
||||
# Install all dependencies (Monorepo root)
|
||||
yarn install
|
||||
```
|
||||
|
||||
Without global `turbo`, use your package manager:
|
||||
|
||||
```sh
|
||||
cd my-turborepo
|
||||
npx turbo build
|
||||
yarn dlx turbo build
|
||||
pnpm exec turbo build
|
||||
### 💻 Development Servers
|
||||
To run any specific task implementation:
|
||||
```bash
|
||||
# Example: Running Task 4 (R3F)
|
||||
cd Week-1/Task-4/r3f
|
||||
yarn dev
|
||||
```
|
||||
|
||||
You can build a specific package by using a [filter](https://turborepo.dev/docs/crafting-your-repository/running-tasks#using-filters):
|
||||
---
|
||||
|
||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed:
|
||||
## 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?
|
||||
|
||||
```sh
|
||||
turbo build --filter=docs
|
||||
```
|
||||
---
|
||||
|
||||
Without global `turbo`:
|
||||
|
||||
```sh
|
||||
npx turbo build --filter=docs
|
||||
yarn exec turbo build --filter=docs
|
||||
pnpm exec turbo build --filter=docs
|
||||
```
|
||||
|
||||
### Develop
|
||||
|
||||
To develop all apps and packages, run the following command:
|
||||
|
||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed (recommended):
|
||||
|
||||
```sh
|
||||
cd my-turborepo
|
||||
turbo dev
|
||||
```
|
||||
|
||||
Without global `turbo`, use your package manager:
|
||||
|
||||
```sh
|
||||
cd my-turborepo
|
||||
npx turbo dev
|
||||
yarn exec turbo dev
|
||||
pnpm exec turbo dev
|
||||
```
|
||||
|
||||
You can develop a specific package by using a [filter](https://turborepo.dev/docs/crafting-your-repository/running-tasks#using-filters):
|
||||
|
||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed:
|
||||
|
||||
```sh
|
||||
turbo dev --filter=web
|
||||
```
|
||||
|
||||
Without global `turbo`:
|
||||
|
||||
```sh
|
||||
npx turbo dev --filter=web
|
||||
yarn exec turbo dev --filter=web
|
||||
pnpm exec turbo dev --filter=web
|
||||
```
|
||||
|
||||
### Remote Caching
|
||||
|
||||
> [!TIP]
|
||||
> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
|
||||
|
||||
Turborepo can use a technique known as [Remote Caching](https://turborepo.dev/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
|
||||
|
||||
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
|
||||
|
||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed (recommended):
|
||||
|
||||
```sh
|
||||
cd my-turborepo
|
||||
turbo login
|
||||
```
|
||||
|
||||
Without global `turbo`, use your package manager:
|
||||
|
||||
```sh
|
||||
cd my-turborepo
|
||||
npx turbo login
|
||||
yarn exec turbo login
|
||||
pnpm exec turbo login
|
||||
```
|
||||
|
||||
This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
|
||||
|
||||
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
|
||||
|
||||
With [global `turbo`](https://turborepo.dev/docs/getting-started/installation#global-installation) installed:
|
||||
|
||||
```sh
|
||||
turbo link
|
||||
```
|
||||
|
||||
Without global `turbo`:
|
||||
|
||||
```sh
|
||||
npx turbo link
|
||||
yarn exec turbo link
|
||||
pnpm exec turbo link
|
||||
```
|
||||
|
||||
## Useful Links
|
||||
|
||||
Learn more about the power of Turborepo:
|
||||
|
||||
- [Tasks](https://turborepo.dev/docs/crafting-your-repository/running-tasks)
|
||||
- [Caching](https://turborepo.dev/docs/crafting-your-repository/caching)
|
||||
- [Remote Caching](https://turborepo.dev/docs/core-concepts/remote-caching)
|
||||
- [Filtering](https://turborepo.dev/docs/crafting-your-repository/running-tasks#using-filters)
|
||||
- [Configuration Options](https://turborepo.dev/docs/reference/configuration)
|
||||
- [CLI Usage](https://turborepo.dev/docs/reference/command-line-reference)
|
||||
**Sprint Lead**: Divya Pahuja
|
||||
**Goal**: Identify the "Interactivity Threshold" where code becomes more efficient than the builder UI.
|
||||
|
||||
@ -1,10 +1,29 @@
|
||||
# General Notes - Week 1
|
||||
# Week 1 — General Notes & Personal Summary
|
||||
|
||||
## Day 1
|
||||
-
|
||||
## Day 2
|
||||
-
|
||||
## Day 3
|
||||
-
|
||||
## Day 4
|
||||
-
|
||||
## Milestone Recap: Tasks 1–4
|
||||
* **Task 1 (Material Color)**: Handled color changes imperative (Vanilla), declarative (R3F), and UI-driven (Thob).
|
||||
* **Task 2 (Texture Mapping)**: Successfully applied checkerboard and URL-based textures. **Thob speed was the highlight here.**
|
||||
* **Task 3 (Hover Feedback)**: Identified a **major gap**—Hover is standard in code but missing from the builder UI.
|
||||
* **Task 4 (Click Toggle)**: Discovered that the `onClick` interaction engine is currently **unstable/broken** in the builder.
|
||||
|
||||
---
|
||||
|
||||
## Top Reflections
|
||||
|
||||
### Speed vs. Control
|
||||
* **The Thob Advantage**: Setting up a 3D scene (adding a cube + lighting + texture) in the builder is **lightning-fast**. What takes a 10-minute Vite setup in Vanilla takes **2 minutes** in the Thob UI.
|
||||
* **The Interactivity Threshold**: As soon as we moved from "Static Visuals" to "Interactive Behavior," the strength shifted back to **R3F**. The builder's UI for interactions exists, but the execution logic isn't there yet.
|
||||
|
||||
### Declarative vs. Imperative
|
||||
* Writing the **Raycaster** manually in Vanilla felt outdated and boilerplate-heavy compared to the clean **`onPointerOver`** props in R3F.
|
||||
* **Insight**: Thob would benefit immensely by mirroring R3F's declarative event model (simple triggers linked to property changes).
|
||||
|
||||
---
|
||||
|
||||
## Critical Discoveries (The "Interaction Blackout")
|
||||
The most valuable part of this week's sprint was identifying that:
|
||||
1. **Hover (PointerOver/Out)**: Is not just "hidden"—it's currently missing as a first-class feature in the Thob engine.
|
||||
2. **Click (Interaction Dispatcher)**: Is unreliable. Even when wired correctly in the UI, it doesn't always fire in the runtime.
|
||||
3. **CORS/Asset Linking**: External URL textures are prone to browser blocking, making internal "Project Library" uploads the only safe path for now.
|
||||
|
||||
---
|
||||
@ -1,26 +1,25 @@
|
||||
# Divya — Week 1 Summary
|
||||
# Week 1: Personal Sprint Summary
|
||||
|
||||
## Tasks Completed
|
||||
-Task 1:
|
||||
-Task 2:
|
||||
-Task 3:
|
||||
-Task 4:
|
||||
## Favorite Task: Task 2 (Texture Mapping)
|
||||
This task was the most satisfying because it highlighted the **"No-Code Visual Loop."** Being able to see the checkerboard align instantly in the viewport vs. having to refresh the browser and check the console logs for URL errors made the builder feel like a proper "Artist's Tool."
|
||||
|
||||
## What Thob Supports Well
|
||||
-1.
|
||||
-2.
|
||||
-3.
|
||||
## The Biggest Challenge
|
||||
The biggest hurdle was the **Interaction engine's inconsistency.**
|
||||
- It was frustrating to see a button trigger in the UI that simply didn't fire in the runtime.
|
||||
- Realizing that **Hover** is currently unsupported was a reality check: it reminded me that while the builder is a strong visual layout engine, it's not yet a full interaction engine.
|
||||
|
||||
## What Feels Weak / Awkward
|
||||
-1.
|
||||
-2.
|
||||
-3.
|
||||
## Tooling Comparison summary
|
||||
- **Vanilla Tree.js**: Felt like the "Ultimate Control" but required too much "Boilerplate Math."
|
||||
- **React Three Fiber**: The "Sweet Spot." Declarative, powerful, and very clean for managing complex states.
|
||||
- **Thob Builder**: The "Future." If the interaction engine catches up to the visual engine, it will be the fastest way to build 3D web apps.
|
||||
|
||||
## Most Product-Relevant Discovery
|
||||
-
|
||||
---
|
||||
|
||||
## Best Improvement Recommendation
|
||||
-
|
||||
## Progress Checklist (Week 1)
|
||||
- [x] Task 1: Material Color Logic (Complete)
|
||||
- [x] Task 2: Texture Mapping (Complete)
|
||||
- [x] Task 3: Pointer/Hover Interaction (Complete - Discovery: Not Possible)
|
||||
- [x] Task 4: Persistent Click Toggle (Complete - Discovery: Unstable)
|
||||
|
||||
## What I Learned About Vanilla vs R3F vs Thob
|
||||
-
|
||||
|
||||
**Personal Note**: Transitioning between three different ways of thinking (Imperative → Declarative → Visual) has been an incredible way to map the landscape of 3D Web Development.
|
||||
Loading…
x
Reference in New Issue
Block a user