From beee98de51b9c755146ebeb71ae5c1a257431ac8 Mon Sep 17 00:00:00 2001 From: anshk Date: Thu, 26 Mar 2026 19:45:15 +0530 Subject: [PATCH] chore: added day1 update --- Week-1/Days-update/Day1.md | 6 ++++ Week-1/Days-update/Day2.md | 5 ++++ Week-1/Task-1/TaskNotes.md | 56 ++++++++++++++++++-------------------- 3 files changed, 38 insertions(+), 29 deletions(-) create mode 100644 Week-1/Days-update/Day1.md create mode 100644 Week-1/Days-update/Day2.md diff --git a/Week-1/Days-update/Day1.md b/Week-1/Days-update/Day1.md new file mode 100644 index 0000000..2ef8f02 --- /dev/null +++ b/Week-1/Days-update/Day1.md @@ -0,0 +1,6 @@ +# Day 1 Update + +- Set up the repository using Turborepo to organize the project as a monorepo. +- Learned about the Scene Graph concept in Three.js. +- Implemented the solar system from the Three.js manual scene graph tutorial: https://threejs.org/manual/#en/scenegraph +- Started implementing the same solar system in React Three Fiber (R3F), but did not finish it yet. diff --git a/Week-1/Days-update/Day2.md b/Week-1/Days-update/Day2.md new file mode 100644 index 0000000..b5bb4c6 --- /dev/null +++ b/Week-1/Days-update/Day2.md @@ -0,0 +1,5 @@ +# Day 2 Update + +- Continued work on Task 1 in React Three Fiber (R3F). +- Implemented earth orbit motion by rotating a parent `group` with `useFrame`. +- Current output: a very simple solar system where earth continuously orbits the sun. diff --git a/Week-1/Task-1/TaskNotes.md b/Week-1/Task-1/TaskNotes.md index e8be752..e1842e1 100644 --- a/Week-1/Task-1/TaskNotes.md +++ b/Week-1/Task-1/TaskNotes.md @@ -1,60 +1,58 @@ -# Task: [Feature Name] +# Task: Parent-Child Hierarchy ## Objective -What is the feature trying to do? +The objective was to create a simple 3D scene with two objects in a parent-child hierarchy, then verify that transformations applied to the parent (such as position and scale) are correctly inherited by the child. ## Vanilla three.js --Possible: Yes / Partial / No --Notes: --Key concepts: --Complexity: Easy / Medium / Hard +-Possible: Yes +-Notes: Implemented by creating sunMesh and attaching an earthOrbit group to it (`sunMesh.add(earthOrbit)`), then adding earthMesh to that group. Parent transforms propagate correctly to child. +-Key concepts: Scene graph hierarchy, `THREE.Group` as orbit pivot, local vs world transforms, animation loop for orbit/spin. +-Complexity: Easy ## R3F --Possible: Yes / Partial / No --Notes: --What R3F abstracted: --Complexity: Easy / Medium / Hard +-Possible: Yes +-Notes: Implemented by nesting Earth inside a `` inside the Sun ``, making Earth a child in the same scene graph hierarchy. +-What R3F abstracted: Declarative JSX scene creation, automatic render lifecycle integration with React, and frame updates via `useFrame` instead of manual renderer/loop setup. +-Complexity: Easy ## Thob Page Builder --Possible: Yes / Partial / No --Notes: --Builder steps: --Complexity: Easy / Medium / Hard +-Possible: Yes +-Notes: Implemented by putting the Earth mesh inside the Sun mesh (parent-child). Changing Sun position/scale also affects Earth as expected (Earth follows position and scale inheritance). However, when Earth position is changed directly, Earth shape appears to distort/stretch as it moves farther from Sun. +-Builder steps: Create Sun mesh -> add Earth mesh as child of Sun -> test parent transform inheritance by changing Sun position/scale -> test child local transform by changing Earth position. +-Complexity: Easy ## Comparison Summary --Possible in all 3? Yes / Partial / No --Main differences: --Where Thob is better: --Where Thob is weaker: --What feels awkward or unclear: +-Possible in all 3? Yes +-Main differences: Vanilla gives explicit low-level control; R3F gives cleaner declarative hierarchy; Thob gives fastest visual setup but less predictable child transform behavior in this case. Animation was not possible in Thob but was possible in vanilla and r3f. +-Where Thob is better: Quick setup and visual parenting without writing code. +-Where Thob is weaker: Child transform behavior is less transparent when editing child position under a transformed parent. +-What feels awkward or unclear: Local vs inherited transforms are not obvious in the editor, and distortion behavior on child position change is unexpected. ## Limitation Type (if any) --[ ] Editor UX limitation +-[x] Editor UX limitation -[ ] Runtime limitation -[ ] Schema / data model limitation --[ ] Component limitation +-[x] Component limitation -[ ] Event system limitation -[ ] Asset pipeline limitation -[ ] Unknown / needs investigation ## Workaround --Is there a workaround? --If yes, what is it? +-Is there a workaround? NO +-No, I tried a lot of different things, like many groupa and flex inside the parent mesh and different ways to place the components. ## Suggested Improvement --What should improve in Thob? +-What should improve in Thob? Make transform inheritance behavior explicit and stable for nested meshes, especially when parent scale is applied and child position is edited. -Is it: -editor - -runtime -component -UX - -schema/data ## Difficulty Estimate --Easy / Medium / Hard +-Easy ## Business Value --Low / Medium / High +-High ## Recommendation -Should Thob support this better? Why? \ No newline at end of file +Should Thob support this better? Why? Yes. Parent-child transform consistency is a core 3D workflow; reliable nested transforms reduce confusion, improve trust in the builder, and make more advanced scenes practical without code-level debugging. \ No newline at end of file