How to Build a Simple 360 Degree Image Slider with React 360

What is React 360?

React 360 is a framework used for creating 3D and VR interfaces built on top of React allowing you to use familiar tools and concepts to create immersive 360 content on the web.

What We’ll Be Building

In this Tutorial we will be exploring how to setup React 360 and implement some basic functionality and interaction to create a scrollable 360 degree gallery featuring Van Gogh’s paintings that users can explore.

Van Gogh 3D Slider with React 360
Van Gogh 3D Slider with React 360

Prerequisite Knowledge / Requirements

Installing React 360 and Setup of Project Files

First you are going to need to install the React 360 library as well as dependencies using NPM, so create a folder for your project and run the following terminal command:

Next we want to initiate a new project and call it slideshow (or whatever you wish to call the project) and run the following command in the terminal to create a new react 360 project in your folder.

OK, now finally to install the dependencies and start the project locally type:

This should now boot up the page on your local machine at http://localhost:8081/index.html, so open up that address and you should see the default project loading up in your browser.

Example React 360 Project
Example React 360 Project

Prepare and Load Assetsvisual code view of directory

Now we want to load the images we want to present to the user, so we need to locate the folder in our freshly created React 360 project to add the images to – so find some appropriate images you want to load into your project and put them into the static_assets folder for use in your app.

Load Images

Next logically we are going to want to load these assets in for use in our app, which we do in the client.js file in our project. We want to edit the array of props which is passed to the application and add our own images* , open up client.js and paste the following code into it:

*Caveat – if you are using different images in your static_assets folder you will have to load the paths to those images instead of those listed in the code below!

Create the Slider Interface for the Application

Next we are going to want to create the slider interface itself as well as define the applications functionality which we can do by editing index.js. The following code takes a state object, stores the index of the current photo as well as rendering two buttons which either increase or decrease the index position. Have a look below and see if you understand then paste this into your index.js file before moving onto the next part.

This creates the functionality to slide for our slideshow as well as resetting the background image, but we still need to build our users interface so we are going to want to add the following code in index.js in it’s render() method.

This adds the components we require for the user to interact with a slider as well as defining some styles for these components stored in a const variable called style.

Now after saving and reloading app you should see the following, and it’s all done!

starry night in react 360 app
Starry Night displayed in the react 360 app

If you are stuck and need help, you can refer to the completed solution.

Related Posts