/en/tags/scene-graph/Recent content in Scene-Graph on Feynman's BlogHugoen-USFri, 24 Jul 2026 12:00:00 +0800/en/posts/threejs-scene-graph/Fri, 24 Jul 2026 12:00:00 +0800/en/posts/threejs-scene-graph/<blockquote class="blockquote-regular"> <p>The scene graph is the skeleton system of Three.js. Understanding parent-child relationships, transform inheritance, and coordinate system conversion allows you to build complex 3D structures from simple geometry. This lesson explores the solar system model and block-based animal assembly to deeply understand the scene graph&rsquo;s tree structure.</p> </blockquote> <p><img src="/images/2026-07-07_series_threejs-creation-diary/07_scene-graph/demo.png" alt="Demo: Solar System"></p> <h2 id="01-learning-objectives">01 Learning Objectives</h2> <p>This lesson focuses on Three.js scene graph and transform system:</p> <ul> <li>Understand the scene graph tree structure</li> <li>Master parent-child relationships and transform inheritance</li> <li>Distinguish local versus world coordinate systems</li> <li>Learn Object3D grouping management</li> <li>Master scene.traverse() traversal</li> <li>Learn AxesHelper / GridHelper debugging</li> </ul> <h2 id="02-scene-graph-tree-structure">02 Scene Graph Tree Structure</h2> <h3 id="what-is-a-scene-graph">What is a Scene Graph</h3> <p>All objects in Three.js are organized as a tree, with scene as the root node. A child object&rsquo;s transform (position/rotation/scale) is relative to its parent. When the parent transforms, all children follow.</p>