diff --git a/Week-1/Task-1/report.md b/Week-1/Task-1/report.md index a017c0d..67ec38a 100644 --- a/Week-1/Task-1/report.md +++ b/Week-1/Task-1/report.md @@ -1,60 +1,63 @@ -# Task: [Feature Name] +# Task 1: [Basic Material Color Change] ## Objective -What is the feature trying to do? +Create a single 3D object and interactively change its material color using three different approaches. -## Vanilla three.js --Possible: Yes / Partial / No --Notes: --Key concepts: --Complexity: Easy / Medium / Hard +## Vanilla Three.js +-Possible: **Yes** +-Notes: Requires manual setup of the Scene, Camera, and Renderer boilerplate. Interaction requires a `window` click event or a `Raycaster` to detect mesh clicks. +-Key concepts: `Object mutation`, `Manual Animation Loop`, `Event Listeners`. +-Complexity: **Easy** (High boilerplate). ## R3F --Possible: Yes / Partial / No --Notes: --What R3F abstracted: --Complexity: Easy / Medium / Hard +-Possible: **Yes** +-Notes: Extremely efficient. Declarative structure makes it easy to read. Raycasting is abstracted into the `onClick` prop. +-What R3F abstracted: `Raycasting`, `Re-rendering`, `State Hooks`, `Scene Management`. +-Complexity: **Easy** (Very concise). ## Thob Page Builder --Possible: Yes / Partial / No --Notes: --Builder steps: --Complexity: Easy / Medium / Hard +-Possible: **Partial** +-Notes: **Excellent for static visual editing** via the side-panel color picker. However, **dynamic interaction** (changing color on click) is currently difficult and resulted in scripting errors. +-Builder steps: `Canvas > Add Mesh > Select meshStandardMaterial > Use Color Picker`. +-Complexity: **Easy** (for static) / **Hard** (for dynamic/interactive). ## Comparison Summary --Possible in all 3? Yes / Partial / No +-Possible in all 3? **Partial** (Dynamic interaction only supported in Code). -Main differences: --Where Thob is better: --Where Thob is weaker: --What feels awkward or unclear: + - **Vanilla**: Gives you full control, but requires a lot of extra code. + - **R3F**: The fastest way to write complex interactions with simple code. + - **Thob**: Best for visual editing; lacks simple "No-Code" interaction logic. +-Where Thob is better: **Instantly seeing visual changes** without any code. +-Where Thob is weaker: **Interactive logic** (e.g., "if I click this, change that"). +-What feels awkward or unclear: The lack of a clear "No-Code" interaction system makes dynamic updates difficult. ## Limitation Type (if any) --[ ] Editor UX limitation --[ ] Runtime limitation --[ ] Schema / data model limitation --[ ] Component limitation --[ ] Event system limitation --[ ] Asset pipeline limitation --[ ] Unknown / needs investigation +- [ ] Editor UX limitation +- [ ] Runtime limitation +- [ ] Schema / data model limitation +- [ ] Component limitation +- [x] Event system limitation +- [x] Property binding limitation +- [ ] Asset pipeline limitation +- [ ] Unknown / needs investigation ## Workaround --Is there a workaround? --If yes, what is it? +-Is there a workaround? **No reliable workaround found for 100% no-code dynamic updates.** Toggling visibility between two pre-colored objects might work but is not an efficient solution. ## Suggested Improvement --What should improve in Thob? +-What should improve in Thob? **Add a "Set Property" action for event triggers and better error feedback.** -Is it: - -editor - -runtime - -component - -UX - -schema/data +- editor (Yes) +- runtime (Yes) +- component (No) +- UX (Yes) +- schema/data (Yes) ## Difficulty Estimate --Easy / Medium / Hard +- **Easy** ## Business Value --Low / Medium / High +- **Medium/High** (Essential for product configurators and UI/UX mockups). ## Recommendation -Should Thob support this better? Why? +Thob **should** support this better. Material color swapping is a core feature for product customization (e.g., choosing a sofa color), which is a major use case for 3D page builders.