Aframe Billboarding Only Y Axis

Question

I'm using this component to have an image always face the camera in an Aframe scene. It works fine but i need to make the billboarding only work on the Y axis, imagine the image is a person and the person should only be turning around to follow the camera, not lay back looking up as the camera moves closer.

Any idea how to modify that component to achieve that?

Answer 1

This thread lead to a simple solution to rotate an entity on the y-axis only. Here it is as a self-contained component:

AFRAME.registerComponent('look-at-y', {
  schema: {
    target: {type: 'string', default: 'camera'}
  },
  init: function () { },
  update: function () { },
  tick: function () {
    const targetEl = document.getElementById(this.data.target).object3D;
    const el = this.el.object3D;
    const vec = new THREE.Vector3();
    targetEl.getWorldDirection(vec);
    vec.y = 0;
    vec.add(el.position)
    el.lookAt(vec);
  }
});

This works by ignoring the Y position of the target entity when calculating the vector to look at.

Changing vec.y = 0 to vec.x or vec.z will billboard on other axes instead. To take it a step farther you could modify this component to take an "axis" schema param and dynamically swap it!