4

I had started creating a project with react-vr and had laid out the object in a spherical manner around the user. Or for example, the 3 objects had positions (1, 1, 1), (2, 2, 2) and (3, 3, 3).

style: { transform: [{ translate: [1,1,1] }] }

On moving to react-360 the same positions of the objects seem quite different. From the initial view, all three object appear to be in a straight vertical column.

  1. Is there some major difference in the layout structure of the two that I've missed here?
  2. Also the order of rendering of these objects differ the output that we are getting in react-360.
pnk6
  • 276
  • 3
  • 15

1 Answers1

4

There is a difference that by default it's rendered to 2D Surface, not 3D scene. I must say for me it's quite strange and i also struggled with this. Especially since they changed it significantly and is hard to find any info about it in docs (if it even is there because I found a solution in code). So, in client.js file you have to change this

  r360.renderToSurface(
    r360.createRoot('YourProject', { /* initial props */ }),
    r360.getDefaultSurface()
  );

to this

  r360.renderToLocation(
    r360.createRoot('YourProject', { /* initial props */ }),
    r360.getDefaultLocation()
  );

Then you will be able to position objects like in React VR.

Alan Wołejko
  • 442
  • 2
  • 5
  • 20
  • Thank you! That makes sense now. But as far as React360 is considered, `renderToSurface` is a better idea than `renderToLocation`? – pnk6 Jun 13 '18 at 13:01
  • I think it depends, for me since I wanted to use it still like ReactVR `renderToLocations` was an obvious choice. I think you can also mix them somehow but didn't checked it yet. – Alan Wołejko Jun 14 '18 at 07:49