@threlte/core

<HierarchicalObject>

On initialization, the component <HierarchicalObject> forwards a provided THREE.Object3D to a parent <HierarchicalObject> component. The parent <HierarchicalObject> receives this object in the callback onChildMount to e.g. add the object to the scene graph, create a list of all child objects or use the child objects and act on their geometries.

The component <SceneGraphObject> in turn uses this component to add and remove objects to and from the scene graph.

Basic Example

In this example the component is responsible for

• forwarding the mesh to the parent <HierarchicalObject>
• adding children to the scene graph (i.e. as children to the mesh)
• removing children from the scene graph

Mounting a component to a different parent

Sometimes you need to add a component as a child to another object than its parent. Let’s say we want to transform a THREE.Mesh object with TransformControls. In this case, Three.js wants you to mount the TransformControls as a child to the scene and attach it to the THREE.Mesh. We can use the <HierarchicalObject> component to add an object to an arbitrary parent object:

<script>
  import { HierarchicalObject, useThrelte } from '@threlte/core'
  import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js'
  import { otherMesh } from '$stores/app' // let's say this is a store with a mesh

  const { scene } = useThrelte()
</script>

<HierarchicalObject
  onChildMount={(child) => {
    // child is the TransformControls object
    scene.add(child)
  }}
  onChildDestroy={(child) => {
    // child is the TransformControls object
    scene.remove(child)
  }}
>
  <T
    is={TransformControls}
    oncreate={({ ref, cleanup }) => {
      ref.attach($otherMesh)
      cleanup(ref.detach)
    }}
  />
</HierarchicalObject>