Tutorial: How to Create and Publish a VR Scene using STYLY Studio

Top Page of STYLY Studio

This tutorial is an introduction on how to create, maintain, share, and publish a VR scene.

General tips on how to use STYLY Studio will also be provided. At the end of this tutorial, you will be able to create and maintain a VR space and publish it for the world to see.

Let’s get started on how to create, maintain, share, and publish your own VR space.  

How to Create and Maintain a VR Scene

Scene Manager Screen [Scenes]

Let’s get started on how to create a new VR scene and maintain it.

Scene(s) refers to a VR space. In the scene manager, you can delete, copy, modify name, and create a new scene.

The scene manager will open when you start the STYLY Studio from the STYLY Studio main page.

When you use STYLY Studio for the first time, you are required to create a new scene.

To create a new scene, click the [Create] button before inputting a scene name.

STYLY Studio will start. To continue learning how to use the STYLY Studio page please follow the tutorial below.

 

Instruction for the Scene Manager Screen

Scene Manager Screen [Create Scene]

We will explain the details of the Scene Manager Screen.

If you have already created a scene you can continue to the next section.

Choose the Scenes tab to view your scenes.

Menu instruction for Scene Manager Screen.

Menu tab Scenes/Create Scene tabs.
You can copy, delete, confirm/edit the scene name, and confirm publish/invisible setting when you choose the scene tab.
You can create a new scene when you choose the Create Scene tab.
Thumbnail You can check the thumbnail pictures of the scene.
Publish/invisible You can check the published status of the scene.
“Publish” means published. “Private” means invisible.
Scene name You can check the scene name. You can modify the scene name by clicking on the scene name.
You will be redirected to an edit page. Click the [Enter] key when you complete editing.
Edit button You can switch visible/invisible or the copy/delete button
Copy button You can copy the scene.
Delete button You can delete the scene. You need to be cautious since you will not be able to restore the scene once it is deleted.
Close button You will go back to the STYLY Studio. You won’t able to return to the STYLY Studio page if you didn’t create a scene.
Undo button You will move to the STYLY Studio home screen.

 

How to Use STYLY Studio

We will now explain how to use STYLY Studio.

This tutorial will teach you how to change the point of view and how to insert assets and use them.

Point of View, Translate/Rotate

This section introduces how to change the point of view on STYLY Studio

Zoom In/Zoom Out the Point of View

Zoom In/Zoom Out to change the Point of View on STYLY Studio

You can Zoom In/Zoom Out of the Point of View by using your mouse or track pad.

How to Operate: For Windows/Mac

Edit
Used Device How to Operate
Mouse Slide the scroll wheel up or down
Track pad Slide two fingers up or down

Translation of the Point of View

Translation of the Point of View on STYLY Studio

You can translate point of the view up and down by using your mouse or track pad.

How to Operate: For Windows/Mac

Edit
Used Device How to Operate
Mouse Press and hold the mouse’s scroll button or press and hold the right mouse button and shift the mouse left, right, up, or down to translate the point of view
Track pad Press and hold the right side of the track pad and slide your fingers left, right, up, or down to translate the point of view

Rotating the Point of View

Rotate the Point of View on STYLY Studio

You can rotate the point of view by using your mouse or track pad.

You will be able to rotate around your Start Position.

How to Operate: For Windows

Edit
Used Device How to Operate
Mouse Press and hold the left mouse button while moving the mouse
Track pad Press and hold the left side of the track pad while moving your fingers around the track pad 

 

For Mac

Edit
Used Device How to Operate
Mouse Press and hold the left mouse button while moving the mouse
Track pad Press and hold the left side of the track pad while moving your fingers around the track pad

About Start Position

Start Position on STYLY Studio

The Start Position is the initial starting position of your VR space.  

Instructions for the STYLY Studio Screen

Explanation of the STYLY Studio screen

We will now explain the main operating functions on the STYLY Studio screen.

There are 4 main areas that will be explained in detail.

Top Button

Top Button on the STYLY Studio

Menu Instructions

Edit
Scenes button Opens the Scene Manager
Assets button A scene will open in order to insert assets.
There are assets which are 3D objects, images, Instagram, musics, movies and PDF(Books).
Publish button Publish screen will open in order to publish the scene.

 

Hierarchy Menu

Hierarchy Menu on STYLY Studio

