如何檢測React VR場景中的Gear VR輸入？

我正在嘗試使用React VR創建一個Web應用程序並使用Samsung Gear VR運行它。如何檢測React VR場景中的Gear VR輸入？

我在場景中看不到VR模式下的默認白點（VR指針）。因此諸如「onInput」和「onClick」等方法不起作用。如果我在VR模式之外查看相同的場景，即使使用Gear VR中提供的瀏覽器，相同的方法也可以很好地工作。

我錯過了什麼嗎？如何在Gear VR的VR模式下訪問這些方法？

在普通網絡瀏覽器（包括Gear VR中的）中正常工作的示例代碼，但不是當我在VR中時。

<Text 
    style={{ 
     // backgroundColor: '#777879', 
     fontSize: 0.2, 
     transform: [{translate: [0, 0, -5]}], 
     color: this.state.textColor 
    }} 
    onEnter={() => this.setState({textColor: 'gold'})} 
    onExit={() => this.setState({textColor: 'white'})}> 
    This text will turn gold when you look at it. 
</Text>

來源

2017-05-30 gdebojyoti

您需要添加一個raycaster：

要做到這一點，你需要做到以下幾點：

在你的項目中，去<project root>/vr/client.js。在init方法之前，添加一個SimpleRaycaster常數。

const SimpleRaycaster = { 
    getType:() => "simple", 
    getRayOrigin:() => [0, 0, 0], 
    getRayDirection:() => [0, 0, -1], 
    drawsCursor:() => true 
}; 

function init(bundle, parent, options) { 

//...

然後，在init方法時，設置cursorVisibility: visible和raycaster添加的raycasters陣列：

function init(bundle, parent, options) { 
    const vr = new VRInstance(bundle, 'Example', parent, { 
     raycasters: [ 
      SimpleRaycaster // Add SimpleRaycaster to the options 
     ], 
     cursorVisibility: "visible", // Add cursorVisibility 
     enableHotReload: true, 
    ...options, 
    }); 
    vr.render = function() { 
    // Any custom behavior you want to perform on each frame goes here 
    }; 
    // Begin the animation loop 
    vr.start(); 
    return vr; 
} 

window.ReactVR = {init};

就是這樣。現在你應該在視圖的中間有一個白點。

來源

2017-07-06 12:30:52

感謝您的回答。這在Chrome Canary中似乎工作正常。懸停效果現在正在工作。 :) 我還沒有嘗試與GearVR。我需要檢查點擊操作是否正常。一旦我這樣做了，我會在這裏更新並將您的答案標記爲已接受。再次感謝。 – gdebojyoti

@gdebojyoti，這是最簡單的raycaster（光標），因爲它是基於注視的，所以它可以和GearVR一起工作，沒有任何問題。但是，它不適用於控制器。。如果您想使用鼠標或控制器作爲raycaster，則需要使用自定義raycaster。目前，我正在開發一款適用於所有設備和所有啓用了WebVR的瀏覽器的通用raycaster。當我準備分享它時，我會更新你。 –

如何檢測React VR場景中的Gear VR輸入？

回答

相關問題