Question

我理解vrButton是如何工作的，但是有人会如何创建覆盖在vr hud上的按钮。静态的按钮，无论相机如何定位，都会保留在屏幕上。

Answer 1

我遇到了同样的问题，我使用了DOM Overlay。我在https://github.com/facebook/react-vr/tree/master/Examples/DomOverlaySample示例和Facebook制作的网站的帮助下找到了解决方案：https://apps-1523878944298007.apps.fbsbx.com/instant-bundle/1523857704355225/1209114435855717/index.html

更新：我在index.vr.js的帮助下添加了一个带回调的解决方案：https://github.com/facebook/react-vr/issues/418

首先修改cient.js：

import '../process';  //important to avoid a error for DOM
import {VRInstance} from 'react-vr-web';
import DashboardModule from "../DashboardModule";

// Create a div where the overlay will be displayed in the DOM.
const domDashboardContainer = document.createElement('div');
domDashboardContainer.id = 'persistent-overlay';
// Create an instance of the module, to be registered below.
const domDashboardModule = new DashboardModule(domDashboardContainer);

function init(bundle, parent, options) {
  const vr = new VRInstance(bundle, 'SuMDemo', parent, {
    // Show a gaze cursor.
    cursorVisibility: 'visible',
    ...options,

    // Register dom overlay module upon initialization.
    nativeModules: [domDashboardModule],
  });

   // Inject DOM overlay container to the player so that it is rendered          properly.
   vr.player._wrapper.appendChild(domDashboardContainer);

   // Attach the React Native Context to the Model
   domDashboardContainer._setRNContext(vr.rootView.context);    

  vr.render = function() {
    //executing on every render of the vr app
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

window.ReactVR = {init};

不要忘记导入process.js（可在此处找到https://github.com/facebook/react-vr/blob/master/Examples/DomOverlaySample/process.js）。这是一种避免错误的解决方法。

DashboardModule.js呈现DOM Overlay的react元素。这是一个例子：

import React from 'react';
import ReactDOM from 'react-dom';
import {Module} from 'react-vr-web';

import Dashboard from './DashboardLayout';

export default class DashboardModule extends Module {
    constructor(overlayContainer) {
        super('DashboardModule');       //Name for the call in index.vr.js
        this._overlayContainer = overlayContainer;
        this._rnctx = null;     //react native context for callback
    }

    // This method call opens up the overlay for display.
    showDashboard(props, callBackBtn) {
        this.callBackBtn=callBackBtn;
        ReactDOM.render(
            <Dashboard
                {...props}
                onClickDash={()=>this.buttonClicked()}
            />,
            this._overlayContainer
        );
    }

    //setter for context
    _setRNContext(rnctx) {
        this._rnctx = rnctx;
    }

    buttonClicked() {
        console.log("Dashboard Button Clicked");
        //here invoke the Callback.In the second parameter ([]) you can pass arguments
        this._rnctx.invokeCallback(this.callBackBtn, []);
    }

    hideDashboard() {
        ReactDOM.unmountComponentAtNode(this._overlayContainer);
    }
}

DashboardLayout.js可能如下所示：

import React from 'react';

const Dashboard = props => {

    return (
        <div style={{
            bottom: 0,
            left: 0,
            position: 'absolute',
            right: 0,
            top: 0,
            pointerEvents: 'none',    //important that the movement is possible
        }}>
            <div style={{
                background: 'rgba(0, 0, 0, 0.7)',
                border: '2px solid #ffffff',
                borderRadius: '5px',
                top: '20px',
                display: 'inline-block',
                height: '40px',
                width: '40px',
                marginLeft: 'auto',
                padding: '4px',
                position: 'absolute',
                right: '18px',
                verticalAlign: 'top',
                opacity: '1',
                cursor: 'pointer',
                pointerEvents: 'auto',
            }}
                 onClick={props.onClickDash}>
                <div style={{
                    margin: '4px',
                    width: '32px',
                    height: '32px',
                    backgroundImage: 'url(../static_assets/icons/menu.png)',
                }}>

                </div>
            </div>
        </div>
    );
};

export default Dashboard;

在外部将pointerEvents设置为none并将其再次设置为按钮所在位置的auto非常重要。否则，VR移动不再适用于鼠标。

您可以通过DashboardModule.js中的index.vr.js通过NativeModules（从react-vr导入它们）调用方法。要在index.vr.js：

中显示DOM叠加调用

NativeModules.DashboardModule.showDashboard(
          {
              someProps: 1        //here pass some props
          },
          ()=>this.callBackBtn()      //this is the callback function that should be called
      );

NativeModule的名称在DashboardModule.js的构造函数中设置，在本例中为DashboardModule。

Answer 2

我想退后一步，想一想。

主要问题是，这是针对VR视图还是您只是在网页上使用3D视图而不打算让人们进入VR？

当你创建一些在VR中“始终保持静止”的东西时，你正在做的是创建一个用户无法摆脱的浮动对象。 VR中会感觉非常非常奇怪。

更糟糕的是，当他们移动头部时，浮动物体似乎会穿透其他物体，具体取决于您的精确耳机和光学元件。它将处于中性距离（焦平面）并引起一些聚焦问题。这可能会引发聚散性疾病问题。（这实际上更多的是疲劳问题，而不是疾病，但YSMV - 你的胃可能会有所不同）。

当您处于3D世界时，最好制作3D用户界面。这很难，它确实是 - 这是一个多年来获得博士学位的领域。（VR不是，尽管流行的概念，新的）。

对不起“非答案答案”......我希望这有点帮助。

React VR中的静态按钮

2 个答案: