Search code examples
javascriptreactjsgatsbypanoramasreact-360

How to create a 360 panorama image in Gatsby/React?

I am trying to understand how to create a basic 360 Panorama image in react/gatsbyjs where the user is able to infinite scroll the image horizontally. Here is the result I'm trying to achieve:

sample site

I could easily achieve this result with the help of a jquery plugin in normal html/css/js, however, I couldn't figure out how to properly do it the "react way". I've tried using react-vr, however, when I try to import all the needed modules from react-vr, the browser throws me the following error:

enter image description here

I'm still learning React, So any pointers or suggestion would be much appreciated!

here's my component code:

import React, { Component } from 'react'
import { View, Pano } from 'react-vr'
import { Link } from 'gatsby'
import FooterMenu from '../../components/footer-menu/footer-menu'
import Content from '../../components/content-container/content'

import './upper.sass'

const UpperPage = () => {
  return (
    <Content>
      <div id="view-1" class="view-content">
        <Link to="/views" className="back-btn">
          &#8592; back
        </Link>
        <View>
          <Pano source={{ uri: '../../images/views/high.jpg' }} />
        </View>
      </div>
      <FooterMenu />
    </Content>
  )
}

export default UpperPage
Solution

  • I'd suggest to use aframe-react instead of react-360 (rebranded react-vr). I simply integrated it with Gatsby project:

    1. Follow installation guide for aframe-react to add required dependencies to Gatsby project:

      npm install --save aframe aframe-react

    2. Create Gatsby component/page (for example: src/pages/virtual-reality.tsx) with content below, and use it:

      import 'aframe';
import 'aframe-particle-system-component';

import React from 'react';
import { Entity, Scene } from 'aframe-react';

const VRScene: React.FunctionComponent = () => {
  return (
    <Scene>
      <Entity
        geometry={{ primitive: 'box' }}
        material={{ color: 'red' }}
        position={{ x: 0, y: 0, z: -5 }}
      />
      <Entity particle-system={{ preset: 'snow' }} />
      <Entity light={{ type: 'point' }} />
      <Entity gltf-model={{ src: 'virtualcity.gltf' }} />
      <Entity text={{ value: 'Hello, WebVR!' }} />
    </Scene>
  );
};

export default VRScene;

    3. Run your Gatsby project by npm start:

      ]

    How is React 360 Different from A-Frame?

    A-Frame is a framework for building VR worlds using declarative HTML-like components. It has a rich collection of available components from a vibrant community, and is great for creating intricate 3D scenes that can be viewed in VR. We believe that React 360 serves a different use case optimized around applications that rely on user interfaces, or are event-driven in nature. Look through our examples to see the types of things you can easily build with React 360.

    Trying to figure out which framework is right for you? Here's a quick test. If your application is driven by user interaction, and has many 2D or 3D UI elements, React 360 will provide the tools you need. If your application consists of many 3D objects, or relies on complex effects like shaders and post-processing, you'll get better support from A-Frame. Either way, you'll be building great immersive experiences that are VR-ready!