74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
# Task 2 Report: [Texture / Visual Surface Change]
|
||
|
||
## Objective
|
||
Apply a texture or change the surface appearance of an object interactively.
|
||
|
||
## Vanilla Three.js
|
||
- Possible: **Yes**
|
||
- Notes: Requires using `TextureLoader` to load assets and manually assigning the texture to the material's `map` property.
|
||
- Key concepts: `THREE.TextureLoader`, `Asset URL Management`, `Material Map`.
|
||
- Complexity: **Easy but verbose** (Needs explicit code for every asset loader).
|
||
|
||
## R3F
|
||
- Possible: **Yes**
|
||
- Notes: Highly efficient. The `useLoader` hook (with `TextureLoader`) handles asset loading declaratively and integrates with React Suspense.
|
||
- What R3F abstracted: `Loading callbacks`, `Declarative asset loading`, `Suspense integration`.
|
||
- Complexity: **Easy** (Very concise, 1-2 lines of code).
|
||
|
||
## Thob Page Builder
|
||
- Possible: **Yes**
|
||
- Notes: **Significantly faster** than code-based approaches for simple asset application. You simply select a file or link a URL in the UI, and the mesh updates instantly.
|
||
- Builder steps: `Canvas > Mesh > Material > Map > Browse/URL`.
|
||
- Complexity: **Minimal** (Completely No-Code).
|
||
|
||
## Comparison Summary
|
||
- Possible in all 3? **Yes**.
|
||
- Key abstraction difference:
|
||
- Vanilla = imperative asset handling
|
||
- R3F = declarative asset loading
|
||
- Thob = UI-driven asset configuration
|
||
|
||
- Main differences:
|
||
- **Vanilla**: Gives full control, but requires several lines of code for a single texture.
|
||
- **R3F**: The fastest way to write complex texture logic with simple code.
|
||
- **Thob**: The fastest overall for visual users. No code required for initial mapping.
|
||
|
||
- Where Thob is better: **Applying a visual asset that you already have.**
|
||
|
||
- Where Thob is weaker:
|
||
- **Asset error handling**. When a texture fails (like CORS/404 errors), it’s harder to debug than in code.
|
||
- **Limited flexibility for complex material setups**. Applying different textures to different faces of a single object is not straightforward compared to code-based approaches.
|
||
|
||
- What feels awkward or unclear:
|
||
- The CORS issues for external assets make it difficult to link textures that aren't already in the Thob library.
|
||
|
||
## Limitation Type (if any)
|
||
- [ ] Editor UX limitation
|
||
- [x] Runtime limitation (CORS/URL fetching)
|
||
- [ ] Schema / data model limitation
|
||
- [ ] Component limitation
|
||
- [ ] Event system limitation
|
||
- [ ] Property binding limitation
|
||
- [x] Asset pipeline limitation
|
||
- [ ] Unknown / needs investigation
|
||
|
||
## Workaround
|
||
- Is there a workaround? **Yes**. Ensure all assets are uploaded directly to the Thob project rather than linking from external URLs to avoid CORS blocks.
|
||
|
||
## Suggested Improvement
|
||
- What should improve in Thob? **Improve the asset importer** to handle external URL fetching with a proxy to avoid CORS blocks. Provide more descriptive "Map Loading" feedback in the UI.
|
||
- Is it:
|
||
- editor (Yes)
|
||
- runtime (Yes)
|
||
- component (No)
|
||
- UX (Yes)
|
||
- schema/data (Yes)
|
||
|
||
## Difficulty Estimate
|
||
- **Easy**
|
||
|
||
## Business Value
|
||
- **High** (Asset application is a core part of 3D design workflows).
|
||
|
||
## Recommendation
|
||
Thob is already **strong** in texture application. The speed advantage over R3F and Vanilla is clear for visual workflows. To make it production-ready, it should improve external asset handling and support more flexible material configurations. |