How to attach an camera to a bone/vertices on a model without affecting its rotation? (A-Frame)

Question

I wish to attach a first-person camera to the head of an animated GTLF model. I intend to remove the model's head and merged the neck into one vertex as to not obstruct the camera. My question is how do I attach my camera to the vertice or bone of the model?

This is similar to: A-frame: How to attach an object to a point on a model (and/or it's bones) but I also wish the player to still rotate the camera independently from the parent. How do I only affect the camera's position?

Currently, I have the following code:

Javascript

AFRAME.registerComponent('character-logic', {
    init: function () {
        var character = document.querySelector('#character')
        var camera = document.querySelector('#camera')
        character.skeleton.bones[2].add(camera)
    }
});

HTML Summary

<a-scene character-logic>
   <a-assets>
      <a-asset-item id="character-gtlf" src="models/character.glb" response-type="arraybuffer"></a-asset-item>
   </a-assets>
   <a-camera id="camera"></a-camera> 
   <a-entity id="character" gltf-model="#character-gtlf" animation-mixer></a-entity>
</a-scene>

But I keep getting "Cannot read property 'bone'" for some reason.

If it helps, I also have a simple code example on Glitch here which works when the character.skeleton.bones[2].add(camera) is commented out: https://glitch.com/~cam-to-bone

Answer 1

You should be able to append the camera to a bone by using this approach:

character.addEventListener('model-loaded', function(event){
    const model = event.detail.model;
    const skinnedMesh = model.getObjectByName('nedKelly001');
    skinnedMesh.skeleton.bones[2].add(camera.object3D);
});

The idea is to query the skinned mesh by its name nedKelly001. You can then safely access the skeleton property.