Hierarchy menu is a management menu where assets like Directional Light, [Ground] DefaultGround, [Skybox] Default, and 3D objects can be edited, copied, or deleted.

In a new scene, there are 3 default assets automatically inserted in the menu.

Directional Light is a light which illuminates the whole space much like the Sun. [Ground] DefaultGround is a floor/ground setting. [Skybox] Default is a sphere covered with full screen.

Menu Instructions

Edit
Top bar You can switch to visible/invisible setting on the hierarchy menu.
Image icon You can switch to visible/invisible setting through the scene name.
Asset name You can edit the name by clicking on the asset’ name.
Copy button You can copy the asset.
Delete button You can delete the asset.

  Functional Instructions

Edit
Focus on the point of view Focus on the point of view by double clicking on the hierarchy menu.
Copy to the scene by drag & drop You can copy to the scene by drag & drop from the hierarchy menu.

 

Scene Gizmo

Scene Gizmo

The Scene Gizmo shows the direction of the camera. Also, you can switch the camera’s direction to the forward viewpoint by clicking a cone colored red, green, or blue.

Side Button

Side Button on STYLY Studio

Menu instruction

Edit
Global button
※It shows when you choose the asset in the hierarchy menu.
Selecting the Global button can change an axis when you rotate/scale/translate.
In case of “On”, you can see the direction of the scene by rotating/scaling/translating.
In case of “Off”, you can see the direction of the asset by rotating/scaling/translating.
Move/Rotate/Scale button
※It shows when you choose the asset in the hierarchy menu
You can switch to rotate/scale/translate (asset operation).
You can learn how to translate/rotate/translate the asset in the article of how to operate the asset.
Reset position button Reset the point of view to the Start Position.
Shortcut button You can see a list of shortcut keys on STYLY Studio. Here is the list of the shortcut keys.

Insert an Asset

You can create your own original scene by inserting the asset.

In this section, we will introduce how to insert an asset and also introduce a few kinds of assets.

Lets try to create a new scene using the simple procedure below.

Few Kinds of Assets

The Asset list

The Asset list will appear by clicking the Asset button in the Top Button area.

In the Asset list,  there are 3D Model, Image, Instagram, Music, Video, and Book (PDF).  

Menu Instructions

Edit
3D Model You can choose 3D objects.
There are 3D objects on Google Poly, Directional Light (Light), Skybox (Sphere), Effects, Filter and 3D objects which can be uploaded.
Image You can insert photos. There are many kinds of photos to paste in the screen.
And you can also animate or put movements to photos. Some acceptable formats include 360 photo, PNG, and JPEG.
Instagram You can insert photos from Instagram.
Animated photos will appear from an account when you link your Instagram account.
Music You can insert music.
Some acceptable formats include MP3 and Soundcloud.
Video You can insert movies.
Some acceptable formats include YouTube.
PDF You can insert PDF files.
You can see PDF files as if you are reading books in the VR space when you insert them.

Insert an Asset

We will introduce how to insert an asset.

Lets try to choose and insert an asset to the scene. Create a simple scene by using a Skybox (Sphere), Ground (floor) and 3D object and add them to the scene.

Change the Skybox (Sphere)

Click the Assets button on STYLY Studio

We will introduce how to change the Skybox (Sphere). Click the Assets button.

Click a 3D Model in the asset list

Click the 3D model.

Click a Sky and Grounds in the asset list

Click the Sky and Grounds.

In the Sky and Grounds, you can insert some assets such as Lights (Directional Light), a sphere (Skybox), a floor (Ground) to the scene.

Click a [Skybox] in the asset list


Click the Optional [Skybox].
 

After changing the Skybox in STYLY Studio

The Skybox was changed.

Default skybox can be switched to different ones.

Try switching to different kinds of Skyboxes, these can change your scene greatly.

Insert a Ground (floor)

Delete a [Ground] Default Ground in STYLY Studio

Next, insert a Ground (floor) in the scene.

Delete the [Ground] Default Ground from the hierarchy menu by selecting the Trash button.

Click the Assets button in STYLY Studio

Click the Assets button.

 

Click the 3D Model button in the Asset list

Click the 3D Model.

 

Click a Sky and Grounds in the Asset list

Click a Sky or Grounds.

 

Click [Grounds] in the Asset list

A [Ground] asset will appear when you scroll down.

Click and select the optional [Ground].

 

After inserting a Ground in STYLY Studio. A Ground will appear. 

