Multiple Cylinder Surfaces

[Nyamkhuub]

How to config multiple cylinder surfaces around 360 degrees?

Hello, guys, I can config multiple Flat surfaces. But I wanna config multiple cylinder surfaces around 360 degrees. My problem is here: there two components are overlapping!

My fault, How to solve this issue? Client.js here:

import {ReactInstance, Surface, Location} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });
  const rightPanel = new Surface(1200, 1000, Surface.SurfaceShape.Cylinder);
  rightPanel.setAngle(0.6, 0);
  const leftPanel = new Surface(1200, 1000, Surface.SurfaceShape.Cylinder);
  leftPanel.setAngle(-0.6, 0);
  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('TshirtComponent'),
    leftPanel
  );
  r360.renderToSurface(
    r360.createRoot('FootWearComponent'),
    rightPanel
  );
  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('shop.jpg'));
}

window.React360 = {init};

[drubio1989]

Hey at Nyamkhuub. From my experience from creating react 360 applications and creating my Udemy course on react 360, at the current version, you are unable to create multiple instances of a cylinder panel. You can only position flat surfaces along an imaginary sphere. Cylinder Surfaces are always rendered at the front of where a user is facing and thus impossible to create more. If you create more, they will always overlap one on top of the other.

This is from the React360/js/Compositor/SurfaceManager.js file:

/**

• Recompute the position and rotation of the surface after any rotation or
• shape changes.
• Cylinders are always positioned at 0,0,0 with no rotation.
• Flat surfaces are oriented on the outside of a sphere, so we compute the
• position of the surface's center, and then build the rotation quaternion. */

The best you can do is create a very big panel, let's say 3000 pixels wide and then paste multiple views to create the illusion of multiple surfaces like the following photo. However, the downside of course is that this is one panel as opposed to multiple ones so managing state will be trickier and you won't be able to use Redux to communicate.

[Nyamkhuub]

@drubio1989 I see bro. Thanks a lot.

[KingZee]

Can you re-open this issue, maybe positioning Cylinder surfaces might be possible through native modules?