how can i render 360image using gyroscope?

[sjt145]

• [x] Review the documentation: https://docs.viromedia.com/
• [x] Search for existing issues: https://github.com/viromedia/viro
• [x] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version:IOS version 12.1
3. Version: ViroReact 2.9.1 and React Native 57
4. Device(s): Iphone SE

Description

I have developed an app viewing viromedia documentation for VR360 Photo tour just like the viromedia app... But they havent given any component to render 360image as shown in viromedia app for 360Photo tour... I need to intergrate same functionality for my app...so is there any example for 360Photo tour in react-viro... please provide with code as I am new to Viromedia...

Thank you

[Nishit-Chauhan]

i also need to integrate 360 Photo tour in my app, but can't able to find any solution for that is there any example for integrating 360 photo tour using react viro

[jack-solutions]

Hi any update on it? it would be great if someone from the community can shed some lights on it? we are also looking forward for the similar features

[jack-solutions]

i have seen in the viromedia app demos, one of the demo has 360 view of image when you move the phone to different direction, but to implement that there is no function listed in the documentation, any help would be appreciated

[renatocsare]

Hi @sjt145 , I don't know if I understood perfectly what you need, but in the documentation of ViroMedia, contrary to what you said, there is a component to render 360 images:

https://docs.viromedia.com/docs/viro360image

tks

[RinorDreshaj]

this is how I've been using it

renderImage() {
    return (
      <ViroScene>
        <Viro360Image source={ require('./res/360picture.jpg')} />
      </ViroScene>
    )
  }

render() {
  return (
   <ViroVRSceneNavigator
     vrModeEnabled={false}
     hdrEnabled={true}
     initialScene={{scene: this.renderImage.bind(this) }}
   /> );
}

[adamnurdin01]

Hi Gaes

is there a way to get X,Y,Z position of Viro360Image ? can we zoom in or zoom out panorama ?

[sanoopks]

1. 360 Image rotation using gyroscope

import {
  gyroscope,
  SensorTypes,
  setUpdateIntervalForType,
} from 'react-native-sensors';

Create these variables

const cameraRef = useRef(null);  /* Camera component ref props variable */
const giroInterval = Platform.OS == 'ios' ? 16.7 : 10.99;
const cameraRotationXRef = useRef(0);
const cameraRotationYRef = useRef(0);

You can call this function to listen gyroscope and update the camera rotation

const gyroSubscription = () => {
    setUpdateIntervalForType(SensorTypes.gyroscope, giroInterval);
    return gyroscope.subscribe(({x, y, z, timestamp}) => {
        const nx = parseFloat(x.toFixed(3));
        const ny = parseFloat(y.toFixed(3));
        /* Vertical movement */
        if (nx > 0) {
          /* Moving to top */
          let newRotX = cameraRotationXRef.current + nx;
          cameraRotationXRef.current = newRotX;
          const rot = [
            cameraRotationXRef.current,
            cameraRotationYRef.current,
            0,
          ];
          if (cameraRef.current)
            cameraRef.current.setNativeProps({rotation: rot});          
        } else {
          /* Moving to bottom */
          /* An adjustment to stop automatic movement of panoramic image to left because of gyrscope always returns x,y,z value */
          if (nx < -0.05) {
            let newRotX = cameraRotationXRef.current + nx;
            cameraRotationXRef.current = newRotX;
            const rot = [
              cameraRotationXRef.current,
              cameraRotationYRef.current,
              0,
            ];
            if (cameraRef.current)
              cameraRef.current.setNativeProps({rotation: rot});            
          }
        }

        /* Horizontal movement */ 
        if (ny > 0) {
          /*  Moving to left */ 
          /*  An adjustment to stop automatic movement of crib to left because of gyrscope always returns x,y,z value */ 
          if (ny > 0.05) {
            let newRotY = cameraRotationYRef.current + ny;
            cameraRotationYRef.current = newRotY;
            const rot = [
              cameraRotationXRef.current,
              cameraRotationYRef.current,
              0,
            ];
            if (cameraRef.current)
              cameraRef.current.setNativeProps({rotation: rot});
          }
        } else {
          /* Moving to right */
          let newRotY = cameraRotationYRef.current + ny;
          cameraRotationYRef.current = newRotY;
          const rot = [
            cameraRotationXRef.current,
            cameraRotationYRef.current,
            0,
          ];
          if (cameraRef.current)
            cameraRef.current.setNativeProps({rotation: rot});
        }
    });
  };

This is the camera component

<ViroCamera
    rotation={[0, 0, 0]}
    position={[0, 0, 0]}
    ref={cameraRef}
    fieldOfView={fov}
  />

2. Zooming in Viro360Image

You can use fieldOfView property of ViroCamera component.