Camera tool menu should always face player

src/bit-components.js

@@ -80,6 +80,11 @@ export const Pinned = defineComponent();
 export const FloatyObject = defineComponent({ flags: Types.ui8, releaseGravity: Types.f32 });
 
 export const CameraTool = defineComponent({
+  snapTime: Types.f32,
+  state: Types.ui8,
+  captureDurIdx: Types.ui8,
+
+  snapMenuRef: Types.eid,
   button_next: Types.eid,
   button_prev: Types.eid,
   snapRef: Types.eid,
@@ -89,10 +94,7 @@ export const CameraTool = defineComponent({
   selfieScreenRef: Types.eid,
   cameraRef: Types.eid,
   countdownLblRef: Types.eid,
-  captureDurLblRef: Types.eid,
+  captureDurLblRef: Types.eid
-  snapTime: Types.f32,
-  state: Types.ui8,
-  captureDurIdx: Types.ui8
 });
 
 window.$C = {

src/systems/bit-camera-system.js

@@ -2,6 +2,7 @@ import { defineQuery, enterQuery, exitQuery, hasComponent } from "bitecs";
 import { CameraTool, Interacted } from "../bit-components";
 import { addMedia, pixelsToPNG } from "../utils/media-utils";
 import { RenderTargetRecorder } from "../utils/render-target-recorder";
+import { isFacingCamera } from "../utils/three-utils";
 import { SOUND_CAMERA_TOOL_COUNTDOWN, SOUND_CAMERA_TOOL_TOOK_SNAPSHOT } from "./sound-effects-system";
 
 // Prefer h264 if available due to faster decoding speec on most platforms
@@ -141,6 +142,14 @@ function updateRenderTarget(world, camera) {
 }
 
 function updateUI(world, camera) {
+  const playerInFrontOfCamera = isFacingCamera(world.eid2obj.get(camera));
+  const snapMenuObj = world.eid2obj.get(CameraTool.snapMenuRef[camera]);
+  const yRot = playerInFrontOfCamera ? 0 : Math.PI;
+  if (snapMenuObj.rotation.y !== yRot) {
+    snapMenuObj.rotation.y = yRot;
+    snapMenuObj.matrixNeedsUpdate = true;
+  }
+
   const snapBtnObj = world.eid2obj.get(CameraTool.snapRef[camera]);
   const cancelBtnObj = world.eid2obj.get(CameraTool.cancelRef[camera]);
   const nextBtnObj = world.eid2obj.get(CameraTool.button_next[camera]);

src/utils/three-utils.js

@@ -468,3 +468,16 @@ export function createHeadlessModelForSkinnedMesh(mesh) {
 
   return createErasedMesh(mesh, eraseBoneIndexes);
 }
+
+export const isFacingCamera = (function() {
+  const objWorldDir = new THREE.Vector3();
+  const objWorld = new THREE.Vector3();
+  const camWorld = new THREE.Vector3();
+  return function isFacingCamera(obj) {
+    const playerCamera = AFRAME.scenes[0].systems["hubs-systems"].cameraSystem.viewingCamera;
+    playerCamera.getWorldPosition(camWorld);
+    obj.getWorldPosition(objWorld);
+    obj.getWorldDirection(objWorldDir);
+    return objWorldDir.dot(objWorld.sub(camWorld)) < 0;
+  };
+})();