Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How To Configure React 360 for Google Cardboard

Tags:

ios

reactjs

virtual-reality

webvr

react-360

I'm doing some tests with React 360 and the only hardware I have at the moment is a Google Cardboard. I'm using VR Browser on iOS to view the content I've uploaded and it's working, but the stereoscopic image seems to be too far apart resulting in a "seeing double" effect. The canvas object also doesn't seem to extend the full width of the "VR Browser" app. There appear to be white borders on each side.

I can't seem to find any documentation on how to adjust the image in React 360 code to fit the lens distance of my Cardboard viewer.

How can I configure it to work? Is there a way to adjust these issues?

like image 241
Cmaxster Avatar asked Nov 30 '18 20:11

Cmaxster

People also ask

How do I use React Native 360?

Description React Native 360 exploits Google VR Cardboard SDK to load and display 360-degree panoramic photos and to define a view that renders a 360 video using OpenGL 2. Installation Open myProject.xcworkspace and under myProject > Build Settings under Build Options set ENABLE BITCODE to NO

What SDKs do I need to build on Google Cardboard?

We recommend that all developers actively building for Google Cardboard migrate to the new Cardboard SDK: iOS, Android NDK, Unity XR Plugin (SDK) The Daydream View VR headset is no longer available for purchase.

Can 360° media be viewed without VR hardware?

Although 360° media supports true stereoscopic VR playback through compatibility with VR platforms like Google Cardboard, it can also be displayed in a simple “magic window” that can be viewed from desktop browsers and mobile apps without any special VR hardware.

How do I embed 360° Media on my website?

For Android and Web developers, VR View allows you to embed 360° media into websites on desktop and mobile and native apps on Android. For iOS developers, the GVRkit library (provided as part of the Google VR SDK for iOS) provides similar functionality and includes samples demonstrating its usage. Panorama demonstrates how to embed 360° images.

1 Answers

I know this is a late answer, but if you haven't tried this yet, you can use this library to assist with a VR view.

WebVr Polyfill

This is specifically for iOS and I've found this to work far better than VR Browser. To implement this library is as simple as following the instructions. I do have a video on it along with a raycaster and gaze buttons found here. Hope it helps.

Viewing React 360 on mobile

like image 160
Dan Rubio Avatar answered Oct 17 '22 08:10

Dan Rubio
Sign in to Comment

Related questions

iOS UI Tests iMessage App/Extension
iOS - Today extension widget cleared over time
Camera won’t focus / stay focused in Appcelerator app
PFQuery FindObjectsInBackground Returns 0
SpriteKit Scene doesn't fit entire view on the iPhone X
React Native Project Running from Xcode but not from command line
What causes iOS 11 iPad recent apps dock icon to be grayed out?
SceneKit collision occasionally fails
Weakly link static library via -weak_library
iOS Custom animation for hidesBottomBarWhenPushed
How to get the original_application_version (the first purchased version number) out of iOS Receipt in iOS 11?
How to identify the cause of my SIGTrap Crash?
Embedding a UICollectionView in a UIScrollView works almost perfectly
CIImage contentsOfUrl Failed to convert UIImage to PNG
How can I detect when an element is visible after loading website in WKWebView?
Cocoapods always install old React (0.11.0)
Where does a host app handle NSExtensionContext#completeRequest?
CarPlay audio app can't start when launched from locked device
Observing changes to Realm result set
Equivalent to googlechrome://myurl.com for Safari

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!