How can I attach a first-person camera to the head of an animated GTLF model? My plan is to eliminate the model's head and combine the neck into one vertex to avoid obstructing the camera. I am curious about the process of attaching my camera to the vertice or bone of the model.
This situation is reminiscent of: A-frame: How to attach an object to a point on a model (and/or it's bones), however, I also want the player to be able to rotate the camera independently from the parent. How can I only modify the camera's position?
The code I am currently using is as follows:
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>
However, I keep encountering the error message "Cannot read property 'bone'." If it helps, I have provided a simple code example on Glitch here, which functions correctly when the
character.skeleton.bones[2].add(camera)