Question

我想根据相机的方向更改控件组件的位置。我在react-360示例https://github.com/facebook/react-360/blob/master/Samples/HeadlockedSurfaces/index.js中尝试了头部锁定的表面但是我无法更改组件的相机角度。

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

react-360 Github issues page中回答了该问题。但是，我仍然必须从本地JavaScript窗口对象调用Math函数。

下面，代码运行良好：

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};

如何在react-360中根据相机位置更改组件的位置？

1 个答案: