如何在 react-VR 中将某些元素固定在屏幕上答案

【问题标题】：How do I keep some element fixed on the screen in react-VR如何在 react-VR 中将某些元素固定在屏幕上
【发布时间】：2017-08-24 10:22:35
【问题描述】：

我想在 react-vr 应用中保持分数或健康栏始终可见。

我可以使用 VrHeadModel - 旋转、yawPitchRoll 和位置，但必须计算它只是为了让它保持固定......似乎我错过了一些东西。

我该怎么做？

【问题讨论】：

将此链接的 client.js 和 index.js 文件中的代码粘贴到我的文件中对我有用：github.com/facebook/react-360/tree/master/Samples/…

标签： react-360

【解决方案1】：

更新了 gist，因为它订阅了 HM，所以延迟更少：

https://gist.github.com/cidicles/b4e978d3f3e2de8b359bdc51b5fb3261

这就是我目前的做法。它具有视觉滞后并在循环中设置状态但达到了目标。

为 VrheadModel.rotation() 数组创建一个状态

constructor(props) {
  super(props);
  this.state = {
    hmRot: VrHeadModel.rotation()
  }
}

启动计时器

componentDidMount(){
  this.timer = setInterval(()=>{this.tick()}, 50);
}
componentWillUnmount(){
  clearInterval(this.timer);
}
tick(){
  this.setState({
    hmRot: VrHeadModel.rotation()
  });
}

在 0/0/0 创建一个视图，并将您的固定对象放置在场景中，就像您通常的世界一样。在主视图上设置旋转以匹配相机的旋转。

  render(){
    let {hmRot} = this.state;
    return (
      <View
        style={{
          position: 'absolute',
          layoutOrigin: [0.5, 0.5],
          transform: [
            {translate: [0, 0, 0]},
            {rotateX: hmRot[0]},
            {rotateY: hmRot[1]},
            {rotateZ: hmRot[2]}
          ]
        }}>
        <Text
          style={{
            position: 'absolute',
            layoutOrigin: [0.5, 0.5],
            backgroundColor: '#f00',
            transform: [
              {translate: [0, 0, -2]},
            ]
          }}>
          Fixed
        </Text>
      </View>
    );
  }

这里有 React VR 团队围绕此问题发布的相关帖子： https://github.com/facebook/react-vr/issues/261

【讨论】：

谢谢，它工作得很好，除非用户看起来很高，或者在地面上 - 然后我的分数（在屏幕顶部）漂移到屏幕上方
当我尝试调整rotationX为高或低时，它可以工作，除了向后看时，分数会在屏幕上移动
知道为什么向上或向下看时旋转会离开屏幕吗？
我看过这个，但无法重现您所看到的内容。我在这里发布了我的组件的完整要点：gist.github.com/cidicles/e90611844e9993d7c1337bb3c8afb23e
在帖子中为您添加了一个新要点，可以解决您遇到的任何问题。

【解决方案2】：

答案是使用多个表面：一个不锁头，另一个是锁头。

请参阅此处的“使用多个表面”：Surfaces - React 360

要让您的代码正常工作，请将示例中缺少的代码分别粘贴到您的 client.js 和 index.js 文件中：

这是一个工作示例的链接（部分粘贴在下面）：Headlocked Surfaces

import { Math as VRMath, ReactInstance, Surface } from "react-360-web";

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 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
      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));
      horizontalPanel.setAngle(horizAngle, -0.5);
      hvPanel.setAngle(horizAngle, vertAngle);
    },
    ...options
  });

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

window.React360 = { init };

在您的 client.js 中：

在ReactInstance 构造函数的frame 属性中，设置表面角度以匹配相机：水平或水平和垂直。

在您的 index.js 中：

记得将 React 组件注册到新的 headlocked 表面。

【讨论】：