The scene is an
Object3D. You can add other Object3Ds to the scene, and they become children of the scene. The scene itself is derived from the
Object3D base class.
If you rotate the scene, or scale the scene, or translate its position, it will affect all if its child objects.
You can make an
Object3D a child of another
Object3D by nesting the components. E.g.,
<mesh> <icosahedronGeometry /> <meshNormalMaterial wireframe /> <mesh> <boxGeometry /> <meshNormalMaterial wireframe /> <mesh> <sphereGeometry /> <meshNormalMaterial wireframe /> </mesh> </mesh> </mesh>
You can also add more than one
Object3D to any other
Object3D that already exists in the scene. Any changes to any
Object3D transforms such as
rotation will affect all the children under that same parent equally.
scene |--object1 (Red Ball) |--object2 (Green Ball) |--object3 (Blue Ball)
In this example, the green ball is a child of the blue ball, which is a child of the red ball.
Any changes to the red ball will affect the green and blue balls,
Any changes to the blue ball, will affect the green ball, but not its parent, the red ball.
Furthermore, any changes to the green ball, have no effect on its parent, or grandparent balls.
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git cd React-Three-Fiber-Boilerplate git checkout object3DHierarchy npm install npm start