How to change the position of the component based on the camera position in react-360?

Question

I want to change the position of my controls component based on the direction of the camera. I tried head locked surfaces in the react-360 example https://github.com/facebook/react-360/blob/master/Samples/HeadlockedSurfaces/index.js But I couldn't change the camera angle of the component.

function init(bundle, parent, options = {}) {
const controlsPanel = new Surface(800, 400, Surface.SurfaceShape.Flat);
controlsPanel.setAngle(-0.2 , -0.5);


const cameraDirection = [0, 0, -1];

const r360 = new ReactInstance(bundle, parent, {
enableHotReload: true,
fullScreen: true,
 frame: () => {
   const cameraQuat = r360.getCameraQuaternion();
   cameraDirection[0] = 0;
   cameraDirection[1] = 0;
   cameraDirection[2] = -1;
   // cameraDirection will point out from the view of the camera,
   // we can use it to compute surface angles
   VRMath.rotateByQuaternion(cameraDirection, cameraQuat);
   const cx = cameraDirection[0];
   const cy = cameraDirection[1];
   const cz = cameraDirection[2];
   const horizAngle = Math.atan2(cx, -cz);
   const vertAngle = Math.asin(cy / Math.sqrt(cx * cx + cy * cy + cz * cz));
   controlsPanel.setAngle(horizAngle, -0.5);

 },
...options,
});

r360.renderToSurface(r360.createRoot('VideoControlsContainer'), controlsPanel);

Answer 1

This issue was answered in the react-360 Github issues page. However, I still had to call the Math function from the native JavaScript window object.

Below, the code working well:

import { ReactInstance, Surface } from 'react-360-web';
import { Math as GLMath } from "webgl-ui";

function init(bundle, parent, options = {}) {
  const horizontalPanel = new Surface(300, 300, Surface.SurfaceShape.Flat);
  const hvPanel = new Surface(300, 300, Surface.SurfaceShape.Flat);

  horizontalPanel.setAngle(0, -0.5);

  const cameraDirection = [0, 0, -1];
  const { rotateByQuaternion } = GLMath;
  console.log('Math: ', Math)

  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    frame: () => {
      const cameraQuat = r360.getCameraQuaternion();
      cameraDirection[0] = 0;
      cameraDirection[1] = 0;
      cameraDirection[2] = -1;
      // cameraDirection will point out from the view of the camera,
      // we can use it to compute surface angles
      rotateByQuaternion(cameraDirection, cameraQuat);

      const cx = cameraDirection[0];
      const cy = cameraDirection[1];
      const cz = cameraDirection[2];

      const horizAngle = Math.atan2(cx, -cz);
      const vertAngle = Math.asin(cy / Math.sqrt(cx * cx + cy * cy + cz * cz));
      horizontalPanel.setAngle(horizAngle, -0.5);
      hvPanel.setAngle(horizAngle, vertAngle);
    },
    ...options,
  });

  r360.renderToSurface(r360.createRoot('HorizontalPanel'), horizontalPanel);
  r360.renderToSurface(r360.createRoot('HVPanel'), hvPanel);

  r360.compositor.setBackground('./static_assets/360_world.jpg');
}

window.React360 = {init};