thob-capability-map/Week-1/Task-2/report.md

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
• Runtime limitation (CORS/URL fetching)
• Schema / data model limitation
• Component limitation
• Event system limitation
• Property binding limitation
• 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.