search

facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.22k forks source link

Is there a way to set cubemap as background in react 360? #620

Open zmax92 opened 5 years ago

zmax92 commented 5 years ago

in client.js I can set background with

r360.compositor.setBackground(r360.getAssetURL('chess-world.jpg'));

but then image must be equirectangular. Is there a way to set background as cube map, or multiple 2d pictures like cubemap

larrylin28 commented 5 years ago

It's not supported yet. I'm working on to get it supported

IMFIL commented 5 years ago

Following !

zmax92 commented 5 years ago

Till this is supported, I have found this simple tool for converting cubemap to equirectangular... https://www.360toolkit.co/convert-cubemap-to-spherical-equirectangular.html

larrylin28 commented 5 years ago

The implementation of cubemap is already done and if you are using a local package synced with our Github repo you can already use it. Otherwise you can wait and we will have a npm release containing all recent changes.

You can follow the guide in the commit about how to use cubemap 360 photo and 360 video. https://github.com/facebook/react-360/commit/43393434e958d3210d23457dfb8e8f0acd4e310f

The 360 photo uses 1x6 cubemap, which is in the order of 

right, left, top, bottom, back, front.

from top to bottom,

The 360 video uses 3x2 cubemap with 1% expansion, which is in the order of 

right, left, top, bottom, front, back

from top left to bottom right. You can use https://github.com/facebook/transform360 to generate this format video