How to only sync one axis of an object’s rotation?

[vincentfretin]

Question asked by Ben Weekes on slack:
How to only sync one axis of an object’s rotation? I want to avoid avatars lying on their side when people look up and down.

[vincentfretin]

What I do for this use case is creating a component rotation-y-only that copy the rotation y of the camera to another entity that have the model and I sync the model rotation in the networked schema.
Here are the different parts of the code:

AFRAME.registerComponent("rotation-y-only", {
  init: function () {
    this.camera = this.el.querySelector(".camera");
    this.camera.object3D.rotation.order = "YXZ";
    this.model = this.el.querySelector(".model");
    this.model.object3D.rotation.order = "YXZ";
  },
  tick: function () {
    const cameraRot = this.camera.object3D.rotation;
    this.model.object3D.rotation.set(0, cameraRot.y + Math.PI, 0);
  },
});

<template id="avatar-template">
  <a-entity player-info>
    <a-entity class="model" gltf-model="some.glb"></a-entity>
    <a-entity class="camera" networked-audio-source></a-entity>
  </a-entity>
</template>

<a-entity
  id="cameraRig"
  rotation-y-only
  networked="template:#avatar-template;attachTemplateToLocal:false;"
>
  <a-entity
    id="camera"
    class="camera"
    camera
    look-controls=""
    position="0 1.6 0"
  ></a-entity>
  <a-entity class="model" gltf-model="some.glb"></a-entity>
</a-entity>

NAF.schemas.add({
  template: "#avatar-template",
  components: [
    "player-info",
    {
      component: "position",
      requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001),
    },
    {
      component: "rotation",
      requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5),
    },
    {
      selector: ".model",
      component: "rotation",
      requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5),
    },
  ],
});

[vincentfretin]

Working version of the code above (the logic of the rotation-y-only component put directly in player-info component) in the following example https://github.com/networked-aframe/naf-valid-avatars