静的ボタンは、私がvrButtonsの仕組みを理解VR

Question

を反応するが、どのように誰かがVR HUD上にオーバーレイされているボタンの作成について行くだろう。静的なボタンで、カメラの向きに関係なく画面に留まります。

Answer 1

これらのボタンのためにVRで凝視カーソルを使用することを決定したが、次の2つのオプションを持っている場合は、ここではいくつかの課題があります。

固定コンポーネントを作成できます。あなたはここにVRHeadModelを使用して、これらのいずれかの私の要旨をチェックアウトすることができます：あなたはこれを使用することができますhttps://gist.github.com/cidicles/b4e978d3f3e2de8b359bdc51b5fb3261

だけ好き：

<Fixed>Something You Want Fixed</Fixed>

をこのアプローチは、VRソリューションであり、この要素がで存在するであろうVRのシーンではありますが、アップデートの間に少しの遅れがあります。

もう1つの方法は、DOMオーバーレイを使用することです。この例をここで確認できます：https://github.com/facebook/react-vr/tree/master/Examples/DomOverlaySample

これは単なる伝統的なDOMなので、ここでの要素はVRには表示されません。

Answer 2

私は同じ問題があり、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オーバーレイの反応要素をレンダリングします。次に例を示します。

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; 

をそれは、外側にnoneからpointerEventsを設定すると、ボタンが置かれた場所にautoに再設定することが重要です。さもなければ、VRの動きはもはやマウスでは働いていません。

index.vr.jsでNativeModules（react-vrからインポートする）を使用してDashboardModule.jsからメソッドを呼び出すことができます。 NativeModuleの名前は、この場合DashboardModuleには、DashboardModule.jsのコンストラクタで設定されている

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

： はindex.vr.jsでDOMオーバーレイコールを表示するには。

Answer 3

私はしばらく前に戻り、これについて考えてみたいです。

主な質問は、これはVRのビューであるか、またはVRに入る人を意識せずにWebページで3Dビューを使用しているだけでしょうか？

VRで「常に静止している」というものを作成すると、ユーザーが振り払うことができない浮動オブジェクトが作成されます。それはVRで非常に、非常に奇妙に感じるでしょう。

頭が動かされると、正確なヘッドセットと光学系によっては、浮遊しているオブジェクトが他のオブジェクトに浸透しているように見えます。それは中立距離（焦点面）にあり、いくつかの焦点合わせの問題も引き起こします。これは、輻輳調節病問題を引き起こすかもしれない。 （これは実際には病気よりも疲労の問題ですが、YSMV - あなたの胃は異なることがあります）。

3D世界にいるときは、3D UIを作成することをお勧めします。難しいことですが、これは本当にあります。これは長年に渡って博士号のすべてが与えられた分野です。 （VRは普及した概念にもかかわらず、新しい）。

「無回答の回答」は申し訳ありません...これは少し役に立ちますと願っています。