Skip to content

Object3D Hierarchy

Working Example

<>

Description

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 position, scale, 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.

GitHub Branch

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout object3DHierarchy
npm install
npm start

Comments