Creating a React 360 App for Visualizing 3D models

Exploring the React 360 Framework and Visualizing 3D models

Thanks for reading…

To get started let’s go ahead and set up React and Download the necessary frameworks —

Great, now that you have the latest version of React 360 installed on your machine we can now create a new project on our system.

Make sure you CD into the proper directory

Once you’re in the proper folder execute

After the init statement you can name your project anything. This command will create a folder named “My 3D Project” and place the foundation of React 360 into the necessary sub-directories.

Once that’s finished installing you can go ahead and enter that directory

Exploring the Code

If you run

And then route to Localhost:8081/Index.html. This starts the React Native Package Manager and hosts the initial “hello world” view

If you are properly set up you should see the following screen displayed on your server

React 360 Baseline Homepage

Pretty Cool Already, Isn’t It?

This page allows you to experience React 360 off the bat, you can scroll around with your mouse to view the 3D environment. Before we add a model and change the background Image, let’s first understand what is going on here.

Go ahead and open up the folder in VSCode or another text editor. First we’ll check out the Index.JS folder.

The structure looks pretty similar to what we are used to seeing in React. At the top we are important components that will be used throughout the document.

App Registry allows us to connect components of the Index page to the ./Client.JS, which is the runtime and the code that actually displays the code onto the screen. React separated the runtime in order to make the code run quicker and more efficiently as it already takes lots of CPU.

StyleSheet gives us the ability to customize our Views and Text within the Index.js document so we don’t need to work with an external stylesheet.

View allows us to create a 2D surface, it also functions as a DIV container. So always make sure to surround the React documents with Views. The functions are similar to React Native. Also, just like a Div, you can style the View component by specifying its size, background color, content justification, etc. All of this can be done through the Stylesheet component

Text allows us to add text to 3D space. Text is typically nestled within a view component. It can also be styled in the Stylesheet.

Under the Render and Return functions you can see a standard React Layout with “View” instantiating the hierarchy instead of the typical Div Structure. You can see we have a parent View styled by Panel giving it a width of 1000 and a height of 600. The panel also specifies the color and opacity levels. We have other Views and text nestled within, all styled individually.

Under the Styles Panel (which on it’s own is very similar to CSS, so I assume you’re comfortable with it) we have the following line

From what I under this line is registering the Class ‘My3DProject’ and instantiating it to be accessible from the runtime, client.js. If we remove this line the entire class will disappear from the screen. Although we created a styled this view, the runtime actually places it in space.

This naturally leads us to the client.js document

If you open Client.js you will see the following

I want to focus on the renderToSurface() function.

Remember the App Registry we set up in the index.js? Well, this is where it connects. When you create a class intended for 2D, you need to create a surface in the runtime and connect the Registered Class to the component. You then run getDefaultSurface so you don’t need to specify any more information regarding the location of the surface and its position in space.

Modifying the document

Under the function, you will see the following line

This line here sets the background property, let’s start modifying our project by editing this photo. If you take a look at the react documentation there are multiple different ways to set the background and many different formats you can use as an image. The background can also be set in Index.js, but that is only necessary if the background is switching multiple times in an app. We are going to use a 360 Mono Equirectangular formatted image.

This can be easily sourced on the web, just search for it.

On Google, you might want to specify the Size to “Large for enhanced” visual clarity when landing on the site.

I found this nice photo of an Airplane Hanger

Now we just need to upload the photo to the static_assets folder of our project. If you look at Index.HTML, you can see that the source folder is already configured to “static_assets” so we don’t need to reference it every time.

Once it’s uploaded, change the compositor/setbackground function to search for the “‘Airplane.jpg’” image you just uploaded. If you refresh the page, you should see your image.

Now let’s go ahead and modify the Index.js container to change the styles of the Wrapper Container, make it smaller, and change the text to say Come Hang in My Hanger!”

If you look at my styles you can see I adjusted the height of the wrapper View, adjusted the font size, and border color.

Let’s go ahead and add an airplane 3D model under the header.

In order to do that, let’s first start by sourcing a 3D model online. React 360 only supports GLTF2 and OBJ files. I typically start by visiting Google Poly for the models as they have an array of objects offered in different formats.

So, I checked out the site, searched for a plane, and found a low-poly jet that looks pretty cool.

Now how do we add it to the scene?

First, download the Obj Files and add both the OBJ and MTL files to the static-assets folder

Next, React 360 has a component type called Entity which allows us to render 3D objects to the scene. So let’s create a new file called “plane.js” and start creating our entity

Since we are importing an Asset into an Entity component we need to import both asset and Entity from React 360. Now let’s create the class and add the Entity. We create a View container and within the view, we’ll create an Entity component pointing to the source files of our object

Next, we can style the entity, let’s start by transforming it’s scale, so it’s not overwhelming when we see it first on the page. We can do this by adding the style attributes to the entity itself. Your final Plane class should look like this

Now, we just need to link the model up with Index.JS by importing the file

Awesome, now you’re all linked up, but why is the plane not showing?

Don’t you have to render it within Index.Js?

No, we actually need to first Register the component and then register it in Client.JS. So add this line to the bottom of your index.js file

We’re not done yet…let’s shift back over to the Client.js and place the object in the scene.

In order to place a 3D object to a scene we need to render it to a location, different from rendering a surface, we need to start by importing the Location Component from React 360 and then setting the coordinates of the component

This location is one step down from the user and two back, so it should be easily viewable upon page load.

And now we’ll render the plane to the location using the following function and attached the registered class to the Root

Upon page load, you should now see the 3D model of the plane in your environment next to your views.

With that, I’m going to end off today’s blog! In the next one, I’ll be focusing on interacting with the 3D objects and turning our space into an interactive environment!

You can view the code for this project on my Github!

Designer, Developer, Musician.