react-360中如何根据相机位置改变组件的位置？答案

【问题标题】：How to change the position of the component based on the camera position in react-360?react-360中如何根据相机位置改变组件的位置？
【发布时间】：2018-08-01 17:04:36
【问题描述】：

我想根据相机的方向更改控件组件的位置。我在 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);

【问题讨论】：

你能分享一下你到目前为止尝试过的代码吗？
我已经更新了问题

标签： reactjs react-360

【解决方案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};

【讨论】：