How to create hand anchors with Anchoring Component
Creating entities with anchoring components attached instead of using AnchorEntity.
We’ve been using AnchorEntity for our examples until now. I recently learned that AnchorEntity is essentially a convenient wrapper for an entity with an AnchoringComponent.
Want to use AnchorEntity instead?
We can add the Anchoring component in Reality Composer Pro.
Options:
- Target: select Hand
- Chirality: Left, Right, Either
- Anchor: select from preset locations or target a specific joint
We can do the same thing in code by creating an instance of component and setting it on an entity.
let entity = Entity()
let anchor = AnchoringComponent(.hand(.left, location: .palm))
entity.components.set(anchor)Video demo
The left hand has three anchors that I created in Reality Composer Pro. The right hand has a anchor for each joint, added via code.
Full example code
struct Example025: View {
var body: some View {
RealityView { content in
if let scene = try? await Entity(named: "HandAnchoringLabs", in: realityKitContentBundle) {
content.add(scene)
// Left Hand: Three small spheres were created in Reality Composer Pro. Each one has an Anchoring Component.
// Right Hand: Create an entity for each joint
if let rightHandSphere = scene.findEntity(named: "StepSphereGreen") {
// Create an array of all joints to iterate over.
let joints: [AnchoringComponent.Target.HandLocation.HandJoint] = [
.thumbIntermediateBase,
.thumbIntermediateTip,
.thumbKnuckle,
.thumbTip,
.indexFingerIntermediateBase,
.indexFingerIntermediateTip,
.indexFingerKnuckle,
.indexFingerMetacarpal,
.indexFingerTip,
.middleFingerIntermediateBase,
.middleFingerIntermediateTip,
.middleFingerKnuckle,
.middleFingerMetacarpal,
.middleFingerTip,
.ringFingerIntermediateBase,
.ringFingerIntermediateTip,
.ringFingerKnuckle,
.ringFingerMetacarpal,
.ringFingerTip,
.littleFingerIntermediateBase,
.littleFingerIntermediateTip,
.littleFingerKnuckle,
.littleFingerMetacarpal,
.littleFingerTip,
]
for joint in joints {
let entity = rightHandSphere.clone(recursive: true)
let anchor = AnchoringComponent(
.hand(.right, location: .joint(for: joint)),
trackingMode: .continuous
)
entity.components.set(anchor)
content.add(entity)
}
}
}
}
.persistentSystemOverlays(.hidden)
.upperLimbVisibility(.hidden)
}What are you using in your apps? AnchorEntity or AnchoringComponent directly?
Support our work so we can continue to bring you new examples and articles.
Follow Step Into Vision