Overview
Changes the object3D parent of an A-Frame entity.
By default, the THREE.js scene graph of Object3Ds matches the A-Frame DOM hierarchy. However there are specific cases where it can be helpful to rearrange the THREE.js scene graph, without modifying the A-Frame DOM hierarchy, for example:
- This provides a convenient way to grab objects with a hand or controller - reparent them to the hand / controller, and then parent them back to the original parent when released.
- It can also be a convenient way to stick objects to other objects, which can be more efficient than using physics-based constraint systems.
This component provides a straightforward way to do this, that is reflected in the DOM.
When the
object-parentis set on an entity, that entity maintains the same world transform (i.e. position, scale, rotation). This means that it's local transform is updated to deliver this world transform in the context of the new parent.
Removing the attribute results in the object being returned to it's default position in the scene graph (again, maintaining the same world transform).
Other Approaches to Re-Parenting
This is just one approach to reparenting entities. It works well in some cases, but may not be the best solution in all cases.
Another approach is do reparent in the DOM (which naturally also updates the THREE.js scene graph).
There's some fairly extensive discussion (plus code snippets for some other approaches) in the A-Frame repo
here and on Stack Overflow
here.
Schema
| Property | Description | Default |
| -------- | ------------------------------------------------------------ | ------- |
| parent | Selector for entity to make the object a direct child of.
This should identify a unique entity (the component will warn if it matches more than one). | none |
Installation
Via CDN
``
`
Or via npm
`
npm install aframe-object-parent
`
Examples
Change an element's parent like this:
`
this.el.setAttribute('object-parent', 'parent:#newparent')
``
Dedicated small-scale example to follow.
For now, see
mouse-manipulation.js and
laser-manipulation.js, which both use this component.
Code
object-parent