Once you have created an application like a 3D configurator under React VR, you can port it to the new React 360 Runtime to take advantage of some of the performance benefits. The first thing you need to do is go through your code and replace all references to the React VR package with the new React 360 package. At the moment, the package still exports all legacy components, but this may change in the future.

migration React VR

Integrate a legacy app into the new runtime.

You must update to use the new runtime. It is recommended that you create a new React 360 project with the CLI and then copy your React code to the generated Index.js. Because all React VR code is built in a 3D coordinate system that is aligned to (0, 0, 0, 0), you should mount your legacy app at the system’s default 3D position.

Copy to Clipboard

This gives you the advantage of an improved rendering path and configurable input options. Once this works, we recommend that you keep track of things and migrate the user interface of your application to use interfaces.

Move to interfaces.

If you used to design your user interface with views and text in space, where everything was measured in meters, you’ll find surfaces that make it easier to work with. They allow you to think in pixels and simplify the process of designing content around the user. For example, surfaces and their content are always user-centric, so you don’t have to think about rotations in space.

Currently, surfaces are implemented at a fixed distance of four meters with an initial pixel density to optimize clarity. The density can be adjusted, but it is recommended to use the standard for most situations.

Increase your conversion rate.

We help you to generate more inquiries from your website with Virtual Reality content.

More informations

General patterns.

With earlier versions of React VR, it was common for developers to develop the concept of interconnected spaces by placing links or doorways at specific positions around a 360 photo. You can still achieve this effect by extending a cylinder surface to wrap itself around the scene and placing the links with absolute positioning.

We hope we were able to give you a brief introduction to working with React 360. If you have any questions or suggestions, please feel free to contact our experts in our forum.

Thank you very much for your visit.