Как изменить положение компонента в зависимости от положения камеры в реакции-360?

Я хочу изменить положение компонента управления в зависимости от направления камеры. Я попробовал поверхности с блокировкой головы в примере реакции-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
person Amitt Bhardwj    schedule 01.08.2018    source источник
comment
можете ли вы поделиться кодом того, что вы пробовали до сих пор?   -  person Yuca    schedule 01.08.2018
comment
я обновил вопрос   -  person Amitt Bhardwj    schedule 03.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Ответ на эту проблему был дан на странице проблем Github для реакции 360. Однако мне по-прежнему приходилось вызывать функцию Math из нативного объекта окна JavaScript.

Ниже код работает хорошо:

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};
person Pablo Darde    schedule 24.05.2020