Insert 3D Objects in the Scene

Click the Asset button in STYLY Studio

Insert a 3D Object to the scene.

This time, we will insert the 3D object from Google Poly. Firstly, click the Asset button.

Click the 3D Model button in the Asset list

Click a 3D Model.

 

Click a Poly 3D Model in the asset list

The Poly 3D Model, you can search and insert 3D objects off of Google Poly and add them to your scene.

You can narrow down your search by clicking on the different category buttons. Also, you can search for various 3D objects using the search bar. Search a keyword or subject to find the object that you want to use.

Hit the [Search] button to find 3D objects on Google Poly to add. 

Click the Search button after inputting a keyword in the search form

Search and Insert a 3D object to the scene.

In this example, we searched for “animals” in the search form.

We then inserted an elephant by clicking on the [Elephant] button.

A 3D image of an elephant will appear in the scene after you click the button.

After inserting a 3D object in STYLY Studio

The elephant has been added to scene, but it is out of place.

You can use the translate/scale/rotate functions with your mouse to change size or position.

Below we will introduce how translate/rotate/scale the 3D image.

How to Use the Asset (Translate/Rotate/Scale)

How to use a 3D object in STYLY Studio

We will introduce how to use the asset (translate/rotate/scale).

Select an asset that you want to use. When you select the asset, it will be yellow.

You can select the asset by clicking it from the hierarchy or clicking it in the scene.

Manipulator

A manipulator will appear when you select an asset.

The manipulator is three arrows in red, green, and blue.

How to Change the Manipulator in STYLY Studio

You can change the manipulator to translate/rotate/scale from the button on the side of the screen labelled move/rotate/scale.

Or, you can use the shortcut keys below.

  • [W] key : translate
  • [E] key : rotate
  • [R] key : scale

Translate

Translate

You can translate the asset by pressing and holding the W key on the key board and by dragging the manipulator.

 

Rotate

Rotate

You can rotate the asset by pressing and holding the E key on the key board and by dragging the manipulator.

 

Scale

Scale

You can scale the asset by pressing and holding the R key on the key board and by dragging the manipulator.

 

 

How to Input the Values

How to Input the Values

You can input the values directly when you click on the value of the manipulator.

After entering a value press the [Enter] key. You can change the values of translate, rotate, and scale this way. You can undo any changes made by pressing [Ctrl] key + [Z] key.

 

How to Publish and Share the Scene

STYLY GALLERY

Lets share your new scene using SNS.

We will introduce how to publish the scene, how to access the scene on the website, and how to experience the scene using a HMD.

How to Publish the Scene

Click the Publish button in STYLY Studio

We will introduce how to publish a completed scene.

The publish screen will appear when you click the Publish button.

The current point of view at the time you click the Publish button will be set as a thumbnail photo for your published the scene.

Please pick the best point of view prior to clicking Publish.

The Publish screen

Clicking the Publish button will take you to the Publish page where you can input a Title for your scene and also a Description.

Please note that inputs can only be done in half-width alphanumeric form and the copy & paste function will not work. 

After clicking the Publish button

Click on the link shown [Open Published Page At STYLY Gallery] after you publish your scene.

The scene you created will appear in the STYLY GALLERY.

My Scene page in STYLY GALLERY

The scene you created will be published in the STYLY GALLERY.

Anyone can access and view your VR scene. Next, we will explain how to experience the scene.  

How to Experience the Scene using a HMD

Anyone who has a HMD can experience your scene.

If you don’t have a HMD, you can also view the scene directly from the website. 

Experience the Scene with a HMD

Click the VR icon

People who have a HMD can experience the scene by clicking the VR icon.

If you don’t have a VR VIEWER, you need to download it. Here is how to download and use the VR VIEWER.

Experience the Scene from the Website

Click a WebGL View icon

People who want to experience the scene from the website can do so by clicking the WebGL View icon.

WebGL View mode

You can look around the scene same way you did while creating the scene in STYLY Studio.  

How to Share the Scene

How to share the scene

Lastly, we will explain how to share your new VR scene.

For Twitter, you can click the Twitter icon and it will publish your work as a tweet.

For Facebook, you can click the Facebook icon and it will automatically post your work to Facebook.

By using 3D Model, Image/Gallery, Video, and Music in STYLY, you can create a new form of expression and experience.

Get started creating, maintaining, sharing, and publishing your original VR scenes with the world now.