정적 인 버튼 VR

Question

나는 vrButtons의 작동 방식을 이해하고 있지만, 누군가 vr hud에 오버레이 된 버튼을 만드는 방법에 대해 알고 있습니다. 정적 인 버튼이며 카메라 방향에 관계없이 화면에 머물러 있습니다.

Answer 1

VR에서이 버튼에 대해 시선 커서를 사용하기로 결정한 경우 몇 가지 문제가 있지만 두 가지 옵션이 있습니다.

고정 구성 요소를 만들 수 있습니다. 당신은 여기 VRHeadModel를 사용하여 이들 중 하나 내 요점을 확인하실 수 있습니다 : https://gist.github.com/cidicles/b4e978d3f3e2de8b359bdc51b5fb3261이

당신이 사용할 수있는 것처럼 :

<Fixed>Something You Want Fixed</Fixed>

이러한 접근 방식은 VR 솔루션이며,이 요소에 존재합니다 VR 장면이 있지만 업데이트 사이에 약간의 지연이 있습니다.

다른 방법은 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 예 도움말 및 여기에 페이스 북에 의해 만들어진 웹 사이트와 해결책을 발견 : 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'; 

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에 다시 설정하는 것이 중요합니다 :

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는 다음과 같이 할 수 있습니다 예를 들면 다음과 같습니다 . 그렇지 않으면 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에 들어가기위한 사람들을 생각하지 않고 웹 페이지에서 3D보기를 사용 중입니까?

VR에서 "항상 고정되어 있습니다"라는 것을 만들면 사용자가 떨칠 수없는 부동 개체를 만드는 것입니다. 그것은 VR에서 매우, 매우 이상하다고 느낄 것입니다.

더 세게, 그들이 머리를 움직이면, 떠 다니는 물체는 정확한 헤드셋과 광학 장치에 따라 다른 물체를 관통하는 것처럼 보일 것입니다. 그것은 중립 거리 (초점면)에있을 것이고 초점 문제를 일으킬 것입니다. 이것은 수렴 - 수용병 문제를 일으킬 수 있습니다. (실제로 이것은 병보다 피로 문제가 더 많지만 YSMV - 위장이 다를 수 있습니다.)

3D 세계에있을 때 3D UI를 만드는 것이 가장 좋습니다. 어렵습니다. 사실입니다. 이것은 박사 학위가 수년간 부여 된 분야입니다. (VR은 대중적인 개념에도 불구하고 새로운 것은 아니다).

"답변이없는 답변"에 대한 사과 ...이 답변이 조금 도움이 되었기를 바랍니다.